（Ⅰ）基於Hexo+GitHub Page搭建部落格，繫結域名及備份

Jaybo發表於2018-01-29
HexoGithub

前言

這裡引用阮一峰老師網路日誌裡說的，對於喜歡寫部落格的人，會經歷三個階段：

第一階段，剛接觸 Blog，覺得很新鮮，試著選擇一個免費空間來寫。

第二階段，發現免費空間限制太多，就自己購買域名和空間，搭建獨立部落格。

第三階段，覺得獨立部落格的管理太麻煩，最好在保留控制權的前提下，讓別人來管，自己只負責寫文章。

大多數部落格作者，都停留在第一和第二階段，因為第三階段不太容易到達：你很難找到俯首聽命、願意為你管理伺服器的人。

但是其實該情況早已改變，很多程式設計師早已在 GitHub 網站上搭建 Blog。他們既擁有絕對管理權，又享受 GitHub 帶來的便利——不管何時何地，只要向主機提交 commit，就能釋出新文章。更妙的是，這一切還是免費的，GitHub 提供無限流量，世界各地都有理想的訪問速度。

好了，本文就來講如何在 GitHub 上搭建部落格及採用 Git 分支進行文章備份。

基於 Hexo+GitHub Page 搭建部落格的教程，網上這樣的文章很多，在這之前我也記錄過一篇 基於Hexo+GitHub Page搭建免費個人部落格教程。網上相關文章也很多：

本文主要是梳理搭建步驟，特別地，本文主要特點有采用 Git 分支進行對部落格源文章進行備份。

1. 部落格搭建

在搭建過程之前，先了解下 npm。

先簡單介紹下 npm：npm 是 Node 的模組管理器，功能極其強大。它是 Node 獲得成功的重要原因之一。正因為有了 npm，我們只要一行命令，就能安裝別人寫好的模組 。npm install命令用來安裝模組到 node_modules目錄。

NPM 是隨同 NodeJS 一起安裝的包管理工具，能解決 NodeJS 程式碼部署上的很多問題，常見的使用場景有以下幾種：

  • 允許使用者從 NPM 伺服器下載別人編寫的第三方包到本地使用。
  • 允許使用者從 NPM 伺服器下載並安裝別人編寫的命令列程式到本地使用。
  • 允許使用者將自己編寫的包或命令列程式上傳到 NPM 伺服器供別人使用。 由於新版的 nodejs 已經整合了 npm，所以之前 npm 也一併安裝好了。同樣可以通過輸入 "npm -v" 來測試是否成功安裝。命令如下，出現版本提示表示安裝成功。

—— From： 菜鳥教程

npm 的包安裝分為本地安裝（local）、全域性安裝（global）兩種，從敲的命令列來看，差別只是有沒有 -g 而已，比如：

npm install express	# 本地安裝
npm install express -g   # 全域性安裝
複製程式碼

本地安裝：

將安裝包放在 ./node_modules 下（執行 npm 命令時所在的目錄），如果沒有 node_modules 目錄，會在當前執行 npm 命令的目錄下生成 node_modules 目錄。可以通過 require() 來引入本地安裝的包。

全域性安裝：

將安裝包放在 /usr/local 下或者你 node 的安裝目錄。可以直接在命令列裡使用。

如果你希望具備兩者功能，則需要在兩個地方安裝它或使用 npm link。

1.1 搭建步驟

(1) 第一步：Github Pages

Github Pages 免費的靜態站點，其特點：免費託管、自帶主題、支援自制頁面等。

建立 Github Pages 比較簡單，只要你有一個 GitHub 賬號在建立一個倉庫就行了，但是這個倉庫是有規則的，其格式必須為：yourusername.github.io。然後根據提示一直下一步即可，非常簡單。比如我的賬戶名為strivebo，則格式為strivebo.github.io。（這裡在 GitHub 上建立倉庫我就不多講了吧？）

(2) 第二步：Hexo相關操作

我把用到的命令先記錄在此：

