簡介
如果只是搭建簡單的個人部落格,Github Pages 絕對是值得嘗試的方案,它提供了靜態網站程式碼的託管服務。
而 Hexo 或 Jekyll 這類靜態部落格生成工具,可以生成靜態程式碼。
藉助以上工具,作者只需要專注於寫作,其他工作由它們完成。
筆者採用了 Hexo,結合 NexT 主題搭建了此部落格。
GitHub 配置
新建 repository,名稱為 username
.github.io,這也是最終的部落格網址,其中 username
必須為 GitHub 上的使用者名稱。
如果已有靜態網站程式碼,可以 clone repository 後,將程式碼複製到相應目錄下,再 push 到 GitHub 上。
# 克隆 repository 來本地
git clone https://github.com/<username>/<username>.github.io
複製程式碼
Hexo
安裝 Hexo
安裝前需要確保已安裝 Git 和 Node.js Mac 自帶 Git,直接跳過,筆者使用 Homebrew 安裝 Node:
# 安裝 Node
brew install node
# 安裝 hexo 成功會有以下提示
npm install -g hexo-cli
/usr/local/bin/hexo -> /usr/local/lib/node_modules/hexo-cli/bin/hexo
> fsevents@1.2.4 install /usr/local/lib/node_modules/hexo-cli/node_modules/fsevents
> node install
[fsevents] Success: "/usr/local/lib/node_modules/hexo-cli/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
+ hexo-cli@1.1.0
added 171 packages from 369 contributors in 29.855s
複製程式碼
新建專案
# folder 為專案目錄名
hexo init <folder>
cd <folder>
npm install
複製程式碼
呼叫 hexo server
或 hexo s --debug
(除錯模式) 後,可以通過 http://localhost:4000/
訪問本地部落格。
NexT 主題
安裝前,需要建立 Hexo 專案,然後複製 NexT 到專案目錄下:
cd <hexo site folder>
git clone https://github.com/iissnan/hexo-theme-next themes/next
複製程式碼
修改 _config.yml
中的 theme 欄位,將其值改為 next。
這樣,NexT 主題安裝完成。接下來驗證主題是否正確啟用。
注意:切換主題後,最好使用 hexo clean
來清除快取。
hexo clean
# 除錯模式啟動 Hexo 本地站點,會顯示異常資訊
hexo -s --debug
# 顯示以下資訊,即為正常
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
複製程式碼
NexT 相關配置在 themes/next/_config.yml
中。
有多種 Scheme,可根據個人喜歡修改:
# Schemes
# scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
複製程式碼
其他詳細設定請參考 開始使用 NexT。
寫作
通過 hexo new
來新建一篇文章:
hexo new [layout] <title> # <title> 不需要字尾名
# 如 hexo new GitHub_Pages_搭建部落格
複製程式碼
可指定文章的佈局(layout),預設為 post,通過修改 _config.yml
中的 default_layout
引數來指定預設佈局。
詳細參考 Hexo 寫作
寫完後,生成靜態檔案
hexo generate
複製程式碼
部署
生成的靜態檔案在 public
目錄下,可以複製到任何地方。
也可以通過 配置,自動部署到常見平臺。
自動部署到 GitHub Pages
安裝 hexo-deployer-git
npm install hexo-deployer-git --save
複製程式碼
修改配置
deploy:
type: git
repo: <repository url>
branch: [branch]
message: [message]
複製程式碼
一鍵部署
hexo deploy
複製程式碼