Hexo + Github Pages 部落格架站初體驗│鼠年全馬鐵人挑戰 #08

CHEN
6 min readMar 22, 2020

--

因為報名參加六角舉辦的鼠年鐵人賽寫文馬拉松活動,每個禮拜都會在 Medium 上更新文章。後來看到許多參賽者都是自己架一個部落格寫技術文,也讓我躍躍欲試!所以我就開始摸索 HEXO 部落格架站!!

所以我也把摸索 HEXO 以及 Github pages 的學習心得記錄下來!

進入正題!!!

安裝 HEXO 部落格之前電腦需要有兩個重要工具!

  • git
  • Node.js (Node.js 版本需不低於8.10,建議使用 Node.js 10.0 及以上版本)

安裝 Hexo 指令

npm install -g hexo-cli

開一個 Hexo 資料夾

hexo init xxx

( 這邊的 xxx 代表你要用的部落格資料夾名稱 )

查看資料夾

cd xxx ( 移到那個資料夾 )
dir ( 看資料夾內容 )

生成 Hexo 產生靜態檔案

hexo g

打開 Hexo Server

hexo s

新增文章

hexo new "wowow"

( wowow 代表文章標題 )

然後你就可以直接到 資料夾/source /_posts /文章標題.md 中的檔案做文章編輯。

編輯文章之後想要本地端瀏覽,要記得再啟動 hexo g 以及打開 hexo Server

編輯文章之後想要上傳到網站,要記得 要記得再啟動 hexo g 以及部屬 hexo d

新增草稿

hexo new draft "wowow"
( wowow 代表文章標題 )

生成頁面

hexo new page "page title"

怎麼換 HEXO 主題?

由於 HEXO 官方搭配的 landscape 主題我不是很喜歡,所以決定換一個順眼的!

HEXO 提供多款主題,最多人使用的部落格主題是 NexT 大家可以選擇喜歡的下載來用喔!

附上主題官網

我自己用的主題是 icarus 這款,所以下面的範例也會套用 icarus 主題來跟大家做分享。

要換主題其實非常簡單,在終端機複製貼上這行

git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

下載好主題後,一定要回到部落格資料夾的 _config.yml 這個檔案修改主題名稱,把 theme: landscape 改成 theme: icarus

ps.這裡的 _config.yml 檔案指的是部落格資料夾當中的,並非主題資料夾當中的 _config.yml

然後,hexo s 打開 server 在本地端查看。

但是我在這個流程跑出錯誤訊息,爬文後發現 icarus 這款主題好像蠻多人有這個問題的。

ERROR Package cheerio is not installed.
ERROR Please install the missing dependencies from the root directory of your Hexo site.

解決方式就是 npm i cheerio -S

安裝後就可以再一次 hexo ghexo s

在本地端就可以看到美麗的主題畫面囉~

HEXO 如何部屬到 Github pages?

HEXO 資料夾設定好之後,當然希望它能正式上線,這樣才是真正的部落格!你可以透過部屬到 Github pages 上擁有超潮 github.io 域名(XDDD),當然也可以省下買域名的錢,對我這個小資族來說 CP 值超高 !

將 HEXO 部屬到 Github 上要先開一個 repository

沒有 Github 帳號的可以先註冊一個,流程很快的。

附上 Github 註冊網址

以下是我不專業的分享,有誤敬請見諒!

接下來就趕緊進入部屬 HEXO 到 Github 上的步驟吧!

STEP 1. Ceate a new repository

STEP 2. 到 HEXO 網站的資料夾安裝一個插件

npm install hexo-deployer-git --save

STEP 3. 到 _config.yml 檔案的 Deployment 部屬

ps. 這邊的 _config.yml 檔案不是主題資料夾中的 _config.yml 檔案,要用 HEXO 本身的 _config.yml 檔案

deploy:
type: git
repo: https://github.com/xxxxx/xxxxx.github.io.git
branch: master

type → 你部屬 HEXO 的模式
repo → 貼上你的 GitHub repository 連結
branch → 填上你的分支 (預設是 master)

STEP 4. 生成靜態檔案

hexo g

STEP 5. 部屬到 Github 上

hexo d

題外話,我在部屬到 Github 的過程中發生很多狀況 ( 我太菜逼八了… )。有出現整個 github pages 頁面空白、CSS 版型跑掉的狀況。

後來瘋狂爬文以及重新上傳十幾次才成功…

Photo by Christopher Gower on Unsplash

爬文後發現問題出在一開始的 repository name 上,原來要跟 owner 名字一樣,最終換成一樣的名字才部屬成功。

然後我自己用的主題 icarus 也在安裝過程出現錯誤,後來爬文後也補安裝npm i cheerio -S 才成功。

希望這篇不專業的 HEXO 部屬到 Github 上的分享,可以幫助到跟我一樣在安裝過程困擾的人。(應該沒有人跟我一樣錯這麼瞎的問題才對 XDDDD)

最後,分享我剛建立的部落格網站,目前網站的設定還在摸索中,之後也會不定期在上面更新文章 XDDD

hexo
https://kaychen1994.github.io/

--

--

CHEN
CHEN

Responses (1)