使用 Hexo 為自己在 Github 上建一個靜態 Blog部落格 站點

圖片來源：pixiv 40872946

更新於 2018.7.11
首發於夏味的部落格: xiaweiss.com

作為一個 web 程式設計師，當然也想有自己的自留地 於是就研究起了搭建部落格，來記錄自己的成長 瞭解之後，發現 github + hexo 是個門檻很低的，效果很好的方式 hexo 基於 markdown，意味著不需要關心文章排版，也不需要學習程式設計 github 提供了免費空間、域名以及程式碼管理的工具，解決了伺服器問題

1. 準備工作

1.1 安裝 chrome 瀏覽器，百度下載即可

1.2 註冊一個 Github 賬號

如果看不懂英語，可以點這個小按鈕來全文翻譯（失敗的話可以多試幾次，或使用其他翻譯軟體）

1.3 建立一個Repo

登入 Github（初次註冊後會自動登入），點選右上角"+"，再點第一行 "新儲存庫"(New repository)

第一次要求驗證郵箱，郵箱裡會收到 Github 發來的郵件，點那個最長的連結就ok

儲存庫名稱格式為 yourname.github.io。比如，我個人的 Github 賬戶使用者名稱是 xiaweiss，所以，我的這個 Repo 的名稱就是 xiaweiss.github.io

1.4 本地安裝好 git 和 npm

下載自己系統對應的安裝包，安裝 windows 下載第一行的 msi 型別即可，位數按系統的位數即可，一般選64-bit

git下載地址 | node下載地址

安裝過程中，不用選擇，一直點 next下一步即可 安裝好之後，執行其他系統執行 terminal 命令列工具 windows 系統，在桌面或任意資料夾內，右擊，執行 git bush here

(下文的命令列中的命令，每行代表一個命令，行末必須按Enter鍵Enter)

在命令列中輸入

git --version Enter鍵Enter
npm --version Enter鍵Enter
複製程式碼

如果看到版本號，則成功。否則重新安裝

1.5 安裝好 Atom

進入 atom編輯器 官網，下載安裝它

啟動 Atom 之後, 點選 Packages 安裝外掛

請搜尋並安裝以下 markdown 外掛

markdown-writer tool-bar tool-bar-markdown-writer markdown-scroll-sync markdown-pdf

或者也可以使用其他你喜歡的 markdown 檔案編輯工具

2. 本地搭建站點

2.1 安裝 hexo

在命令列中繼續輸入

npm config set registry https://registry.npm.taobao.org
npm install hexo -g
npm install hexo-cli -g
複製程式碼

2.2 初始化你的本地站點

去 Github 把你的 Repo 的 git 地址拷貝出來。 我的是 https://github.com/xiaweiss/xiaweiss.github.io.git 你的是 https://github.com/yourname/yourname.github.io.git （其中，yourname 應該換乘你的 Github 使用者名稱）

然後在 Terminal 皮膚裡輸入

cd ~/Public  (windows中 cd /d)
hexo init yourname.github.io
cd yourname.github.io
npm install hexo-deployer-git --save
hexo generate
hexo server
複製程式碼

這些完成之後，你就可以開啟瀏覽器，在位址列裡輸入： localhost:4000，在本地先看看網站是什麼樣子了。

3. 本地站點發布到 Github 上

3.1 修改 hexo 配置檔案

關閉命令列，重新開啟一個命令列

cd /d/yourname.github.io
atom . （注意符號點前面有空格）
複製程式碼

在 Atom 的左側皮膚中，選擇 _config.yml 檔案，找到 deploy 那一部分（末尾的79行）

deploy:
  type:
  (空行)
複製程式碼

改成：

deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
複製程式碼

Ctrl+S 儲存

3.2 github 生成一個ssh-key配置

https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/ 開啟命令列

git config --global user.name "yourname"
git config --global user.email "your_email@example.com"
ssh-keygen -t rsa -b 4096 -C "your_email@example.com" (替換為你的GitHub電子郵件地址)
複製程式碼

