教你如何架設個人 blog

WalNut Lv1
  2024-11-07 19:46:08 2024-11-07 19:46:08 Created   2025-08-03 17:37:15 2025-08-03 17:37:15 Updated    1.1k Words  4 Mins  

如何使用 Hexo + GitHub Pages 架設個人 blog

前言

本篇主要介紹如何使用 Hexo 並搭配 GitHub Pages 來快速架設個人 blog
從介紹什麼是 Hexo 框架，該如何安裝、建立環境，接著介紹一些常用指令，以及如何部署到 GitHub 上

文章可分為下列幾個部分：

  • 什麼是 Hexo？
  • 前置作業
  • Hexo 環境建置
  • 開始編輯 blog
  • 常用指令
  • 把網頁部署到 Github Pages

什麼是 Hexo？

Hexo 是一個快速、簡單且高度可擴展的靜態網站生成器，主要用於 blog 和網站的創建
它基於 Node.js 開發，並使用 Markdown 格式來撰寫文章，且可以通過各種插件來擴展功能，支援自定義佈局和主題

主要特點包括：

  1. 靜態網站生成：Hexo 將 Markdown 檔案轉換為靜態 HTML 頁面，這樣生成的網站速度較快，且容易部署在各種靜態網站托管平台上，如 GitHub Pages

  2. 易於擴展：Hexo 提供了豐富的插件生態系統，可以用來增加網站功能，如 SEO 優化、社交分享、搜尋等

  3. 高效的部署流程：Hexo 提供了簡單的命令行工具來生成、部署和更新網站，並且支持將網站內容快速推送到各大托管平台

  4. 主題和模板：Hexo 有多樣的主題選擇，使用者可以根據自己的需求進行自定義，甚至開發自己的主題

全都是問 ChatGPT 的不要懷疑

第一步 : 前置作業

在開始安裝 Hexo 之前，必須先在電腦安裝以下工具 ：

Node.js :

下載最新 LTS 版本然後 下一步*n 直到安裝成功，下載完可在 terminal 裡輸入 npm --version 或 node -v 查看版本，有顯示版本號代表成功

1
2
3
4
5
# 11.5.1 或更高
npm --version

# v22.13.1 或更高
node -v

首頁看起來像這樣👇
node.js

Git :

根據作業系統下載最新版本，但注意 這次不能無腦按下一步 ，不知道怎麼下載的可以去 YT 看 印度阿三的影片，下載完可在 terminal 裡輸入 git --version 查看版本

1
2
# 2.46.0.windows.1 或更高
git --version

首頁看起來像這樣👇
git

Github :

創建一個 Repo，名稱取 <your-github-username>.github.io

範例

walnut8569.github.io

現在前置作業已經做完了，應該不會有人看到這已經想放棄了吧，接下來要進到重頭戲了

第二步 : Hexo 環境建置

首先，先進入你打算安裝 blog 的資料夾，並打開 terminal，接著就是一連串指令

提示

#後面接的東西是註解，可以不用複製

1
2
3
4
5
6
7
8
# 安裝 Hexo CLI
npm install hexo-cli -g

# 初始化 Hexo
hexo init

# 安裝 Hexo 所需的相依套件
npm install

一切都完成後可在 terminal 裡輸入 hexo v 查看版本

1
2
# 檢查 hexo 是否安裝成功
hexo v

第三步 : 開始編輯 blog

首先先去 Hexo theme 找自己喜歡的主題

找到了以後就是開始看 Hexo Docs 和 各個 theme 的 Docs 調設定，這部分不難，就是有億點耗時間
這裡就用 Redefine 來做示範，絕對不是我偷懶，其中有幾個指令可以記一下 :

1
2
3
4
5
6
7
8
9
10
11
# 清除快取
hexo clean

# 生成靜態網頁
hexo g

# 部署網站到雲端
hexo d

# 部署網站到本地
hexo s

提示 1

不同的 theme 操作的指令會不一樣，所以請看各個 theme 的 Docs 進行操作 很重要 👉👈

提示 2

在撰寫文章或修改內容時，可以先透過 hexo s 在本地啟動伺服器 ( 預設網址為 http://localhost:4000 )
且啟動伺服器時不需要額外執行 hexo g，只需按下 F5 重新整理瀏覽器就能看到當下寫完的樣子

第四步 : 把網頁部署到 Github Pages

首先要先到 _config.yml 裡最下方的 deploy 輸入你的 Github 帳號和 Repo

1
2
3
4
deploy:  
  type: git  
  repo: https://github.com/<your-github-username>/<your-github-username>.github.io
  branch: main

接著再兩串指令輕鬆上傳

1
2
3
4
5
# 生成靜態網頁
hexo g

# 部署網站到雲端
hexo d

非常的簡單，你學會了嗎 OwOb
有問題歡迎私我 IG

On this page
教你如何架設個人 blog
  1. 如何使用 Hexo + GitHub Pages 架設個人 blog
  2. 什麼是 Hexo？
  3. 第一步 : 前置作業
  4. 第二步 : Hexo 環境建置
  5. 第三步 : 開始編輯 blog
  6. 第四步 : 把網頁部署到 Github Pages