由于曾經(jīng)搭建過，但是不小心刪掉了本地電腦上的源碼，而 github 上也只有生成后的html頁面代碼，導(dǎo)致了沒法繼續(xù)發(fā)布新文章。并且那會兒倒騰的有些久，斷斷續(xù)續(xù)的弄得，也沒寫博文記錄。現(xiàn)在重新搭建一次，并且記錄一下。

準(zhǔn)備工作

域名

我的域名：www.missfli.com ，不愿意花錢就跳過此步驟。
去godaddy購買域名，英文，中文的話選擇新加坡或臺灣香港都行，基本都能懂。購買的教程，可以參考此文的 購買域名 步驟。

環(huán)境技術(shù)

GitHub Pages 用到了github，那就來個github桌面版，圖形化界面，好用，你要喜歡命令模式也行。
Hexo 的安裝前提就是得有 Node.js 和 Git 。
這里，我們要區(qū)分清楚git與github。git是一個版本控制的工具，而github有點(diǎn)類似于遠(yuǎn)程倉庫，用于存放用git管理的各種項(xiàng)目。
下面提供相關(guān)的官方版本地址，安裝教程去網(wǎng)上搜一下就很多。

• Node 官方版本安裝：https://nodejs.org/en/
• Git 官方版本安裝：https://git-scm.com/download/win
• Github桌面版安裝：https://desktop.github.com/

Git 配置

當(dāng)安裝完Git應(yīng)該做的第一件事情就是設(shè)置用戶名稱和郵件地址。這樣做很重要，因?yàn)槊恳粋€Git的提交都會使用這些信息，并且它會寫入你的每一次提交中，不可更改：

$ git config --global user.name "username"
$ git config --global user.email "username@example.com"

對于user.email，因?yàn)樵贕itHub的commits信息上是可見的，所以如果你不想讓人知道你的email，可以Keeping your email address private:

1. 在GitHub右上方點(diǎn)擊你的頭像，選擇”Settings”；
2. 在右邊的”Personal settings”側(cè)邊欄選擇”Emails”；
3. 選擇”Keep my email address private”。

這樣，你就可以使用如下格式的email進(jìn)行配置：
$ git config --global user.email "username@users.noreply.github.com"

Github 配置

創(chuàng)建倉庫 new repository

在自己的GitHub賬號下創(chuàng)建一個新的倉庫，命名為username.github.io（username 是你的賬號名)。

在這里，要知道，GitHub Pages有兩種類型：User/Organization Pages 和 Project Pages，而我所使用的是User Pages。
簡單來說，User Pages 與 Project Pages的區(qū)別是：

1. User Pages 是用來展示用戶的，而 Project Pages 是用來展示項(xiàng)目的。
2. 用于存放 User Pages 的倉庫必須使用username.github.io的命名規(guī)則，而 Project Pages 則沒有特殊的要求。
3. User Pages 將使用倉庫的 master 分支，而 Project Pages 將使用 gh-pages 分支。
4. User Pages 通過 http(s)://username.github.io 進(jìn)行訪問，而 Projects Pages通過 http(s)://username.github.io/projectname 進(jìn)行訪問。

另外注意：

• 注冊的郵箱一定要驗(yàn)證，否則不會成功；
• 倉庫名字必須是：username.github.io，其中username是你的用戶名；
• 倉庫創(chuàng)建成功不會立即生效，需要過一段時間，大概10-30分鐘，或者更久，我的等了半個小時才生效；

創(chuàng)建倉庫 借用別人的圖：

new-repository.png

創(chuàng)建分支

相關(guān)命令可參考此文。
創(chuàng)建新代碼倉庫時，默認(rèn)是 master 分支，但是這里需要2個分支，一個存儲博客網(wǎng)站源碼，一個存儲HTML靜態(tài)網(wǎng)頁代碼。我的是 gh-dev 分支存放源碼，master 分支存放HTML靜態(tài)網(wǎng)頁代碼。步驟如下()：

#進(jìn)入項(xiàng)目目錄
#創(chuàng)建新分支并切換到該分支 gh-dev
$ git checkout -b gh-dev

然后登陸 github , 將 username.github.io 項(xiàng)目的默認(rèn)分支 master 修改成 gh-dev 即可。切換分支可以查看源碼和生成后的HTML靜態(tài)文件代碼（發(fā)布代碼）。

github修改默認(rèn)分支.png

Github 綁定域名

如果你沒購買域名，就用github提供的默認(rèn)的 xxx.github.io 來訪問，可忽略此步驟。
具體的綁定步驟，參考此文Github 域名綁定

配置SSH key

為什么要配置這個呢？因?yàn)槟闾峤淮a肯定要擁有你的github權(quán)限才可以，但是直接使用用戶名和密碼太不安全了，所以我們使用ssh key來解決本地和服務(wù)器的連接問題。

