在GitHub Pages上使用Hexo靜態網頁

Hexo 是一個快速、簡單且強大的靜態網站生成器，專門用於建立部落格。它使用 Markdown 語法撰寫文章，將其轉換為靜態 HTML 網頁，並且可以部署到 GitHub Pages 等平台上。Hexo 擁有豐富的插件和主題資源，適合希望快速建立、維護個人網站的使用者。

本次將紀錄，如何進行 Hexo 的基本安裝、設定並佈署到 GitHub Pages中，那麼就開始吧

前置作業安裝

在使用 Hexo 建立靜態 Blog 之前，需要進行一些基本安裝或設定，步驟如下，

1-1. 建立 GitHub repository 並設定為 GitHub Pages

首先，你需要在 GitHub 上建立一個 repository，並啟用 GitHub Pages 來作為網站的主機。

如果你對此過程不熟悉，可以參考我的另一篇文章。

1-2. 下載並安裝 Node.js
Hexo 是基於 Node.js 的靜態網站生成器，因此，你需要安裝 Node.js

請前往 Node.js 官網 下載適合你作業系統的版本，並按照提示完成安裝

1-3. 下載並安裝 Git
Hexo 的部署依賴於 Git 來管理版本控制與部署，可以前往 Git 官網 下載並安裝最新版本的 Git

如果你更偏好手動進行版本控制，也可以選擇自己熟悉的工具，我個人是使用 GitHub Desktop

安裝Hexo與建立Blog

2-1. 開啟電腦的終端機，並輸入以下指令來全域安裝 Hexo

1

npm install -g hexo-cli

2-2. 在電腦中建立一個資料夾來存放 Blog 專案，在終端機中，將當前位置移動到該資料夾

接著輸入以下指令來初始化 Hexo 專案

1

hexo init blog

2-3. 完成上述步驟後，會看到在指定的資料夾中出現了一個名為 blog 的資料夾

需要注意的是，指令最後的 blog 代表要生成的資料夾名稱，你可以根據需求更改這個名稱來自訂資料夾名稱

2-4. 接著，將終端機的路徑移動到 blog 資料夾中，然後輸入以下指令來安裝 Hexo 所需的套件

1

npm install

2-5. 接下來，你可以啟動部落格，檢視初步的成果。

輸入以下指令來啟動 Hexo 伺服器

1

hexo server

2-6. 本地將會啟動一個伺服器，可以在終端機中看到執行的網址。

預設情況下，網址是 http://localhost:4000

你可以在瀏覽器中輸入這個網址來查看 blog 初步成果

若要關閉伺服器，只需回到終端機並按下 Ctrl+C，或者直接關閉終端機畫面即可

config檔配置

在 Hexo 初始化的資料夾中，有一個名為 _config.xml 的設定檔，這個檔案負責配置網站以及靜態檔生成的相關設定。

以下將說明一些設定項目

Site

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 網站的標題
title: CornerChat543's Blog

# 網站的副標題
subtitle: ''

# 網站的描述
description: 'CornerChat543 Blog'

# 網站的關鍵字
keywords:

# 網站的作者
author: CornerChat543

# 網站的語言設定
language: zh-TW

# 網站的時區
timezone: ''

# 網站圖標，顯示在瀏覽器標籤左側，預設沒有，需手動添加
favicon: https://your_image_url/Logo.png

URL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

## 網站網址，若使用 GitHub Pages，則設置為 'https://username.github.io/project'
url: https://cornerchat543.github.io/

# 設定永久連結格式，使用年份、月份和標題
permalink: :year/:month/:title/

# 預設永久連結設定
permalink_defaults:

# 美化網址設定
pretty_urls:

  # 設置為 true 以保留末尾的 'index.html'，設置為 false 則移除
  trailing_index: true
  
  # 設置為 true 以保留末尾的 '.html'，設置為 false 則移除
  trailing_html: true

Extensions

1
2
3
4
5

# 主題設定
theme: landscape

# 插件列表，目前沒有使用任何插件
plugins: []

Deployment

若要使用 Hexo 的自動佈署功能，需要安裝相關套件，指令如下，

1

npm install hexo-deployer-git --save

安裝好後則可以在 _config.yml 中加入以下設定

1
2
3
4
5
6
7
8
9

