Hexo環境建置、指令紀錄

1. 安裝Hexo

先安裝Node.js
先安裝Git

下載完之後，可在cmd分別下node-v 、 git -v檢查

打開cmd，輸入下面指令

1	npm install hexo-cli -g

-g （Global Installation）全域安裝

下載完之後，可在cmd下hexo -v檢查

2. 初始化Hexo

直接輸入下面指令，會自動於所在目錄建立一個新資料夾以操作 Hexo。

1	hexo init <資料夾名稱>

也可以先建立好資料夾，再切換到該資料夾，同樣能進行初始化

1
cd <資料夾路徑>

3. Hexo檔案說明

確認路徑在專案資料夾中

1	npm install

完成後可看到以下檔案

_config.yml

有關網站配置的檔案，可修改各種配置設定。例如：網站標題、網站的網址、使用主題名稱等

scaffolds

當我們建立新文章時，Hexo 會根據 scaffolds 中的模板建立相對應的檔案
post、page 和 draft，分別對應：要發布的文章、頁面、草稿

post模板可修改為

如果有使用format，須注意會影響到markdown語法

excerpt: 要有預設值，不能為空

---
title: {{ title }}
date: {{ date }}
tags:
categories:
excerpt: ''
---

生成標籤和分類
可自訂首頁摘要

themes

用來存放主題的資料夾
Hexo 會根據主題來解析 scouce 資料夾中的檔案並產生靜態頁面。預設主題為 landscape

source

通常資料夾命名開頭會加上底線 _，例如 _imgs
以 _ 開頭的檔案、資料夾或隱藏檔案會被忽略，除了 _posts 資料夾以外
Markdown 檔和 HTML 檔會被解析，並放到 public 資料夾，而其他檔案則會被拷貝過去

source & public & .deploy_git

執行 hexo generate 之後，會將 scorce 文件夾中的 Markdown 檔和 HTML 檔進行解析，再結合主題進行渲染，生成靜態網站
執行 hexo deploy 之後，則會將 public 文件夾中的內容部署到 GitHub，並生成 .deploy_git 資料夾，因此內容與 public 幾乎相同
關係箭頭圖:

source -> public -> .deploy_git

4. 常用指令

post 新增文章

1	hexo new post "我的第一篇文章"

用途：用於創建文章（Post）。
生成位置：文章會被存放在 /source/_posts/ 資料夾中。

支援分類（Categories）和標籤（Tags）。
自動顯示在文章列表，並支持分頁和排序。

默認網址會是 /YYYY/MM/DD/文章名稱/

page 新增頁面

1	hexo new page "about"

用於創建頁面（Page）。
生成位置：頁面會被存放在 /source/ 資料夾的根目錄或自定義資料夾中。

不會出現在文章列表，通常用於靜態頁面（如關於頁、聯絡頁等）。
頁面可以手動添加到導航欄，作為獨立的功能頁面。

默認網址會是 /about/

差異對比

功能	hexo new post	hexo new page
用途	創建博客文章，支持分頁顯示	創建靜態頁面，如「關於我」
存放位置	/source/_posts/	/source/{頁面名稱}/index.md
出現在首頁	會自動顯示在文章列表中	不會顯示，需要手動添加到導航
支持分類/標籤	支持	不支持
網址格式	/YYYY/MM/DD/文章名稱/	/{頁面名稱}/

clean 清除靜態檔案與快取

1	hexo clean

generate 產生靜態檔案

1	hexo generate

server 啟動伺服器

1	hexo server

5. 部屬到GitHub

將專案名稱命名為 username.github.io，username 記得改成自己的帳號名稱

1. 安裝 Git 相關套件

回到 hexo 資料夾，在終端機輸入下列指令：

1	npm install hexo-deployer-git --save

2. 修改 _config.yml 檔案的 Deployment 設定

需注意這裡指的 _config.yml 檔案是根目錄的，而不是 themes 主題中的。

deploy:
  type: git
  repo: 
  branch:

type：選擇部屬模式，這裡填 git
repo：GitHub repository 的連結，記得將 username 修改成自己的帳號名稱
branch：選擇分支，預設為 master

3. 更新靜態頁面

修改完成後，執行以下程式

1
2
3

hexo cl    // 清除之前建立的靜態檔案
hexo g     // 建立靜態頁面
hexo d     // 部署至 GitHub

可合併第二、三行指令：hexo g -d 即可在產生靜態頁面後立刻部署。

4. 頁面怎麼沒有刷新?

如果你之前有部屬過了，再次deploy到github打開網頁，發現還是舊的畫面

請按下

ctrl + shift + r

因為google為了加快網頁載入速度，會自動快取js、css，需要刷新快取

※ 使用外部套件注意事項

如果跟我一樣想快速調整版面，引入BootStrap套件，需要注意會有跟主題衝突的風險，因此建議只引入必要性的套件

1	"https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap-utilities.min.css"

bootstrap-utilities.min.css 包含以下內容：

1. 間距工具（Margin & Padding）

類似 m-0, p-2, mt-3, mx-1 等。
支援方向（如 t, b, l, r, x, y）和數值（如 0, 1, 2, 等）。

2. 顯示工具（Display Utilities）

如 d-none, d-flex, d-inline 等，控制元素顯示方式。

3. 定位工具（Position Utilities）

如 position-relative, position-absolute 等。

4. 其他小工具類

如 text-center, text-start。
還有 overflow-auto, overflow-hidden。

p.s.

我自己就是遇到文章的(toc)目錄的滾動動畫有問題，才知道有這個問題，為此我還特別去找redefine全部有關 toc.js與scroll監聽事件都改了一遍，還是不起作用....，做到一半放棄了去吃飯，突然靈光一閃想到bootstrap，還真的被我找到問題了...