VuePress +Nginx+Git私服实现自动部署
捣鼓了一天，总算搭好了自己的博客。搭建、部署的过程里也遇到了不少坑，总结了一下整体流程，希望对想快速搭建个人博客的同学们有所帮助。
在这里，我想分成项目生成和项目的部署两个部分来说明如何进行博客的搭建。
一、项目生成：VuePress
在官方文档中，已经有较为详细的介绍，如何生成一个默认主题的VuePress项目。总体来说，可以使用如下步骤：
1.1 项目初始化
新建一个文件夹，进入文件夹后执行命令：npm init，执行后，系统会提示输入一系列信息，诸如作者、git仓库、项目描述等信息，根据个人信息填写后，会在项目中生成一个package.json的文件。
之后，下载VuePress，可以使用全局配置下载：npm install -g vuepress,这里要注意的是，下载到全局配置中，一定要在环境变量里加入对应的全局仓库的路径，否则在使用的时候，会找不到vuepress相关的文件。
1.2 项目代码
之后，新建文件夹docs，并且在docs文件夹中添加README.md文件，此文件是用于编辑首页内容的。
我们不妨就使用如下的片段:
---
home: true
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
之后，在生成的package.json文件里，修改对应的scripts为:
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
在完成上述配置以后，我们就可以执行命令npm run dev来运行项目，此时访问本地端口8080就可以看到自己的项目如图：
最终的目录树如下:
│ package.json
│
└─docs
README.md
PS:在windows里生成目录树的方法：在对应的文件夹中执行 tree /f > xxx.txt即可，其中xxx.txt为所需生成的文本文件。
1.3 项目打包
项目打包只需要执行npm run build即可在docs/.vuepress文件夹下看到dist文件夹，这就是生成的静态网页项目。
当然，如果要修改各种配置的话，可以在.vuepress文件夹下添加config.js来实现配置，详细信息可以参考官方教程
1.4 主题更换
当然，默认的主题可能不符合大家的需求，在社区中有很多开源的主题可以供大家选择，比如我正在使用的
vuepress-theme-reco就是一款很简洁实用的主题。
二、项目部署
对于项目的部署，我先介绍如何使用Nginx来实现网站的部署，之后，再使用git来实现自动部署。
当然，项目部署在服务器的话，首先肯定要有个服务器了hhhh
有了服务器，我们就可以开始部署啦。
2.1 Nginx的安装与配置
Nginx的安装和启动可以用一下命令完成，完成后访问服务器的ip地址，如果可以看到nginx界面，就说明成功启动了。
apt-get install nginx
service nginx start
Nginx成功启动后，我们对其配置文件进行修改，配置文件一般是/etc/nginx/nginx.conf，为了方便我们以后可能有多个项目需要导入，可以分一层级，即在http中加入include /etc/nginx/conf.d/*.conf;的配置，如此，我们可以在/conf.d文件夹中进行多个项目的配置。
比如，我们进入conf.d文件夹后，新建vuetest.conf文件，在其中进行我们项目的部署:
server {
listen 80;
root /home/project/blog;
index index.html index.htm index.nginx-debian.html;
server_name 121.36.248.3;
location / {
try_files $uri $uri/ =404;
}
}
其中server_name改为自己主机的ip,root为在服务器中，项目根目录存放的地址,listen自己设计的端口号即可。
配置好以后，执行nginx -s reload即可重新加载配置文件。
然后，我们把我们的博客放到root对应的文件夹里就完成了项目的部署了。
但这样部署有这样的问题，就是我们需要自己在本地build好文件，然后放到服务器的对应文件夹里。而就我现在使用的MobaXterm是不支持文件夹的传送的，也就是我们必须压缩项目，然后放到服务器，然后解压，这也太麻烦了吧！我想有一键部署的便捷功能，那么可以利用git来实现。
1.2 自动部署
首先我们搭建一个服务器端的git仓库，我们可以创建一个用户名为git，其专门用来管理项目的传送和部署。
服务器配置:
sudo adduser git
su git
cd
mkdir .ssh && chmod 700 .ssh
touch .ssh/authorized_keys&&chmod 600 .ssh/authorized_keys
配置好以后，我们就相当于使用git用户来进行操作了。
在~/.ssh/authorized_keys里，我们放入本地的公钥。
获取公钥的方法可以是：
1、 打开git bash
2、 执行生成公钥和私钥的命令: ssh-keygen -t rsa
3、 在用户目录下的.ssh文件夹中，会有公钥和私钥，将公钥复制到服务器的authorized_keys文件中。
这样做的目的就是，以后由本地向服务器提交资源，就不需要再进行身份验证了。
创建仓库
找一个地方创建git仓库，比如在/home/git下创建project.git文件夹，作为git仓库:
mkdir project.git
cd project.git
git init --bare
配置hooks
进入创建的git仓库，然后修改post-update.sample文件，并将其改名为post-update，将其修改为如下脚本：
#!/bin/sh
#
# An example hook script to prepare a packed repository for use over
# dumb transports.
#
# To enable this hook, rename this file to "post-update".
#exec git update-server-info
echo "Im update"
GIT_REPO=/home/git/project.git
TMP_GIT_CLONE=/home/tmp/blog
PUBLIC_WWW=/home/project/blog
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}
cp -rf ${TMP_GIT_CLONE} ${PUBLIC_WWW}
其中，GIT_REPO就是我们这个git仓库的地址，TMP_GIT_CLONE就是临时存放上传的资源的路径，PUBLIC_WWW是我们最后项目放的地方,对于这个博客来说，这个PUBLIC_WWW就是之前Nginx配置的root。
这个脚本的含义就是，当我们在本地进行提交的时候，服务器接受后，会将其复制到临时存放目录，然后转移到项目路径下，从而使得我们只需要在本地把我们的生成的项目push到远程服务器，服务器就可以自动帮我们部署到对应的文件夹啦。
遇到的坑
在本地上传的时候，每次都提示权限不足，最后发现是因为我们用到的诸如/home/git/project.git之类的文件，都是在root用户时候创建的，所以其所有者为root，而git用户没有权限进行复制等操作，因此我们可以使用如下命令
sudo chown git:git -R xxx //xxx为对应的文件
使用后，将文件的所有权换成git,再次执行操作即可。
要判断该文件的所有权，可以使用命令：
ll xxx //xxx为对应的文件
来查看文件/文件夹的所有权。
本地上传脚本
在本地要进行项目的打包、上传操作，这些都可以写在一个脚本里执行：
#!/usr/bin/env sh
set -e
npm run build
cd public
git init
git add -A
git commit -m "deploy"
git push -f git@{ip}:~/project.git master
cd -
脚本放在根目录下即可。
最后的目录结构为
│ deploy.sh
│ package-lock.json
│ package.json
│ README.md
│
├─docs
│ README.md
│
├─.vuepress
│ config.js
这样，我们就实现了博客的自动部署到服务器的功能。
参考资料：
个人主机 + Hexo + nginx + git私服 搭建个人博客
我的git仓库为小新而已
博客园:小新而已
会不断更新自己近期学到的东西，欢迎star~
