GitHub Pages 搭建部落格

JiandanDream發表於2018-07-01

原文連結

簡介

如果只是搭建簡單的個人部落格,Github Pages 絕對是值得嘗試的方案,它提供了靜態網站程式碼的託管服務。

HexoJekyll 這類靜態部落格生成工具,可以生成靜態程式碼。

藉助以上工具,作者只需要專注於寫作,其他工作由它們完成。

筆者採用了 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 serverhexo 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
複製程式碼

參考資料

Github Pages

開始使用 NexT

相關文章