接著會出現幾次提示，如下圖箭頭處，直接按回車Enter鍵即可

將ssh-key新增到 Github

開啟Github，點選右上角的頭像，再點設定

命令列中繼續輸入

cat ~/.ssh/id_rsa.pub
複製程式碼

然後可以看到一堆編碼，見下圖，把紅框裡的部分複製了。

在使用者設定側欄中，單擊 SSH and GPG Keys(SSH和GPG金鑰)，然後單擊右上角綠色的 New SSH key(新的SSH金鑰)

然後可以看到這個介面，Title標題隨意填。key金鑰裡，把剛剛複製好的編碼貼上進去，然後點下面 Add SSH key

出現這個介面，表示成功了

最後一步，命令列中輸入，就可以釋出到 Github 了

hexo deploy
複製程式碼

開啟 https://yourname.github.io 就可以看到部落格了

4. 日常使用

開啟命令列

cd /d/yourname.github.io
atom .
複製程式碼

即可啟動編輯器，並且開啟專案目錄

使用 md 字尾的 markdown 格式，來寫文章。語法請參考 《獻給寫作者的 Markdown 新手指南》

使用 atom 編輯器來 編輯md檔案,開啟md檔案時 ctrl+shift+m 即可看到預覽區域

_draft 資料夾用來存沒寫完的草稿 _posts 資料夾用來存要釋出出去的文章 _images 資料夾用來存文章中的圖片

以上資料夾下，直接放文章，不要放子資料夾 檔名命名格式推薦 20171008-file-name.md 檔名不要使用中文，中文不利於檢索檔名

文章頂部 按模板的語法

---
title: 標題
date: 2017-10-08
tags: 標籤
category: 分類
---
複製程式碼

其中 date 是釋出日期注意不要使用模板的 { date }寫法，這種寫法一旦標題改變或者資料檔案 db.json 或 /public 丟失，釋出日期會改變

多個標籤或分類時，這樣寫

tags:
- 標籤1
- 標籤2
複製程式碼

圖片 可以用 ![](/images/20171008-image-name.png)語法來引入

<!--more--> 表示預覽區的分界線，主頁面只會顯示它之前的內容。
複製程式碼

寫完文章後，本地網站檢視效果

cd /d/yourname.github.io
hexo g
hexo s
複製程式碼

釋出到 Github

cd /d/yourname.github.io
hexo g
hexo s
複製程式碼

5. 備份原生程式碼 和 資料

5.1 堅果雲備份

由於Github是開源的，備份到Github，別人容易下載拿走，考慮到私密性，推薦使用 堅果雲 來自動備份

找到 yourname.github.io 資料夾右擊，選擇堅果雲，選擇同步到個人空間，即可

5.2 Github 備份

如果為了不引入其他工具，也可以使用 Github 來備份：

開啟命令列

cd /d/yourname.github.io
git init
git checkout -b source
git add . (注意點前面有空格)
git commit -m "init"
git remote add origin  https://github.com/yourname/yourname.github.io.git
git push -u origin source
複製程式碼

每次備份操作，開啟命令列：

cd /d/yourname.github.io
git add .
git commit -m "本次備份的提示語"
git push
複製程式碼

誤刪本地資料夾，從備份的程式碼恢復整個 yourname.github.io 資料夾：

cd /d
git clone https://github.com/yourname/yourname.github.io.git
git checkout source
npm install
複製程式碼

如果是在新的電腦恢復 整個 yourname.github.io 資料夾， 需要先重複步驟1 ~ 步驟2，並且其中以下步驟直接跳過，然後再執行上面命令 1.2 註冊一個 Github 賬號 1.3 建立一個Repo 2.2 初始化你的本地站點

6. 進階優化配置

以下部分非新手向，只寫要點，按需食用

6.1 版本控制

使用 git 來控制版本 為方便切換分支， master分支新增 .gitignore 檔案 master分支、source分支內容統一為

.DS_Store
*.log
node_modules/
public/
.deploy*/
.idea/
複製程式碼

6.2 主題更換