hexo new "postName" #新建文章，縮寫為：hexo n
hexo new page "pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄,,縮寫為：hexo g
hexo server #開啟預覽訪問埠（預設埠4000，'ctrl + c'關閉server）,縮寫為：hexo s  
hexo s -p 8080  #本地預覽的時候修改埠為8080 
hexo s -debug #本地預覽除錯
hexo deploy #部署到GitHub，縮寫為：hexo d
hexo clean  # 清除快取檔案 db.json 和已生成的靜態檔案 public 
hexo help  # 檢視幫助
hexo version  #檢視Hexo的版本
---------------以下為組合命令----------------------------------
hexo s -g  #生成並本地預覽
hexo d -g  #生成並上傳
複製程式碼

具體的操作步驟：

  1. 安裝 Git 和 node.js（筆者實踐使用的 Git-2.15.0-64-bit.exe 和 node-v9.4.0-x64.msi 版本）；

  2. 新建目錄，如名稱為 blog 的資料夾，然後在該目錄下的Git Bash （安裝了 Git 就有這個，滑鼠右鍵會出現）下輸入npm install -g hexo

    基於上面對 npm 的瞭解，此命令為全域性安裝 hexo；也有看到教程寫的是：npm install -g hexo-cli這個（並且官方文件也是用的這個命令說是安裝 hexo）；或者好像也可以使用npm install hexo --save進行安裝（親測：不可以先使用這個命令！），安裝完畢生成了node_node_modules資料夾（莫非這個命令才是此版本 node.js 對應的安裝方式？），然後再執行hexo或者是後面的需要用到的hexo g命令，都會生成db.json檔案，我現在還不知道其作用，當然hexo g還會生成 public 檔案內容（文章被編譯形成的資料夾）。

    去網上找了下解釋：hexo和hexo-cli的關係？

    ① hexo 本身是一個靜態部落格生成工具，具備編譯 Markdown、拼接主題模板、生成 HTML、上傳 Git 或 FTP 等基本功能。將這些功能封裝為命令，提供給使用者通過 hexo server / hexo deploy 等命令呼叫的模組，就是 hexo-cli 了。CLI = Command Line Interface 命令列介面。

    ② 後者是前者的命令列模式，即 hexo-cli為hexo的命令列模式。

  3. 再在該目錄下，Git Bash 下敲hexo init，會自動下載如下檔案及資料夾到這個目錄，但不包括 public 資料夾。

    node_node_modules 資料夾（納悶：按道理不是在npm install -g hexo生成嗎？）
scaffolds 資料夾
source 資料夾
themes 資料夾
.gitignore 
_config.yml 
package.json 
package-lock.json 
複製程式碼

    備註：public 資料夾為 hexo generate或hexo g（其實是這個「編譯過程」）生成靜態頁面才會生成的資料夾。

  4. 然後 hexo generate 或 hexo g生成 public 資料夾（該資料夾下為 .md 檔案編譯後生成的靜態檔案，包括html/css/js/圖片等等）和db.json檔案

    public資料夾下為.md檔案編譯後形成的檔案，也正是被 hexo deploy部署到 GitHub 上的檔案。

  5. 可以hexo s開啟本地預覽埠，輸入 http://localhost:4000/ 進行預覽，可以看到預設主題下的部落格，如果遇到 4000 埠被佔用的問題，可以使用比如 hexo s -p 8080 指定 8080 埠預覽。好了！ 本地搭建的活幹完了！

    現在可以試試寫文章了實踐了，執行hexo new "第一篇部落格.md"，這樣就在 source 目錄下生成該部落格文章了，然後可以進行寫作了，再去執行hexo g編譯和hexo s預覽了，另外如果文章寫錯了需修改，可以重新生成；網站顯示異常時，可以先使用hexo clean清除快取檔案 db.json 和已生成的靜態檔案目錄 public，再hexo g重新生成。

  6. 本地預覽完畢，則hexo deploy或 hexo d 釋出至 GitHub，訪問地址格式如：yourname.github.io

    注：若在釋出至 GitHub 提示 Deployer not found: github 或者 Deployer not found: git , 原因是需要安裝一個外掛，命令是：npm install hexo-deployer-git --save（網上搜了下，這步的含義說是在安裝 git 外掛）

    釋出之後，該檔案下該目錄下生成了 .deploy_git 資料夾（目測了下：該檔案有一個.git資料夾；其他檔案和public資料夾下內容一樣）。那該資料夾幹嘛的？

    網上看到的解釋 1：

    .deploy_git： 這個應該是 git 部署用的檔案。比如你寫好的部落格想部署到 GitHub Pages 上去的話，可以用 git 部署外掛，那個外掛會建立這個目錄

    網上看到的解釋 2：

    注意，使用這種方式，只會將 hexo 編譯後生成的 html、css、js 等上傳到 github.io 程式碼庫中，並不會將本地的其它原始碼提交； 同時，在本地生成一個 .deploy_git 目錄，表示是 hexo 專用的 git 庫；

    我在部署，即上傳至 GitHub 完畢之後，檢視到 master 分支上的檔案和.deploy_git資料夾下的檔案相同，所以我的猜測正如網上看到的解釋的意思：**hexo d 只會釋出編譯後生成的檔案，.deploy_git目錄表示 hexo 專用的 git 庫，在 hexo d 進行釋出部署的時候，會拷貝 public 資料夾所有內容至 .deploy_git 目錄下，再把該檔案內容推送到 GitHub 倉庫。**在後面的實踐中，證實了這點！

    這裡有個思考的地方？hexo d 釋出的時候為什麼就會發布到倉庫下 master 的分支（我倉庫下明明還有 backup 分支）呢？哈哈，我猜測是在設定_config.yml該檔案的時候：

    deploy: 
