搗鼓了一天，總算搭好了自己的博客。搭建、部署的過程里也遇到了不少坑，總結了一下整體流程，希望對想快速搭建個人博客的同學們有所幫助。
在這里，我想分成項目生成和項目的部署兩個部分來說明如何進行博客的搭建。
一、項目生成：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~