使用 NexT.Pisces 主題為例，詳細中文文件

注意當一個repo包含其他repo時，使用命令 git submodule add 來安裝並且分開管理，而不是 git clone，

git submodule add https://github.com/iissnan/hexo-theme-next themes/next
複製程式碼

至於主題配置檔案，可以儲存一份副本到 themes 資料夾裡提交到自己的倉庫

注意切換主題後，如果顯示不正常，執行 hexo clean 來清理資料 特別注意hexo clean同時會清除掉歷史文章的釋出日期，慎用！

clone 含有子repo 的專案後，子 repo 目錄內沒有內容，還需要執行下面兩個命令來 clone 子repo

git submodule init
git submodule update
複製程式碼

6.3 文章末尾新增評論區

目前由於國內稽核機制，國內服務說不定哪天就關閉了。所以推薦國外的服務，比較穩定。使用國外的服務，需要代理上網訪問國外，沒有的使用者則不顯示評論區。

新增Disqus評論

6.4 目錄序號

主題會自動給文章的標題和子標題生成目錄，並且加上序號 如果要自己寫序號，不需要主題自帶序號，修改主題配置檔案 _config.yml 裡的 toc 後面的 member 配置為

156行 number: false
複製程式碼

6.5 圖片引用

推薦不使用圖床，直接把統一圖片存在本地資料夾

目前不支援 atom markdown預覽 和 本地網站裡同時正常預覽圖片

建議編輯時使用 ![](../images/xxx.png)

釋出時用atom ctrl+f 統一把 ../ 替換為 / 即可

6.6 統計

閱讀量統計可以使用 LeanCloud 計數，注意主題配置檔案裡有兩處 LeanCloud，要配置leancloud_visitors

或者直接使用 不蒜子統計 即可，可同時實現閱讀量統計、PV、UV功能。

個人建議，LeanCloud統計閱讀量，不蒜子統計PV、UV

LeanCloud 配置 不蒜子配置

6.7 修改樣式

next 主題使用 stylus 預編譯樣式語言

可以在 themes\next\source\css\_custom\custom.styl 檔案裡寫自己的 stylus 樣式

例如：首行縮排，新增如下程式碼：

p
  text-indent 2em
複製程式碼

6.8 顯示更新日期

修改主題配置檔案 _config.yml，找到 updated_at,修改為

  updated_at: true
複製程式碼

然後就會顯示更新的日期了

如果需要手動設定，可以在文章的標籤里加入 updated，如下

---
title: 使用 Hexo 為自己在 Github 上建一個靜態 Blog部落格 站點
date: 2017-10-08
updated: 2017-11-11
file-title: {{ title }}
tags: Hexo
---
複製程式碼

6.9 底部新增備案資訊、或者其他文字

在主題配置檔案裡找到 custom_text 這行，修改一下即可

#custom_text: Hosted by <a target="_blank" href="https://pages.github.com">GitHub Pages</a>
custom_text: Xiaweiss.com 京ICP備17057895號
複製程式碼

或者在主題配置檔案裡找到 copyright: 這行,修改為

# If not defined, will be used `author` from Hexo main config.
copyright: <a href="http://xiaweiss.com">Xiaweiss.com</a> 京ICP備17057895號
複製程式碼

6.10 設定搜尋服務

使用免費的 local search npm 安裝包

npm install hexo-generator-searchdb --save
複製程式碼

next 主題配置檔案裡，修改配置檔案 top_n_per_article 指正文的搜尋結果，顯示幾條。 -1 代表全部顯示

local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 3
複製程式碼

6.11 新增分類、標籤頁

可以按官方文件設定 建立分類頁面 建立標籤雲頁面

但以上設定會導致多出2個資料夾，而且以後不會在裡面放其他檔案，所以我個人推薦這樣設定 在 source 目錄下: 新建 檔案 categories.md：裡面寫

---
title: 分類
type: "categories"
comments: false
---
複製程式碼

新建 檔案 tags.md：裡面寫

---
title: 標籤
type: "tags"
comments: false
---
複製程式碼

