[hexo] Hexo 進階設定指南

Hexo 進階設定指南

在這篇文章中，我們將深入探討 Hexo 的進階設定，包括如何安裝主題、插件，設定 categories 與 tags 的映射，並優化 SEO 和搜尋功能。這些進階設定將幫助您打造一個更符合個人需求的靜態部落格。

1. 主題安裝

Hexo 提供了許多精美的主題，您可以根據需求選擇並安裝。以下是安裝 Hexo 主題的一般步驟。

1.1 從 GitHub 安裝主題

首先，您需要選擇一個主題，這裡以 Fluid 主題為例：

# clone Fluid 主題到 themes 資料夾
git clone git@github.com:fluid-dev/hexo-theme-fluid.git themes/fluid

接著，更新您的 _config.yml 檔案來設定主題：

theme: fluid

1.2 自定義主題設定

每個主題都有自己的 _config.yml 設定檔。安裝好主題後，您可以到 themes/fluid/_config.yml 檔案中進行自定義。

# 在主題的 _config.yml 中，設定社交媒體連結
social_links:
    github: https://github.com/terryyaowork
    twitter: https://twitter.com/terryyaowork

這裡可以配置社交媒體連結、頁面佈局、外觀等多種選項，具體可以參照主題官方文件。

官方 Hexo 主題列表連結: Hexo Themes

---

2. 插件安裝

在使用 Hexo 建立部落格的過程中，以下這些插件能夠幫助您提升網站功能和效能。這裡列出了您需要安裝的插件以及相應的設定方法。

2.1 搜尋功能插件 hexo-generator-searchdb

hexo-generator-searchdb 插件提供了本地搜尋功能，可以讓讀者更方便地在您的部落格中搜尋內容。這是必選的插件，因為它能提升用戶體驗，特別是當文章數量增加後，搜尋功能變得至關重要。

安裝方式如下：

pnpm install hexo-generator-searchdb --save

在 _config.yml 中添加以下配置來啟用搜尋功能：

search:
    path: search.xml
    field: post
    format: html
    limit: 10000

---

2.2 SEO 插件 hexo-generator-sitemap

hexo-generator-sitemap 插件能幫助您的網站生成 sitemap.xml 檔案，這是對搜尋引擎友好的檔案，能幫助搜尋引擎更好地抓取您的網站內容，提升網站的可見性。這對於 SEO 非常重要，因為它能幫助搜尋引擎更快地索引您的網站，提升搜尋排名。

安裝方式如下：

pnpm install hexo-generator-sitemap --save

在 _config.yml 中添加以下配置來啟用 Sitemap：

sitemap:
    path: sitemap.xml

---

2.3 圖片與文件壓縮插件 hexo-neat

hexo-neat 插件幫助您壓縮網站的 HTML、CSS 和 JS 檔案，減少網站的檔案大小，提升加載速度。對於擁有大量內容或圖片的部落格來說，網站加載速度不僅影響用戶體驗，也對 SEO 有直接的影響，搜尋引擎通常會優先排名加載速度較快的網站。

安裝方式如下：

pnpm install hexo-neat --save

在 _config.yml 中添加以下配置來啟用壓縮功能：

neat_enable: true
neat_html:
    enable: true
    remove_comments: true
neat_css:
    enable: true
neat_js:
    enable: true

---

2.4 Git 部署插件 hexo-deployer-git

hexo-deployer-git 插件能夠將您的 Hexo 部落格部署到 GitHub Pages。安裝方式如下：

pnpm install hexo-deployer-git --save

在 _config.yml 中設定 GitHub Pages 的部署信息：

deploy:
    type: git
    repo: git@github.com:<YOUR_USERNAME>/<YOUR_REPO>.git
    branch: main

---

2.5 分類與標籤插件

Hexo 支援分類與標籤頁面的自動生成，您可以使用 hexo-generator-category 和 hexo-generator-tag 插件來實現這個功能：

pnpm install hexo-generator-category --save
pnpm install hexo-generator-tag --save

在 _config.yml 中不需要額外設定，這些插件會自動根據您的文章生成分類與標籤頁面。

---

2.6 其他必要的插件

除了上面提到的核心插件，這裡還有一些插件會幫助優化您的網站運行：

• Hexo 渲染插件：
• hexo-renderer-marked：用於渲染 Markdown 文章。
• hexo-renderer-ejs、hexo-renderer-pug、hexo-renderer-stylus：用於支持 EJS、Pug 和 Stylus 模板語法。

安裝方式如下：

pnpm install hexo-renderer-marked hexo-renderer-ejs hexo-renderer-pug hexo-renderer-stylus --save

---

3. Categories Map 和 Tags Map 設定

Hexo 預設會依照文章的 categories 和 tags 生成對應的分類和標籤頁面。您可以透過設定 _config.yml 來自定義這些分類與標籤的映射。

3.1 Categories Map

如果您的部落格文章使用了不同的分類名稱來表示類似的主題，您可以使用 category_map 來統一它們。例如，將「設計模式」和「設計」映射成同一個分類。

category_map:
    design_patterns: design

3.2 Tags Map

同樣地，對於標籤，如果您有多個不同表達方式的標籤，您可以將它們映射為單一的標籤。這樣不僅讓網站結構更加清晰，也有助於搜尋引擎更好地理解您的內容分類。

tag_map:
    front_end_development: frontend

---

4. 部署選項

在這篇指南中，我們主要聚焦於使用 GitHub Pages 來部署您的 Hexo 部落格。

4.1 部署到 GitHub Pages

首先，您需要創建一個 GitHub Repository，將您的部落格部署到 GitHub Pages 上。接著，設定 GitHub 部署信息在 _config.yml 中。

GitHub Pages 的最佳實踐是使用 gh-pages 分支來部署靜態網站，這樣能保持主分支與部署分支的分離。使用以下指令來生成並部署網站：

hexo generate --deploy
# 或使用簡寫
hexo g -d

這樣的設定會將網站的靜態檔案推送到您設定的 GitHub 倉庫中。