使用hexo和github搭建靜態博客網站（二）

使用hexo搭建博客網站

全局安裝hexo-cli

npm install hexo-cli -g

npm安裝速度較慢，能夠切換到國內的淘寶NPM鏡像，使用cnpm命令代替npm命令安裝。

安裝完成後執行hexo -v檢查安裝是否完成。

hexo -v

hexo-cli: 1.1.0
os: Darwin 18.2.0 darwin x64
http_parser: 2.8.0
node: 10.15.3
v8: 6.8.275.32-node.51
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

初始化博客工程

hexo init blog
cd blog

安裝NexT主題

咱們這裏選取了NexT主題替換默認的landscape主題，固然你徹底可使用默認的landscape主題，或者根據本身的喜愛選擇其餘主題。安裝主題的方式很是簡單，只須要將主題文件克隆至工程目錄的 themes目錄下， 而後修改下配置文件_config.yml便可。

在工程目錄下克隆最新版本的next主題

cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

修改根目錄下_config.yml配置文件，找到theme字段，將landscape改成next。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

修改成

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

執行hexo server，啓動本地服務器。

hexo server

訪問網址http://localhost:4000/即可以看到使用next主題的博客網站的樣子了。

將本地hexo工程鏈接到git遠端倉庫

咱們用前面創建的hexo-test和blog兩個工程作演示。其中本地hexo爲blog目錄，hexo-test爲git遠端倉庫，咱們須要將本地blog目錄裏的文件提交到遠端的hexo-test倉庫。

首先，咱們以前提交的index.html文件，咱們再也不須要了，先刪除它。

cd hexo-test
rm -rf index.html
git add .
git commit -m 'remove index.html'
git push origin master

blog目錄git初始化

cd blog
git init

此時咱們看到next目錄沒法直接提交，這是由於next目錄是一個子模塊(submodule)

咱們須要刪除next目錄下的.git文件，next目錄變成一個普通文件夾，這樣它就能夠直接提交了。
進入next目錄，執行rm -rf .git命令

cd themes/next/
rm -rf .git

此時next目錄就能夠直接提交了

執行如下命令就能夠將blog目錄裏的內容提交到遠端的hexo-test倉庫了

git add .
git commit -m 'init'
git remote add origin git@github.com:mfaying/hexo-test.git
git push -f origin master

注意，這裏個人本地電腦和遠端的git已經配置過ssh了，因此提交的時候不會出現權限問題。若是你鏈接的是本身的遠端倉庫，能夠查找下如何進行git的ssh配置。

部署

部署咱們須要建一個前面提到的開通GitHub Pages功能的工程，這個專門放置部署的靜態文件，咱們將該工程命名爲hexo-test-deploy(如果發佈到hexo-test工程上遠端的源代碼會被部署的靜態文件覆蓋掉)。這時hexo-test其實就不須要開通GitHub Pages功能了，並且hexo-test也能夠設置成私有工程以免源代碼被查看。

最後咱們須要配置部署路徑，修改文件_config.yml的deploy字段以下：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:mfaying/hexo-test-deploy.git #你的GitHub Pages的倉庫地址
  branch: master

咱們須要先安裝hexo-deployer-git依賴包才能執行hexo deploy命令部署網站

npm install hexo-deployer-git --save

執行如下命令

hexo clean # 簡寫hexo c，清除緩存文件(db.json)和已生成的靜態文件(public)
hexo generate # 簡寫hexo g，生成靜態文件
hexo deploy # 簡寫hexo d，部署

其中hexo g和hexo d能夠合併寫成hexo d -g
如今咱們訪問以前的連接 https://mfaying.github.io/hex...，一個靜態博客網站生成了！

至此，咱們其實已經完成靜態博客網站的建設，後續咱們將介紹一些功能和方法，使網站功能更加完備。

參考

1. 文檔|hexo
2. hexo
3. NexT 使用文檔