type: git
repository: git@github.com:strivebo/strivebo.github.io.git
branch: master
複製程式碼

    我這裡 branch 設定的為 master，所以預設部署到 master 分支。

    其中這裡的配置我解釋下：如repository配置為git@github.com:strivebo/strivebo.github.io.git 寫上這樣的表示採用的 ssh 方式，若為https://github.com/strivebo/strivebo.github.io.git表示採用 https 方式提交。注意的地方，type 值這裡為 git，我看網上很多人說之前很多人設定的值為 github，被坑了。

(3) 更換主題

對於預設主題我們不喜歡怎麼辦？不著急，是可以換主題的，可以到官網推薦的主題選擇：hexo.io/themes/，或者到 GitHub 上搜尋關鍵字「hexo-theme」也能搜到很多；然後就是直接下載下來就行，解壓出來裡面資料夾複製貼上到部落格根目錄的 themes 資料夾下，最後配置好主題配置檔案_config.yml和站點配置檔案_config.yml(即部落格根目錄下的_config.yml)，其中站點配置檔案只要把theme值改為複製貼上過來的主題的那個資料夾名稱就行。

然後編譯、釋出、預覽就可以看到效果了！

1.2 域名繫結

不繫結域名肯定也是可以的，就用預設的 xxx.github.io 來訪問，如果想更個性一點，想擁有一個屬於自己的域名，那也是 OK 的。

分兩大步驟：先到服務商比如阿里雲旗下萬網進行的操作；然後在倉庫專案的操作。

關於域名的註冊，以前域名的註冊總是推薦去國外的 godaddy , 但是現在國內的 阿里雲旗下萬網 也很多人在使用，價格也不貴，一般首次註冊使用還是很便宜的，但據大家說在萬網註冊 .cn 等字尾域名是需要在國內備案的，如果在國外服務商註冊，如 godaddy 註冊，就不用備案。

關於備案問題，我有在網上了解了下，以下摘自網上：

域名的備案根據你的伺服器主機而定，主機在哪就在哪裡備案；

只有中國國內的空間才要求備案，接入商會嚴格把關的，不備案的網站是絕對不能訪問的；

網站備案主要是看你的網路主機是哪家公司的，就在哪家公司做備案；

備案與域名註冊商無關，與伺服器有關，也就是說你的域名可以接入其他任何一家 IDC，但如果你的伺服器在萬網，那麼萬網作為伺服器接入商，你的備案資訊就必須先經過萬網的稽核後才能遞交工信部終審；

註冊 cn 域名做網站並不是一定需要備案的，主要還是看用的是哪時主機。如果用的是國內主機，那麼就必須備案，如果用的是國外的空間，那麼就不需要備案，直接使用即可。不過需要注意的是，根據 CN 域名管理機構 CNNIC 的規定，cn 域名在註冊時需要註冊人提交身份證掃描件進行稽核，在稽核通過後才能正常使用，否則就會註冊失敗；