1. 檢查電腦是否已經(jīng)有SSH KEYS。
   $ ls -al ~/.ssh
   默認(rèn)情況下，public keys的文件名是以下的格式之一：id_dsa.pub、id_ecdsa.pub、id_ed25519.pub、id_rsa.pub。因此，如果列出的文件有public和private鑰匙對（例如id_ras.pub和id_rsa），證明已存在SSH keys。如果提示：No such file or directory 說明你是第一次使用git。

2. 如果沒有SSH KEY，則生成新的SSH KEY。
   ssh-keygen -t rsa -C "your_email@example.com"
   然后連續(xù)3次回車，最終會生成一個文件在用戶目錄下，打開用戶目錄，找到.ssh\id_rsa.pub文件，記事本打開并復(fù)制里面的內(nèi)容，打開你的github主頁，進(jìn)入個人設(shè)置 -> SSH and GPG keys -> New SSH key：

image

將剛復(fù)制的內(nèi)容粘貼到key那里，title隨便填，保存。

3. 測試是否成功
   $ ssh -T git@github.com

如果提示Are you sure you want to continue connecting (yes/no)?，輸入yes，然后會看到：

Hi liuxianan! You've successfully authenticated, but GitHub does not provide shell access.

看到這個信息說明SSH已配置成功！

此時你還需要配置：

$ git config --global user.name "liuxianan"http:// 你的github用戶名，非昵稱
$ git config --global user.email  "xxx@qq.com"http:// 填寫你的github注冊郵箱

具體這個配置是干嘛的我沒仔細(xì)深究。

以上的配置流程，我是用的別人的，給你看個我運(yùn)行的命令截圖：

ssh-key.png

安裝Hexo

Hexo 官網(wǎng)有詳細(xì)步驟。

注意事項(xiàng)：

1. 很多命令既可以用Windows的cmd來完成，也可以使用git bash來完成，但是部分命令會有一些問題，為避免不必要的問題，建議全部使用git bash來執(zhí)行；
2. hexo不同版本差別比較大，網(wǎng)上很多文章的配置信息都是基于2.x的，所以注意不要被誤導(dǎo)；
3. hexo有2種_config.yml文件，一個是根目錄下的全局的_config.yml，一個是各個theme下的，在配置文件中修改時，冒號后面必須有一個空格，否則可能會出問題；

Hexo 創(chuàng)建項(xiàng)目

打開你 Git Bash ，進(jìn)入到你項(xiàng)目所在目錄：

#Hexo 的安裝
$ npm install hexo-cli -g
#查看版本，確認(rèn)是否安裝成功
$ hexo -version 
#建站
$ hexo init <project-name>
$ cd <project-name>
$ npm install
#生成靜態(tài)頁面（markdown文件轉(zhuǎn)化為html文件）
$ hexo generate
#網(wǎng)站預(yù)覽（默認(rèn)的主題風(fēng)格landscape）
$ hexo server

NexT 安裝

你要是愿意用自帶的 langscape 主題，可忽略此步驟。
NexT 官網(wǎng)也有詳細(xì)的步驟，文檔也很詳細(xì)，按照文檔一步一步的設(shè)置一些基本和常用功能。
網(wǎng)址：http://theme-next.iissnan.com/getting-started.html

安裝 NexT

• 下載主題
  在終端窗口下，定位到 Hexo 站點(diǎn)目錄下。使用 Git checkout 代碼：

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

• 啟用主題
  打開站點(diǎn)配置文件_config.yml
  theme: next
• 驗(yàn)證主題
  驗(yàn)證相關(guān)配置是否正確：
  hexo s --debug
  提示：
  INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
  此時即可使用瀏覽器訪問 http://localhost:4000，檢查站點(diǎn)是否正確運(yùn)行。

NexT 主題設(shè)定

• 選擇風(fēng)格 Scheme
• 設(shè)置 界面語言
• 設(shè)置 菜單
• 設(shè)置 側(cè)邊欄
• 設(shè)置 頭像
• 設(shè)置 作者昵稱
• 設(shè)置 站點(diǎn)描述

NexT 集成常用的第三方服務(wù)

• 百度統(tǒng)計
• 閱讀次數(shù)統(tǒng)計（LeanCloud）
• Algolia 搜索

其他的設(shè)置和三方插件服務(wù)引入

其他的設(shè)置和三方插件服務(wù)引入，官方?jīng)]有或遇到了一些坑，后面再單獨(dú)寫博文記錄。

常用hexo命令

常見命令：

hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態(tài)頁面至public目錄
hexo server #開啟預(yù)覽訪問端口（默認(rèn)端口4000，'ctrl + c'關(guān)閉server）
hexo deploy #部署到GitHub
hexo help  # 查看幫助
hexo version  #查看Hexo的版本

縮寫：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

組合命令：

hexo s -g #生成并本地預(yù)覽
hexo d -g #生成并上傳

發(fā)布到 github

