使用 Hexo + GitHub Pages 打造個人部落格

Blog
,

介紹

使用 Hexo，你可以輕鬆地創建一個可自定義、快速和易於更新的部落格。

Hexo 是一个快速、簡潔且高效的部落格框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒内，就可以利用選定的主題生成靜態網頁。

安裝前置作業

  • Node.js (Node.js 版本不低於 10.13，建議使用 Node.js 12.0 及以上版本)
  • Git
  • 擁有 GitHub 帳號
  • 安裝 IDE（推薦 VS Code）

安裝 Hexo

打開 Terminal 並輸入以下命令：

1
npm install -g hexo-cli

這個命令會在你的電腦上全局安裝 Hexo。

配置 Hexo

安裝完 Hexo 後，請輸入以下指令：

以下範例將會創建 blog 資料夾，並在指定文件夾中部落格網站創建所需要的文件，你也可以命名成自己喜歡的資料夾名稱

1
2
3
hexo init blog
cd blog
npm install

建立完成後，前往 blog 資料夾

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • _config.yml
    • 這個設定檔案包含了部落格的所有設置。你可以自定義標題、副標題、作者、語言等等設置
    • 詳細設定可參考 官方 Config 文件

如果你有興趣知道 Hexo 是怎麼自動生成的可以看以下說明，如果只是要按照指令生成，可以跳過這部分。

  • package.json

    記錄所有載入的應用程式資料，也就是專案中需要的所有模組。

  • scaffolds 模板

    模版 文件夾。當你新建文章時，Hexo 會根據 scaffold 來生成文件。

    Hexo的模板是指在新建的文章文件中默認填充的內容。例如，如果您修改 scaffold/post.md 中的Front-matter內容，那麼每次新建一篇文章時都會包含這個修改。

  • source 資源

    • 存放原始檔案的地方，例如 Markdown 文件、圖片、各種頁面（分頁、About 等）
    • 開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略，除 _posts 文件夾之外
    • Markdown 和 HTML 文件會被解析並放到 public 文件夾，而其他文件會被拷貝過去。

  • themes 主題

    主題的文件夾，Hexo 會根據這個資料夾裡面的主題來生成靜態網頁

創建新文章

Hexo 文章的檔案格式都是用Markdown格式撰寫。

1
2
hexo new [layout] <title>
# 舉例： hexo new "My New Post"
  • 如果沒有設定 layout，則會使用 _config.yml 中的 default_layout 來設定
  • hexo new "My New Post" 這個命令會自動在“source/_posts”文件夾中創建名為 My-New-Post.md 的文件。

Run Server

執行以下命令會在本機啟動 Hexo 服務器，前往 http://localhost:4000/，就建立好你本機的部落格囉！是不是很簡單

1
hexo server

按 Ctrl + C 即可關閉
以上就已經是最簡單的在本機端架設好一個部落格網站，以下是將你的部落格選定主題。

主題

安裝

1
2
3
4
5
# go to your hexo theme folder
cd themes

# clone the project
git clone https://github.com/zoeingwingkei/frame.git

主題配置

在 hexo 的 config.yml 文件裡面，把 theme 改成你喜歡的主題

官方網頁：主題

以下用 cactus 主題示範：

1
theme: cactus

Run Server

在本機運行你的程式，確認主題設定完成👌

1
hexo server

在 GitHub Pages 上部署 Hexo

建立 GitHub Repository

  • 在 Git 建立兩個 Repository

    • 任意名字（e.g. blog）：存 Hexo 的原始碼，之後要編輯網站就可以透過版控去管理程式碼
    • github帳號.github.io：存 Publish 在網站上的程式碼，放到這個資料夾的程式碼就會部署在網站上
    1
    2
    3
    4
    5
    6
    git init
    git add .
    git commit -m "first commit"
    git branch -M main
    git remote add origin git@github.com:帳號/帳號.github.io.git
    git push -u origin main

clean 清除靜態檔案與快取

在每次儲存修正後的檔案之前，會建議先輸入此指令，清除快取檔案 （db.json）和已產生的靜態檔案（public）。

1
hexo clean

可簡寫成 hexo cl

generate 產生靜態檔案

1
hexo generate

可簡寫成 hexo g

通常在每次更新網站的檔案後，當你要將網站部署到雲端時，建議依序輸入 clean -> generate -> deploy 三行指令，避免還有頁面被cache或是更新不完全：

1
2
3
hexo clean    // 清除之前建立的靜態檔案
hexo generate // 建立靜態頁面
hexo deploy   // 部署至 GitHub

安裝快速部署的套件

1
npm install hexo-deployer-git --save

修改根目錄 _config.yml 檔案的 Deployment 設定

1
2
3
4
5
deploy:
  type: git # 使用 Git 部署
  repo: https://github.com/<username>/<username>.github.io.git # 你的儲存庫 clone
  branch: main # 儲存庫分支
  message: "Blog updated" # Commit 訊息

deploy 部署

使用下列指令即可部署檔案到網站上，第一次輸入可能會要求登入 GitHub 帳號：

1
hexo deploy

可簡寫成 hexo d

這樣就成功建立了一個網站，瀏覽看看吧：<github的username>.github.io

總結

這篇文章僅是教學了最基本的部落格架設的設定，其實部落格還有更多進階的設定還可以增強一個網站的功能，例如評論留言板、SEO、相關文章等等，可以網路上再查詢相關資料，做出一個屬於你最滿意的個人部落格哦！