其實是一句話，域名如果繫結指向到國內網站空間就要備案。也就是說如果你這個域名只是純粹註冊下來，用作投資或者暫時不用，是無需備案的。域名指向到國外網站空間，也是無需備案的。但是 CN 域名是特例，CN 域名指向到國外網站空間也要備案，不備案就是暫停解析狀態，無法指向到任何 IP。由於域名備案基本取決於網站空間的情況，所以備案也是空間服務商提供備案，不是域名註冊商。

.......

看了網上一些解釋，我大概明白了，是否備案與域名無關，得看購買的主機/伺服器在哪，在國內的才需要備案。我想我利用的是 GitHub Page 服務，相當於伺服器在國外，所以不用備案吧。下面以在萬網註冊為例。

(1) 萬網的操作——域名解析設定

登入萬網購買域名。然後：管理控制檯 → 域名與網站（萬網） → 域名；在購買的那個域名處，點選「解析」，進行如下設定。

繫結域名分 2 種情況：帶 www 和不帶 www 的。

域名配置最常見有 2 種方式，CNAME 和 A 記錄，CNAME 填寫域名，A 記錄填寫 IP，由於不帶 www 方式只能採用 A 記錄，所以必須先 ping 一下你的 使用者名稱.github.io 的 IP，然後到你的域名 DNS 設定頁，將 A 記錄指向你 ping 出來的 IP，將 CNAME 指向你的 使用者名稱.github.io，這樣可以保證無論是否新增 www 都可以訪問，如下：

記錄型別 主機記錄 解析線路 記錄值
A @ 預設 103.245.222.133
CNAME www 預設 strivebo.github.io

(2) 對倉庫的操作——新增CNAME檔案

在 GitHub 部落格倉庫 master 分支根目錄建立一個 CNAME 檔案(無字尾)，裡面填寫你的域名，加不加 www 看自己喜好，因為經測試：

  • 如果你填寫的是沒有 www 的，比如 mygit.me，那麼無論是訪問 http://www.mygit.me 還是 http://mygit.me，都會自動跳轉到 http://mygit.me
  • 如果你填寫的是帶 www 的，比如 www.mygit.me ，那麼無論是訪問 http://www.mygit.me 還是 http://mygit.me，都會自動跳轉到 http://www.mygit.me
  • 如果你填寫的是其它子域名，比如 abc.mygit.me，那麼訪問 http://abc.mygit.me 沒問題，但是訪問 http://mygit.me ，不會自動跳轉到 http://abc.mygit.me

關於新增 CNAME 檔案簡單提下，如果你不想如上直接在遠端倉庫建立 CNAME 檔案，可按如下操作在本地新增完再部署：

在部落格目錄的 source 資料夾下新增 CNAME 檔案，hexo g 編譯會自動生成這個檔案於 public 中，hexo d 部署的時候會把 public 資料夾下檔案複製於 .deploy_git 目錄下進行釋出。

參考資料：使用hexo+github搭建免費個人部落格詳細教程

域名繫結個人實操

(1) 域名註冊和解析

一開始我使用的都是阿里雲的，包括購買域名、域名解析，後來域名快要到期了，準備續費三年，發現有點小貴，於是想著買一個新的域名會不會更便宜呢？然後有在騰訊雲下搜了下相同名稱但字尾為 .com 的域名發現比在阿里雲續費三年價格還便宜一點點，遂直接在騰訊雲買了個新的域名（購買傳送門），解析用的是騰訊雲的免費解析套餐（雲解析套餐 - 騰訊雲 可以瞭解下）。以下是我的解析設定：

主機記錄 記錄型別 線路型別 記錄值
www CNAME 預設 strivebo.github.io.
@ CNAME 預設 strivebo.github.io.

（Ⅰ）基於Hexo+GitHub Page搭建部落格，繫結域名及備份

從上圖可以瞭解到，新增 www、@ 記錄，CNAME 的型別，這樣話，不管位址列輸入的是帶 www 的www.strivebo.com ，還是不帶 www 的 strivebo.com 都是可以訪問到目標網頁。

(2) 建立CNAME檔案

在本地部落格根目錄下的 source 資料夾中，新建一個名為 CNAME 的檔案，注意這個檔案不帶 任何字尾名。開啟 CNAME 檔案，在裡面填寫你購買的域名，加不加www看前文的說明，就不贅述了。

(3) SSL證照

什麼是 SSL 證照？