然後修改主題配置檔案，menu設定裡的 categories、tags

menu:
  home: / || home
  categories: /categories.html || th
  tags: /tags.html || tags
複製程式碼

6.12 設定滾動

主題配置檔案裡

scroll_to_more: true
複製程式碼

表示從主頁進去文章後，直接自動滾動到文章中 more 標籤的位置，可以看到網址裡多了#more 如果需要去掉，設定為false即可

save_scroll: false
複製程式碼

表示在本地儲存閱讀的進度（滾動到的位置），重新整理或再次開啟頁面時，可以接著讀。 建議開啟這個功能，設定為true即可

7. 介面美化

7.1 右下角 live2d 小人

中文文件 EYHN/hexo-helper-live2d

下面是我目前舊版2.1.5的使用方式，最新版請參考hexo-helper-live2d 中文文件

舊版配置方式：

安裝

cd yourname.github.io
npm install hexo-helper-live2d@2.1.5
複製程式碼

在 yourname.github.io 的 hexo 配置檔案 _config.yml 裡新增配置項

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  model: koharu # 模型名稱 預設值: z16
  width: 150 # 寬度 預設值: 150
  height: 300 # 高度 預設值: 300
  scaling: 1 # 解析度縮放倍率 預設值: 2
  opacityDefault: 1 # 初始的透明度 預設值: 1
  #opacityHover: 1 # 滑鼠懸浮時的透明度 預設值: 1
  mobileShow: true # 是否在移動裝置上顯示 預設值: true
  mobileScaling: 0.5 # 移動裝置縮放倍率 預設值: 0.5
  position: right # 模型左右側放置位置 預設值: right
  horizontalOffset: 0 # 元素的水平偏移 預設值: 0
  verticalOffset: -20 # 元素的底部偏移 預設值: -20
  className: live2d # 元素的類名 預設值: live2d
  id: live2dcanvas # 元素的id 預設值: live2dcanvas
複製程式碼

我自己使用的是 koharu，如果需要其他的，改為相應的名字即可 舊版所有小人請看作者大大部落格 hexo live2d外掛 2.0 !

接下來，在 next/layout/_layout.swig 檔案裡，找到 </body>,在它前面的行新增程式碼 像這樣：

{{ live2d() }}
</body>
複製程式碼

7.2 配置網站頂部背景顏色、二級標題字色

參照 6.1，新增配置

.headband
  background: #0095EE;
.site-meta
  background: #0095EE;
.site-subtitle
  color: white;
複製程式碼

7.3 其他

介面的優化需要掌握一定的 css 知識，這裡不再贅述 可以參考 千靈《Hexo 優化彙總》 以及我部落格原始碼裡 themes 資料夾下檔案的的相關注釋

概括來說

1. 修改預設好的值，在 next/source/css/_variables/custom.styl 新增變數即可

例如 base.styl 可以看到程式碼 $blue = #0684bd 要把所有預設好的藍色改為白色，custom.styl 裡新增 $red = #fff 即可

2. 新增或修改 樣式，可以在 next/source/css/_custom/custom.styl 寫入 css

3. 修改首頁，新增 js，修改文字元號等，修改 next/layout/_layout.swig 即可 文章頁請修改 next/layout/_macro/post.swig

8.高階設定

8.1 next 主題版本更新或回滾

進入 next 目錄

cd themes/next
git fetch
git tag
複製程式碼

即可看到當前可用版本列表，使用下面命令即可切換到指定版本，如

git checkout v5.1.4
複製程式碼

切換過程中會有檔案衝突 可以切換前執行 git stash，切換後執行 git stash pop，然後修改檔案即可

或者使用軟連結的方式，把修改的檔案放在 next 資料夾外時，只需要修改檔案，重新軟連結即可

感謝閱讀，最後附上部落格原始碼

參考資料：
李笑來《使用 Hexo 為自己在 Github 上建一個靜態 Blog 站點》
千靈《Hexo 優化彙總》
Hexo 官方文件
NexT 主題文件