架設部落格 GitHub Pages + Hexo 套版教學

發表於 2023-09-20 更新於 2024-01-11 分類於教學， Blog 閱讀次數：

前言

前一篇提供GitHub作為部落格的相關架設與設定教學，這篇主要是接著GitHub Pages初步架設後，用Hexo做Blog套版與匯入相關設定，使GitHub Pages 的畫面與功能有Blog的樣子

為什麼要用Hexo?

像支援GitHub Pages這種靜態網站框架(Jekyll、Hugo…)很多，
但既然是教學學較多人用的框架做範例，中間遇到的坑會相對比較少。
幾個用Hexo的好處:

學習成本低，中文資源完善
支援 MarkDown 格式撰寫
支援一鍵部署到 GitHub Pages
豐富的色彩主題與外掛

當然以上的好處也是需要使用過後，開始比較才能體現出的優點

安裝所需工具

Node.js
由於Hexo是使用 Node.js編寫，因此需要 Node.js 環境若電腦上沒有的需要安裝 Node.js 喔！
Git
在本地Blog有文章要增修改動設定的異動若要同步到Blog需要安裝Git才能與GitHub Pages同步
Visual Studio Code (vs code)
在本地Blog做編輯時需要一款好的編輯器，Vs Code只是其中一種若本來就有擅用的文字編輯器此工具可忽略

安裝設定

安裝Hexo
打開CMD輸入以下指令就會在本地安裝Hexo建置工具
1
$ npm install -g hexo-cli

初始化 Hexo
這裡以兩種狀況分成兩種做法：

沒有準備資料夾 : 新建資料夾+初始化

1 2	// 會在叫出CMD的路徑下建立該新資料夾 $ hexo init <資料夾名稱>

已準備資料夾 : 在已準備資料夾內初始化

// 用CMD輸入以下指令來切換路徑進入該資料夾或用滑鼠點進要安裝的資料夾內在路徑輸入CMD也可
$ cd <資料夾名稱 or 資料夾路徑>

//進入資料夾後用CMD輸入輸入以下指令進行Hexo初始化
$ hexo init

下圖範例為在桌面路徑下建立HexoTest的資料夾
1_HexoInit

在資料夾安裝所需檔案
1
$ npm install
- 3.1 正式佈署到GitHub前，我們可先在本機端瀏覽剛安裝初始化完的預設Blog畫面，輸入以下指令後，點擊連結 http://localhost:4000/ 就出現以 landscape 預設模板建立的Blog首頁。
  1
  $ hexo server
設定檔結構介紹
安裝完成後，資料夾中已經準備好下方這些檔案和資料夾，針對幾個重要的檔案做相關說明

其實之後用久了依自己需求做調整後，會更清晰這些檔案的操作原理

2_HexoInit

_config.yml :
有關網站的配置都會在這份檔案中設定調整。
例如：網站標題、網站作者、網址、部屬到GitHub儲存庫設定、使用主題名稱等等

# Site
title: GitHub Pages教學  #網站標題
subtitle: 教學用         #網站副標題
description: 測試教學用  #對網站的描述
keywords: 心情， 部落格   #網站的關鍵詞
author: World           #作者名字
language: zh-TW         #網站使用的語言(多語系: [zh-TW, en])
timezone:               #網站時區，非必填

package.json :
記錄所有載入應用程式中需要的所有模組。
themes :
用來存放套版主題的地方，Hexo 會根據主題來解析 source 資料夾中的檔案並產生態頁面。預設主題為 landscape，後續更換主題也是將檔案載到這個地方。
source :
所有的檔案或是資料夾通常都會在這邊。以 _ 開頭的檔案、資料夾或隱藏檔案會被 Hexo忽略(不會被佈署到public 資料夾)，除了 _post 資料夾以外，因為這裡面放的是我們上架的文章。這些靜態檔案（Markdown， HTML 等）會經過發佈後會被放進 public資料夾，而其他檔案則是用複製的方式到 public資料夾。
scaffolds :
資料夾中有三種預設模板：post、page 和 draft，分別對應：要發布的文章、頁面、草稿。
這些是檔案模板，每使用 $ hexo new <type> <name> 創造一個新的貼文或頁面，Hexo就會依指令中的<type> 名稱對應 scaffolds 中的同名模板為你建立檔案雛型。

部署到 GitHub設定

安裝Git相關套件 :
在Hexo 資料夾開啟CMD輸入以下指令安裝部署所需套件，若沒有安裝此套件要佈署到GitHub時會出現 [ERROR Deployer not found: git.] 相關警告語
1
$ npm install hexo-deployer-git --save
修改 _config.yml 檔案的 Deployment 設定 :
這邊指的 _config.yml是指Hexo根目錄第一層的檔案，因很多資料夾都會有同檔名的設定檔，因此提醒一下。
進入_config.yml 後可找到下圖的預設內容

將預設內容修改為以下設定
1
2
3
4
deploy:
type: git
repo: https://github.com/username/repositoryName.github.io.git
branch: main
輸入指令佈署上GitHub
在CMD中輸入以下指令將Hexo的設定與檔案佈署到GitHub上，佈署成功後可到綁定的Repository ⇒ Settings ⇒ Pages ⇒ Visit site 確認佈署後的畫面已套版上Hexo的內容。
1
$ hexo deploy 或 $ hexo d(簡寫)
佈署後一樣需要等幾秒鐘才會在首頁上看到套版後的樣子，不要急!!!

通常完成每次文章或內容修改後，會依序輸入以下指令，來避免更新不完全：
1
2
3
$ hexo clean 或 $ hexo cl -- 清除之前建立的靜態檔案
$ hexo generate 或 $ hexo g -- 產生修改後靜態頁面
$ hexo deploy 或 $ hexo d -- 部署到 GitHub

結語

完成佈署後可到GitHub上綁定的Repository中確認完成佈署或直接到個人頁面 https://[username].github.io/[Repository name] 確認。

在完成初步的Hexo套版後還有一些功能可能之後會需要的，例如:留言板、SEO、文章分類、標籤等等，之後再附上相關教學

前言

為什麼要用Hexo?

安裝所需工具

安裝設定

部署到 GitHub設定

結語

參考資料