首先說明 SSL（安全套接層，Secure Sockets Layer）是一種安全協議，目的是為網際網路通訊，提供安全及資料完整性保障。SSL 證照遵循 SSL 協議，可安裝在伺服器上，實現資料傳輸加密。

CA（數字證照認證，Certificate Authority）機構，是承擔公鑰合法性檢驗的第三方權威機構，負責指定政策、步驟來驗證使用者的身份，並對 SSL 證照進行簽名，確保證照持有者的身份和公鑰的所有權。CA 機構為每個使用公開金鑰的使用者發放一個 SSL 證照，SSL 證照的作用是證明證照中列出的個人/企業合法擁有證照中列出的公開金鑰。CA 機構的數字簽名使得攻擊者不能偽造和篡改證照。

SSL 證照實際上就是 CA 機構對使用者公鑰的認證，內容包括電子簽證機關的資訊、公鑰使用者資訊、公鑰、權威機構的簽字和有效期等。

簡單看，安裝了 SSL 證照，可以讓你的網站支援 HTTPS 地址形式，位址列不再提示連線不安全。瞭解下：SSL證照_SSL數字證照_HTTPS加密 - 騰訊雲。

騰訊雲提供免費 SSL 證照申請，如何申請：SSL 證照 域名型（DV）免費SSL證照 - 騰訊雲。申請到後的證照可下載到本地，或者部署到雲服務。

SSL 證照如何安裝和部署指引：SSL 證照 證照安裝指引 - 騰訊雲、hexo 部落格開啟 https (SSL 證照)。

其實對於 GitHub Page 現在可以對自定義域名支援 HTTPS：

GitHub 官方在 2018 年5 月 1 號宣佈，GitHub Pages 的自定義域名獲得對 HTTPS 的支援。

設定操作：開啟倉庫的Settings，找到 GitHub Pages 項，找到 Enforce HTTPS，打上勾即可。

1.3 問題彙總

問題 1： 執行 hexo deploy 命令，README 檔案就消失，有什麼解決方法嗎？

在 Hexo 目錄下的 source 目錄下新建一個 README.md檔案，修改 Hexo 目錄下的配置檔案_config.yml，將skip_render引數的值設定為上。即 skip_render: README.md儲存退出即可。使用 hexo d 命令就不會渲染 README.md 這個檔案了。

參考資料：怎麼用hexo上傳一個README.md到github?

2. 部落格備份

2.1 備份詳解

部落格搭建完畢，就可以通過 https://strivebo.github.io 類似這樣的格式訪問了。如果要繫結了域名就可以使用域名訪問了。

這裡有個問題是：部署上去的，即釋出到 GitHub 的都是編譯後的檔案，如 html、css，js等檔案，但是自己寫的 .md 文章實際是沒有上傳至 GitHub 的，如果需要備份這些原始檔，該怎麼備份呢？或者換了別的電腦該怎麼更新部落格呢？

(1) 如果備份分支 backup 為預設分支

如果備份分支 backup 為預設分支：在完成上面部署至 GitHub 之後，可以把該部落格目錄於 GitHub 部落格這個倉庫進行關聯（即繫結），這樣就在該根目錄生成記錄版本控制資訊的.git目錄，這裡這塊知識就是 git 有關知識了，自行網上了解下 .git 目錄作用。同時也能注意到部落格根目錄下有個.gitigore檔案，就是可以設定檔案要還是不要 push 到 GitHub 倉庫去。

因為首次 GitHub 上沒有非預設分支，使用如下命令：

git push origin backup:backup
複製程式碼

這條命令的作用是：把本地 backup 分支推送到名字為 origin 的遠端伺服器的 backup 分支上，但因為遠端伺服器沒有 backup 分支，會自動新建該同名分支，然後在 GitHub 網站的 setting 頁面設定 backup 為預設分支。 其中，這步操作，就把需要備份檔案比如 source 資料夾下的的部落格「原始檔」已經上傳至分支 backup。

然後下次就算換電腦了，可以直接 clone 該部落格倉庫，得到 backup 分支的資料（即得到了 GitHub 預設分支 backup 資料），然後再如最開始安裝 nodejs、Git 以及安裝 hexo，最後再執行相關命令得到編譯後的檔案（即 public 目錄），最後hexo d部署至 GitHub 部落格倉庫的 master 上。

