Hexo 是什麼?

Hexo 是一個快速、簡單且強大的部落格框架。能夠使用 Markdown 語法來新增文章,快速渲染你的文章,有強大的外掛系統及豐富的擴充性,簡單易用,讓你可以專注與寫作中,不被複雜的操作影響寫作的體驗,對於習慣使用 Markdown 紀錄內容的人可說是一大福音,可以套用主題讓你的網頁變得更加漂亮,重點來了!Hexo 是由台灣人製作的,官方文件都有中文語系的支援,更能降低入門的門檻。

事前準備

在開始之前,記得在電腦安裝好 Node.js 以及 Git

Hexo 環境建置

Step 1. 登陸 Github 帳號並新增一個 repository ,”Repository name” 命名規則為 “用戶名”+”.github.io”。

Step 2. 到桌面任意空白處點擊滑鼠右鍵,選擇 “Git Bash Here” 打開。

Step 3. 進到視窗畫面後依序輸入以下3行指令來獲取密鑰文件。

$ git config --global user.name "github 用戶名"
$ git config --global user.email "github 註冊信箱"
$ ssh-keygen -t rsa -C "github 註冊信箱"


此次行指令會詢問一些細項,直接按 enter 即可。

Step 4. 進到剛剛產生的密鑰位置,預設位置為”C:\Users\用戶名\.ssh”,找到 “id_rsa.pub” 並使用文字文件打開,將所有內容複製起來,待會使用。

Step 5. 回到 Github “Setting” 中的 “SSH and GPG keys”,新增一個 SSH keys,”Title” 名稱可以任取,”key” 就填入剛剛複製的密鑰。

Step 6. 可以打開命令提示字元,輸入 node –version 來確認 Node.js 使否有成功安裝。

Step 7. 新增一個資料夾來存取往後部落格的內容,名稱可以任取(本示範新增在ˋ桌面),接著打開新增的資料夾,在路徑上直接輸入 “CMD” ,來用當前路徑打開命令提示字元。

Step 8.  輸入以下指令安裝 Hexo,這部分可能會需要一些時間。

npm install -g hexo-cli

Step 9.  輸入以下指令初始化部落格,以及系統配置。

hexo init blog

新增文章並在本地運行

Step 10. 完成 blog 配置後,使用 cd 指令來切換路徑。

cd blog

Step 11. 新增一篇新文章,這裡取名為 “my_first_post”。

hexo new my_first_post

Step 12. 使用 hexo g 來生成靜態檔案。

g 為 generate之縮寫(用以產生靜態檔案)。

Step 13. 使用 hexo s 啟動本地伺服器,來預覽 Hexo 部落格,預設開的 port 為 4000,不過像是下圖,如果 Port 被占用,就無法正常運行。

s 為 server 的縮寫(用以開啟伺服器)。

如果 port 值被占用 可以使用以下指令來更換 port。

hexo server -p 5000

在瀏覽器輸入: localhost: “+開的 port 就可以看到我們建立好的 Hexo 部落格囉”。

佈署網頁到 Github

到了這裡都還只是在本地端電腦預覽生成的 Hexo 部落格,接下來要示範如何佈署網頁,讓各地都能看到你的網站。

Step 14. 這裡使用 VScode 來開啟整個 Hexo 的專案資料夾,可以看到以下檔案配置,找到 “_config.yml”(站點配置文件)並打開(也可使用文字文件),拖拉到底下可以發現 “deploy”,添加發布配置。

deploy:
  type: git
  repository: http://github.com/用戶名/用戶名.github.io.git
  branch: master

Step 15. 回到命令提示字元,依序輸入3行指令,來將網站上傳到 github 中。

  • 清除緩存文件( db.json)和已生成的靜態文件( public)。
hexo clean
hexo g
hexo d

Step 16. 等待一會兒,到瀏覽器中輸入 “用戶名”+”github.io”的網址,就可以看到成功發布的網站囉。