Hexo 網頁架設教學 結合 GitHub 深度解析 Hexo 佈景主題、外掛系統與 SEO 網站地圖設定

如何使用 Hexo 結合 GitHub Pages 架設部落格？

Hexo 網頁架設教學 的核心在於利用其高效的靜態網站生成能力。實作高品質的 部落格架設 流程包含：1. 環境初始化：透過 npm install hexo-cli 安裝並快速建立專案；2. 佈景主題選擇：挑選符合品牌形象的主題並於 _config.yml 進行配置；3. 外掛系統應用：安裝 網站地圖設定 (Sitemap) 與 PWA 外掛優化搜尋引擎檢索；4. GitHub Pages 部署：將生成的 HTML 檔案一鍵推送到 GitHub 空間。這種方式不僅完全免費，更支援 Markdown 寫作與程式碼內嵌，是前端工程師打造個人品牌的最佳實踐路徑。

前幾年在小編當工程師時常常逛 GitHub，發現有些人會利用這個空間來開部落格，於是稍微研究後就決定動手做一個，也就是大家現在所看到的前端三分鐘。這份 Hexo 網頁架設教學 將帶您快速入門。

在另外一篇文章小編介紹過 想架站不會寫網頁，那就用 WordPress 吧。這篇文章就來推薦對於網站技術略懂略懂的工程師們另外一個 Hexo 架站 選擇。

同樣的以男女交往首先還是外在的條件、談吐等等要超過可交往的門檻，而 Hexo 佈景主題 跟外掛系統對於網站的門面與功能來說是相當有幫助的。

GitHub Pages：免費的靜態網頁託管服務

GitHub 本來就有提供專案放置解說 (README.md) 頁面的功能，利用 GitHub Pages 結合 Jekyll 或是 Hexo，就可以快速產生屬於自己的站台。

除了使用內建的 Jekyll 協助將 markdown 語法轉換成網頁，當然也提供直接使用 html 的方式。

延伸閱讀: 怎麼用 LinkFree 製作一個 Github Pages 取代 LinkTree，一起來試看看吧!

什麼是 Hexo：快速、簡單且強大的部落格框架

Hexo: A fast, simple & powerful blog framework

• 支援豐富的 Hexo 佈景主題。
• 強大的 Hexo 外掛 系統。
• 支援 Markdown 語法，大幅提升寫作與架站效率。
• 提供將程式碼內嵌的功能，非常適合開發者。

1
2
3

function autoDetect() {
  console.log("ye, it is written in JavaScript!");
}

小編使用幾年下來的心得是其實真的蠻簡單的，也沒什麼大問題，搭配已經設計好的佈景主題，簡單修改後就可以開始進入寫部落格的階段了。

底下是官方寫的 Quick Start，只需要短短五行指令就可以讓部落格跑起來。

1
2
3
4
5

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

Hexo 配置

所有相關的基礎配置都會在 _config.yml，透過外掛系統安裝進來的外掛也會在這裡進行設定。

官方已經有提供了教學影片，提供傳送門在此給大家:

Hexo 佈景主題

Hexo 打開會有預設的主題，社群也提供了大量客製化的佈景主題供大家選擇:

https://hexo.io/themes/

每個主題的安裝方式略有不同，不過大致上安裝步驟如下:

1. 將套件執行指令安裝或下載
2. 在 themes 資料夾中確認有加入模板
3. _config.yml 中指定並設定主題相關配置

Hexo 外掛

Hexo 除了佈景主題外也擁有外掛系統，因此能夠輕鬆擴展功能而不用修改核心模組的原始碼。

在 Hexo 中有兩種形式的外掛：

腳本 (Scripts): 只需要把 JavaScript 檔案放到 scripts 資料夾，在啟動時就會自動載入一次，像小編會把 google tag manager 相關的服務都寫在腳本裡。
套件 (Packages): 較複雜且需要透過 npm 管理

https://hexo.io/plugins/

Hexo Packages

• 網站地圖
  • hexo-generator-sitemap
  • hexo-generator-seo-friendly-sitemap
• 標籤 (Tag)
  • hexo-generator-tag
• 分類
  • hexo-generator-category
• 閱讀時間
  • hexo-reading-time
• 相關、熱門文章
  • hexo-related-popular-posts
• 產生 RSS
  • hexo-generator-feed
• 發佈網站到 Github Page
  • hexo-deployer-git
• PWA
  • hexo-pwa
• 網站內容轉換成投影片
  • hexo-generator-slidehtml

Hexo 文章撰寫

Hexo 的資料夾結構中分成

• _draft: 撰寫草稿
• _post: 撰寫正式貼文

撰寫文章可以透過兩個方式

• 執行指令 npx hexo new test
  • 產生 test.md 到 _post
  • 產生 test 資料夾到 _post 給文章存取圖片等靜態檔案
• 直接透過習慣的編輯器建立檔案

記得產生的 markdown 最上面會需要文章的基本資訊，最基本的格式如下:

1
2
3
4
5

---
title: test-test
date: 2022-09-18 09:44:05
tags:
---

Hexo 產生靜態 HTML 檔案

hexo generate

透過一行指令即可完成。

網域設定與 GitHub Pages 連結

如果有購買自定義網域，則需要讓網域指向我們剛剛設定好的 GitHub Pages 或其他主機。

• DNS 代管設定 (主網域、子網域)
• 測試工具

如果是需要使用 Github Page 只需要開好 Repository。

舉我的帳號為例如果是 Root 的專案，Repository 的名稱要叫做 linyencheng.github.io。

網站連結就會是: https://linyencheng.github.io/

網站地圖 (Sitemap) 與 SEO 優化

檔名一般會是叫 sitemap.xml，搜尋引擎會透過爬蟲依照 網站地圖 的資訊來對網站進行檢索與優化。

robots.txt

除了網站地圖也可以設定 robots.txt，主要是告訴搜尋引擎哪些路徑不需要被檢索及公開。

1
2
3
4
5

User-agent: *
Disallow: /cgi-bin/
Disallow: /images/
Disallow: /tmp/
Disallow: /private/

FAQ：Hexo 網頁架設常見問題

Q1：對於沒技術背景的人，選 WordPress 還是 Hexo 比較好？

A：如果完全不會寫網頁且不想要接觸指令行，WordPress 是首選。但如果您是工程師或學習者，Hexo 教學 展示的靜態網站優勢（如：加載極快、安全性高、完全掌控程式碼）會更吸引您。Hexo 部署在 GitHub Pages 上是永久免費的，且透過 Markdown 撰寫文章對技術人員來說非常直覺。

Q2：如何讓 GitHub Pages 連結我的自定義網域 (.com)？

A：核心步驟是在您的 DNS 供應商（如 GoDaddy, Cloudflare）中新增一筆 CNAME 紀錄，指向 username.github.io。同時在 Hexo 專案的 source 資料夾下建立一個名稱為 CNAME 的檔案，內容填入您的網域。完成後在 GitHub 專案設定中啟用 Enforce HTTPS 即可。

Q3：為什麼建議安裝 hexo-generator-seo-friendly-sitemap？

A：基本的 網站地圖設定 僅列出連結，而 SEO Friendly 版本會加入更多的元數據（如更新頻率、優先級），並產生人類可讀的 HTML 版本地圖。這能引導 Google 爬蟲更有效地遍歷您的部落格，確保新發布的文章能被快速收錄，提升 Hexo 架站 的自然搜尋權重。

• ← 上一篇
• 下一篇 →