使用 Hexo + GitHub Pages 架設 Blog

前置作業

安裝Node.js®

請先至 Node.js® 官網 下載並安裝

安裝後,開啟 CLI介面 並輸入

1
node -v && npm -v

檢查是否出現版本號,確認是否安裝成功

安裝Hexo

輸入指令,安裝Hexo

1
npm install hexo-cli g

安裝後,可輸入 hexo versionhexo -v 查看 Hexo 版本,確認是否有安裝成功


建置Hexo環境

初始化Hexo

使用cd指令切換路徑

1
2
3
4
cd <資料夾名稱 or 資料夾路徑>	#切換路徑

例如:
cd C:\Users\<使用者名稱>\Desktop #將路徑切換至桌面
1
2
3
4
hexo init <資料夾名稱>		# 初始化 Hexo

例如:
hexo init my-blog

在資料夾安裝所需檔案

1
npm install	# 安裝所需的npm套件
1
npm install hexo-deployer-git –save	# 安裝Git部署所需套件


常用指令

clean

1
hexo n [layout] <title>		#新增文章

如果沒有輸入 layout,則會使用 _config.yml 中的 default_layout
如果標題有包含空格,需使用引號括住,例如:”Hello World”
接著可直接到 /source/_posts/title.md 中使用 Markdown 語法編輯內容
檔案名稱盡量以英文命名,避免出現亂碼

1
hexo cl		#清除靜態檔案與快取

每次儲存修正後的檔案之前,會建議先輸入此指令,清除快取檔案和已產生的靜態檔案

generate

1
hexo g		#產生靜態檔案

靜態檔案為預設名稱為(public)的資料夾內之檔案。

server

1
hexo s		#啟動伺服器

在本地端啟動 Hexo 伺服器,預設路徑為 : http://localhost:4000/
可在自己瀏覽器上預覽設定結果,按 Ctrl + C 即可關閉。

deploy

1
hexo d		#部署至Github

第一次部署可能會要求登入 GitHub 帳號:


Hexo 與 Github 建立連接

建立 Github Repositories

點選 New 新增一個 Repository

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

修改 _cofig.yml 的 deploy 設定值

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

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

輸入指令上傳檔案

1
hexo cl && hexo g -d

這樣就完成部署到 GitHub 了!可在瀏覽器上輸入 https://username.github.io 確認是否有發布成功