將上面hexo新建的項(xiàng)目里的所有文件復(fù)制到 username.github.io(從 github 上的 username.github.io 項(xiàng)目的 gh-dev 分支上 clone 下來項(xiàng)目)里，

首先，ssh key肯定要配置好。
其次，配置_config.yml中有關(guān)deploy的部分。
默認(rèn)生成的_config.yml：

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type:

修改后的_config.yml：

deploy:
  type: git
  #對應(yīng)倉庫的SSH地址（可以在GitHub對應(yīng)的倉庫中復(fù)制）
  repo: git@github.com:woaiwojia321314/woaiwojia321314.github.io.git 
  #（分支：User Pages為master，Project Pages為gh-pages）
  branch: master 

為了能夠使Hexo部署到GitHub上，需要安裝一個插件：
$ npm install hexo-deployer-git --save

然后，本地預(yù)覽博客正常后，用git命令或github桌面端提交源碼到 gh-dev 分支；用hexo deploy命令發(fā)布生成后的HTML代碼到 master 分支上。
執(zhí)行下列指令即可完成部署：

$ hexo generate
$ hexo deploy

之后，可以通過在瀏覽器鍵入：username.github.io進(jìn)行瀏覽，開心吧~

部署與管理

我的博客搭建流程

1. 創(chuàng)建倉庫：woaiwojia321314.github.io ；
2. 創(chuàng)建兩個分支：master 與 gh-dev ；
3. 設(shè)置 gh-dev 為默認(rèn)分支（因?yàn)槲覀冎恍枰謩庸芾磉@個分支上的Hexo網(wǎng)站文件）；
4. clone項(xiàng)目：github 桌面端或使用git clone git@github.com:woaiwojia321314/woaiwojia321314.github.io.git拷貝倉庫；
5. 在本地 woaiwojia321314.github.io 文件夾下通過 Git bash 依次執(zhí)行 npm install hexo-cli、hexo init、npm install 和 npm install hexo-deployer- git（此時當(dāng)前分支應(yīng)顯示為 gh-dev ）;
6. 修改 _config.yml 中的 deploy 參數(shù)，分支應(yīng)為 master , 這樣就能保證發(fā)布代碼發(fā)布到 master 分支上；
7. 依次執(zhí)行g(shù)it add .、git commit -m “…”、git push origin hexo提交網(wǎng)站相關(guān)的文件，或者用 github 桌面端提交項(xiàng)目源碼；
   執(zhí)行hexo generate -d生成網(wǎng)站并部署到GitHub上。（git命令提交或github桌面端提交源碼到 gh-dev ; hexo deploy 命令提交生成HTML文件到 master 分支）
   這樣一來，在 GitHub 上的 woaiwojia321314.github.io 倉庫就有兩個分支，一個hexo分支用來存放網(wǎng)站的原始文件，一個master分支用來存放生成的靜態(tài)網(wǎng)頁。完美( ?? ω ?? )y！

我的博客管理流程

日常修改

在本地對博客進(jìn)行修改（添加新博文、修改樣式等等）后，通過下面的流程進(jìn)行管理：

1. 依次執(zhí)行 git add .、git commit -m “…”、git push origin hexo指令將改動推送到GitHub（此時當(dāng)前分支應(yīng)為 gh-dev ）；
2. 然后才執(zhí)行hexo generate -d發(fā)布網(wǎng)站到 master 分支上。
   雖然兩個過程順序調(diào)轉(zhuǎn)一般不會有問題，不過邏輯上這樣的順序是絕對沒問題的（例如突然死機(jī)要重裝了，悲催….的情況，調(diào)轉(zhuǎn)順序就有問題了）。

本地資料丟失

當(dāng)重裝電腦之后，或者想在其他電腦上修改博客，可以使用下列步驟：

1. clone項(xiàng)目：github桌面端 或 使用 git clone git@github.com:woaiwojia321314/woaiwojia321314.github.io.git 拷貝倉庫（默認(rèn)分支為 gh-dev）；
2. 在本地新拷貝的 woaiwojia321314.github.io 文件夾下通過 Git bash 依次執(zhí)行下列指令：npm install hexo、npm install、npm install hexo-deployer-git（記得，不需要hexo init這條指令）。

保留CNAME、README.md等文件

• CNAME、README.md、favicon.ico等文件放在source目錄下。
  因?yàn)槊看蝝d轉(zhuǎn)化為html時都會清空public文件夾，包括放在該目錄下的CNAME、README.md、favicon.ico等等文件，放在source目錄下，轉(zhuǎn)化時會一起拿過去的。
  CNAME文件內(nèi)容； www.misssfli.com
• 項(xiàng)目根目錄：gitignore文件內(nèi)容：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/

參考

• GitHub Pages + Hexo搭建博客
• 如何搭建一個獨(dú)立博客——簡明Github Pages與Hexo教程
• 使用hexo+github搭建免費(fèi)個人博客詳細(xì)教程
• 搭建個人博客-hexo+github詳細(xì)完整步驟