(2) 如果部署分支 master 為預設分支

如果部署分支 master 為預設分支 ：換了電腦之後，clone 倉庫後預設顯示 master 分支資料，然後執行格式 git checkout -b <本地分支名稱> origin/<遠端分支名稱>，如 git checkout -b backup orgin/backup 該語句作用是在本地建立新的分支，分支的名稱是 backup，第二個 backup 也是我想要 clone 的遠端分支的名字，這樣 GitHub 上非預設分支的資料也 clone下來了，而且還進行了繫結；

再git checkout backup 這樣就切換到本地 backup 分支了，然後進行寫文章，編譯，部署等操作，因為部署只會部署.deloper_git資料夾下檔案內容，所以這樣的方式也是可行的。

但是這裡有個問題是，備份分支 backup 並沒有備份「node_modules」資料夾，所以需要重新安裝hexo，即執行一開始講到的npm install -g hexo，如果不行，則用這個npm install -g hexo-cli試試來安裝 hexo，然後可以用 hexo 命令進行一系列如編譯、部署等操作了。

這裡又有個問題出現了，hexo g編譯文章後，使得package.json和package-lock.json檔案改動了，如果擔心這裡的變動引起不必要的問題，可以乾脆在.gitignore檔案中設定忽略這兩個檔案不被提交。

實際操作中，發現每次 add 命令把修改提交到暫緩區後，還是會提示package.json檔案的已修改，同時也切換不了到本地 master 分支，得了，commit 一次，然後切換到本地 master 分支檢視，發現比遠端 master 分支多了node_modules資料夾和db.json檔案。

然後hexo d就可以釋出部署public資料夾內容至 GitHub 上了，OK。

最後，進行 Git 有關操作 git push origin backup:backup 進行備份原始檔（不包括.gitgnore設定的那些被忽略提交的檔案和目錄，哈哈，比如node_modules這個目錄就不會被提交到備份分支 backup 啊）！

相關學習：

2.2 備份實戰

本人 GitHub 部落格那個倉庫設定的是 master 為預設分支；另外我本機安裝版本為 Git v2.15.0，nodejs v9.4.0。

  1. git clone git@github.com:strivebo/strivebo.github.io.git克隆預設分支 master 分支資料；

  2. 使用git branch -a可以檢視到本地只有 master 分支以及遠端有 master 和 backup 分支，於是git checkout -b backup origin/backup 可以本地自動新建了 backup 分支並且與遠端 backup 分支繫結了，同時切換到了本地 backup 分支，並且可以看到本地分支內容和遠端一樣，內容如下：

    scaffolds 資料夾
source 資料夾
themes 資料夾
.gitignore 
_config.yml 
package.json 
package-lock.json 
複製程式碼

  3. 使用npm install -g hexo或者npm install -g hexo-cli安裝 hexo，完畢之後未在部落格根目錄生成node_modules資料夾，並且繼續敲hexo init提示：

    ERROR Local hexo not found in G:\strivebo.github.io
ERROR Try running: 'npm install hexo --save'
複製程式碼

    於是敲npm install hexo --save，可以看到部落格根目錄生成了node_modules資料夾及內容，然後可以使用hexo init來生成一些檔案了，但是因為我遠端的備份分支 backup 本來就是備份了這個步驟生成的檔案（除了 node_modules 資料夾內容未備份），比如 themes 檔案等都是遠端備份了的；

  4. 然後hexo g編譯 source 中的部落格文章，生成 public 資料夾，編譯後的 html/css/js 等檔案也存於此，hexo s本地預覽；

  5. 然後本地在 source 新增部落格文章，以及文章修改，hexo g、hexo g即可，最後 hexo d釋出部署至 GitHub（其實 hexo d會自動生成一個.deploy_git資料夾，並且實質是把 public 資料夾內容複製於該資料夾進行釋出的，該資料夾下有個隱藏資料夾.git維護著 釋出 這個過程的版本控制資訊。）

update：2018-01-29 v1.1

update：2019-02-13 標題及部分內容和文字表達處修改

update：2019-02-14 增加了「域名繫結個人實操」小節內容；標題由「基於Hexo+GitHub Page搭建部落格及備份筆記」改為「「（Ⅰ）基於Hexo+GitHub Page搭建部落格，繫結域名及備份」」

相關文章