# 設定部署類型為 git
deploy:
  type: git
  
  # GitHub repository URL
  repo: https://github.com/your_account/your_project.git
  
  # 要push的branch，通常為 gh-pages 分支
  branch: gh-pages

Sitemap

若要自動產生 sitemap ，需要先安裝相關套件，指令如下，

1

npm install hexo-generator-sitemap --save

安裝好後則可以在 _config.yml 中加入以下設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

sitemap:
  
  # 指定 sitemap 的生成路徑
  path:
    - sitemap.xml
  
  # 自定義模板，若留空則使用預設模板
  template: 
  
  # 是否在 sitemap 中包含 rel 屬性
  rel: false
  
  # 是否將標籤包含在 sitemap 中
  tags: true
  
  # 是否將類別包含在 sitemap 中
  categories: true

以上是我在 Hexo 中使用的設定

除了部署（Deployment）方面，因為我後來改為手動推送到 GitHub，所以該設定未使用 。

而 _config.yml 中還有其他設定項，若有需要，可以自行上網查閱。

產生靜態文件

當網站的設定完成後，你可以開始生成靜態文件。

在 Hexo 專案的根目錄下，打開終端機並輸入以下指令 ，

1

hexo generate

指令執行完成後，專案中會出現一個名為 public 的資料夾，裡面包含的檔案就是網站的靜態文件，

這些檔案是網站運作所需的所有資源，準備好之後便可進行部屬。

佈署到Github

當靜態文件產生完畢後，如果你已經在 _config.yml 中安裝並設定了自動部屬的相關內容。

便可以使用 Hexo 的部屬功能，只需在終端機中輸入以下指令：

1

hexo deploy

在過程中，系統會提示你輸入 Git 的相關認證資訊，

完成後，你可以在對應的 GitHub Repository 中看到上傳的結果。

如果不想要使用 Hexo 的內建部屬功能，也可以選擇手動進行佈署，

只需將 public 資料夾中的內容複製到你本地的 Git 資料夾中，

然後使用自己熟悉的 Git 工具將內容 push 到 GitHub 上即可。

總結

相比於 WordPress 較為繁瑣的安裝與設定步驟，Hexo 只需簡單快速的幾個步驟，就能完成靜態網站的搭建。無需帳號登入，完全可以在離線環境中使用，

如果要說缺點的話，可能就是 Hexo 沒有圖形化的操作介面，所有設定和操作都依賴修改配置檔案和命令行操作。

至於 Hexo 的主題更換、指令介紹、專案結構及文章撰寫等細節，有興趣的話可以前往另篇文章，Hexo Blog的基本配置說明指南。

自言自語543

先前在 GitHub Pages 上使用的靜態網頁，是透過本地的 WordPress 來管理與建置的。WordPress 提供了一個圖形化的後台，可以方便地設定網站內容，並使用各種插件和主題。整體的版面配置與顏色經過自己的調整後，也滿符合我的需求。然而，時間一久，總覺得網站的某些地方還是怪怪的。

每當我想要改動一些內容或輕微修改文章時，就必須開啟 XAMPP 中的 Apache 和 MySQL，覺得有點麻煩。而且在啟動 MySQL 時，偶爾會出現錯誤，雖然多試幾次後就會正常。有一次，遇到完全無法啟動的情況，只好重新安裝和設定，並且將 GitHub Pages 上的文章複製回來復原。往後在使用時總感到心驚膽跳，手動備份資料的頻率也因此大幅提高。

雖然 WordPress 在文章撰寫上非常貼心，會記錄修改前的版本（存在於 MySQL 中），但看到備份資料的容量不斷增加，心裡總是不禁想著：“這真的有必要嗎?”

而在某天半夜，在整理先前建置 Blog 時，所觀摩的網路上各種 Blog 網站的功能與配置資料，赫然發現 Hexo 和 Volantis 主題。起初，誤以為 Hexo 是使用 Markdown 編輯與上傳文章的，但隨著進一步了解，發現整個專案的安裝與管理過程其實相當簡單。此外，Volantis 主題具備的功能和配色更符合我的需求。若對 web 開發有所了解，似乎也能直接修改主題中的檔案。

因此，在稍作嘗試之後，決定將自己的 GitHub Pages 改用 Hexo。目前使用下來，感到非常滿意。希望這次轉換能成為契機，讓我能將想要記錄的事物一一記錄在這個 Blog 中。