使用hexo+GitHub搭建個人部落格的心得（含教程）
| Author | |
|---|---|
| Yaoyao Liu | [email protected] |
前言
對於廣大CS專業的學生和碼農，找一個地方寫部落格，記錄一些程式設計、配置環境、閱讀論文的心得體會是一個很常見的習慣。當然想搭建個人部落格，就需要找個靠譜的平臺，主要就是以下的兩種方式：
- 使用網站提供的部落格平臺，例如國內的CSDN、部落格園；國外的Blogger、Wordpress
- 自己建站，釋出到自己的伺服器上，或者釋出到GitHub、GitLab、Bitbucket等支援靜態網頁釋出的git平臺
針對於第一種方式，最大的特點就是省心。CSDN和部落格園都支援多種編輯器，其中就包括Markdown。而且基本上不需要任何設定，註冊個賬號直接寫文章就可以了。缺點是國內的這些平臺都不支援使用自有域名，而且在海外訪問速度也不快，有些平臺還有廣告。國外的平臺，blogger支援自有域名，但是很多設定都不太好用，而WordPress很多功能是收費的。而且這兩個平臺好像在國內無法訪問。總而言之，就是使用別人家的平臺，可以改的東西就會比較少，受到的限制也很多。
所以許多人就選擇了第二種方式。第二種方式也有很多選擇。比如hexo、jekyll，而且WordPress也提供開源安裝包可以部署在自己的伺服器上。相對於自己購買伺服器，我更傾向於使用GitHub、GitLab這些支援Pages服務的平臺。原因很簡單，自己買伺服器首先就要花錢，而且在各種網路條件下連結速度也不好保證。GitHub Pages服務雖然有容量上限，但對於部落格而且基本等於沒有。有著良好的CDN，全世界訪問起來都很快。而且支援繫結自有域名，提供SSL認證實現https。最重要的是，所有的服務都是免費的。
使用GitHub Pages服務搭建部落格，主要就是hexo和jekyll兩個平臺。這兩個平臺都支援Markdown，這一點是最重要的。GitHub Pages服務官方支援的是jekyll，所以jekyll可以在不進行設定的情況下實現CI/CD（持續整合Continuous integration和持續釋出 Continuous delivery）。簡單來說就是不進行任何配置的情況下直接把Markdown和jekyll的原始檔git push到伺服器上，網站就會自動編譯和釋出出來。hexo也支援CI但要進行配置。
但是，很多使用者都反映jeyll速度不如hexo。而且我個人覺得hexo主題管理方面是要優於jekyll了，好看的主題也更多。所以本文介紹hexo+GitHub搭建部落格。
下載安裝hexo
hexo官網提供了良好的開發文件，並且提供了簡體中文的版本。其實安裝過程參照官網一步步來就沒有什麼問題。本文也以ubuntu為例簡述一下安裝配置過程。其他Unix核心的系統比如Debian、macOS過程也很類似。
首先需要安裝npm：
sudo apt-get install python-software-propertie
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install nodejs檢查npm的版本，如果能正常顯示版本號則安裝成功：
npm -v安裝完npm，就可以安裝hexo了：
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo s然後訪問http://localhost:4000，如果顯示正常，就說明hexo已經安裝完成。
這裡提供一些hexo的命令，你也可以在官方幫助文件裡面找到更全面的命令清單。
npm install hexo -g #安裝Hexo
npm update hexo -g #升級
hexo init #初始化部落格
hexo n "new post" == hexo new "new post" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #啟動服務預覽
hexo d == hexo deploy #部署
hexo server #Hexo會監視檔案變動並自動更新，無須重啟伺服器
hexo server -s #靜態模式
hexo server -p 5000 #更改埠
hexo server -i 192.168.1.1 #自定義 IP
hexo clean #清除快取，若是網頁正常情況下可以忽略這條命令將專案部署到GitHub
首先在GitHub新建一個空的Repository，名字為your-username.github.io（把your-username替換為你的使用者名稱），這樣GitHub會自動將網頁釋出到your-username.github.io。
[email protected]:y2l/y2l.github.io.git開啟_config.yml 檔案，找到deploy，進行如下配置：
deploy:
type: git
repo: [email protected]:y2l/y2l.github.io.git
branch: master然後執行：
npm install hexo-deployer-git --save
hexo clean
hexo g
hexo d這樣生成的靜態網頁就被推送到GitHub上了。
然後你需要在GitHub對應的Repository的settings介面上（https://github.com/your-username/your-username.github.io/settings），在GitHub Pages的Source設定中，選擇master branch並點選save。這樣，幾分鐘之後你的網頁就被髮布了。
繫結自己的域名
選擇域名註冊上並註冊域名可以參考：域名註冊與域名解析
配置域名給GitHub Pages可以參考《通過Github實現URL轉發》中配置域名的相關部分。
GitHub可以免費提供SSL認證，實現https，在settings中可以一鍵開啟。
要注意的是，如果使用自己的域名，你需要在source目錄下建立一個名為CNAME的文件，在其中輸入你的域名。如果不建立這個文件，每次部署的時候GitHub Pages的域名配置都會被清空。
配置和使用NexT主題
之所以使用hexo搭建部落格，就是為了使用hexo所支援的大量主題。這裡就像大家介紹一個介面乾淨整潔，很多hexo部落格都使用的主題：NexT。這個主題提供良好的中文開發文件。而且功能齊全，一個部落格需要有的功能，比如標籤、分類、背景設定、分享、評論功能、計數器、Google Analytics等等很多功能都被整合進去，可以說是非常好用。
安裝NexT
cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next然後修改站點配置檔案_config.yml， 找到 theme欄位，並將其值更改為 next。
theme: next到此，NexT 主題安裝完成。
然後執行如下命令檢視效果：
hexo clean
hexo s基本資訊配置
基本資訊包括：部落格標題、作者、描述、語言等等。
開啟 站點配置檔案 ，找到Site模組
title: 標題
subtitle: 副標題
description: 描述
author: 作者
language: 語言（簡體中文是zh-Hans）
timezone: 網站時區（Hexo 預設使用您電腦的時區，不用寫）關於 站點配置檔案 中的其他配置可參考站點配置
選單設定
選單包括：首頁、歸檔、分類、標籤、關於等等
我們剛開始預設的菜單隻有首頁和歸檔兩個，不能夠滿足我們的要求，所以需要新增選單，開啟 主題配置檔案 找到Menu Settings
menu:
home: / || home //首頁
archives: /archives/ || archive //歸檔
categories: /categories/ || th //分類
tags: /tags/ || tags //標籤
about: /about/ || user //關於
#schedule: /schedule/ || calendar //日程表
#sitemap: /sitemap.xml || sitemap //站點地圖
#commonweal: /404/ || heartbeat //公益404看看你需要哪個選單就把哪個取消註釋開啟就行了；
關於後面的格式，以archives: /archives/ || archive為例：
|| 之前的/archives/表示標題“歸檔”，關於標題的格式可以去themes/next/languages/zh-Hans.yml中參考或修改
||之後的archive表示圖示，可以去Font Awesome中檢視或修改，Next主題所有的圖示都來自Font Awesome。
Next主題樣式設定
我們百裡挑一選擇了Next主題，不過Next主題還有4種風格供我們選擇，開啟 主題配置檔案 找到Scheme Settings
# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini側欄設定
側欄設定包括：側欄位置、側欄顯示與否、文章間距、返回頂部按鈕等等
開啟 主題配置檔案 找到sidebar欄位
sidebar:
# Sidebar Position - 側欄位置（只對Pisces | Gemini兩種風格有效）
position: left //靠左放置
#position: right //靠右放置
# Sidebar Display - 側欄顯示時機（只對Muse | Mist兩種風格有效）
#display: post //預設行為，在文章頁面（擁有目錄列表）時顯示
display: always //在所有頁面中都顯示
#display: hide //在所有頁面中都隱藏（可以手動展開）
#display: remove //完全移除
offset: 12 //文章間距（只對Pisces | Gemini兩種風格有效）
b2t: false //返回頂部按鈕（只對Pisces | Gemini兩種風格有效）
scrollpercent: true //返回頂部按鈕的百分比頭像設定
開啟 主題配置檔案 找到Sidebar Avatar欄位
# Sidebar Avatar
avatar: /images/header.jpg這是頭像的路徑，只需把你的頭像命名為header.jpg（隨便命名）放入themes/next/source/images中，將avatar的路徑名改成你的頭像名就OK啦！
RSS設定
先安裝 hexo-generator-feed 外掛
npm install hexo-generator-feed --save開啟 站點配置檔案 找到Extensions在下面新增
# RSS訂閱
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '開啟 主題配置檔案 找到rss，設定為
rss: /atom.xml新增分類模組
新建一個分類頁面
hexo new page categories你會發現你的source資料夾下有了categorcies/index.md，開啟index.md檔案進行如下設定
---
title: 分類
type: "categorcies"
comments: false
---開啟 主題配置檔案 找到menu，將categorcies取消註釋
把文章歸入分類只需在文章的頂部標題下方新增categories欄位，即可自動建立分類名並加入對應的分類中， 如：
title: 分類測試文章標題
categories: 分類名新增標籤模組
新建一個標籤頁面
hexo new page tags你會發現你的source資料夾下有了tags/index.md，開啟index.md檔案，進行如下設定：
---
title: 標籤
type: "tags"
comments: false
---開啟 主題配置檔案 找到menu，將tags取消註釋
把文章新增標籤只需在文章的頂部標題下方新增tags欄位，即可自動建立標籤名並歸入對應的標籤中
舉個栗子：
title: 標籤測試文章標題
tags:
- 標籤1
- 標籤2
...新增關於模組
新建一個關於頁面
hexo new page about你會發現你的source資料夾下有了about/index.md，開啟index.md檔案即可編輯關於你的資訊，可以隨便編輯。 開啟 主題配置檔案 找到menu，將about取消註釋，該頁面就能夠正常顯示。
新增搜尋功能
安裝 hexo-generator-searchdb 外掛
npm install hexo-generator-searchdb --save開啟 站點配置檔案 找到Extensions在下面新增
# 搜尋
search:
path: search.xml
field: post
format: html
limit: 10000開啟 主題配置檔案 找到Local search，將enable設定為true
新增閱讀全文按鈕
因為在你的部落格主頁會有多篇文章，如果你想讓你的文章只顯示一部分，多餘的可以點選閱讀全文來檢視，那麼你需要在你的文章中新增
<!--more-->後記
至此你的部落格就算簡單的配置完成了。hexo的NexT主題還集成了評論、分享等眾多第三方外掛，大家今後還可以慢慢開發。寫部落格不是做網站，如果你希望建立一個有價值的部落格，還應該更加重視部落格的內容。hexo給我們提供了一個良好的平臺，也希望大家都能多多分享自己的經驗和見解。