使用 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)

在命令行中輸入

git --version 回車鍵Enter
npm --version 回車鍵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 主題文檔

歡迎添加我我的微信，互相學習交流