因為報名參加六角舉辦的鼠年鐵人賽寫文馬拉松活動,每個禮拜都會在 Medium 上更新文章。後來看到許多參賽者都是自己架一個部落格寫技術文,也讓我躍躍欲試!所以我就開始摸索 HEXO 部落格架站!!
所以我也把摸索 HEXO 以及 Github pages 的學習心得記錄下來!
進入正題!!!
安裝 HEXO 部落格之前電腦需要有兩個重要工具!
安裝 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 g
、 hexo s
在本地端就可以看到美麗的主題畫面囉~
HEXO 如何部屬到 Github pages?
HEXO 資料夾設定好之後,當然希望它能正式上線,這樣才是真正的部落格!你可以透過部屬到 Github pages 上擁有超潮 github.io 域名(XDDD),當然也可以省下買域名的錢,對我這個小資族來說 CP 值超高 !
將 HEXO 部屬到 Github 上要先開一個 repository
沒有 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 版型跑掉的狀況。
後來瘋狂爬文以及重新上傳十幾次才成功…
爬文後發現問題出在一開始的 repository name 上,原來要跟 owner 名字一樣,最終換成一樣的名字才部屬成功。
然後我自己用的主題 icarus 也在安裝過程出現錯誤,後來爬文後也補安裝
npm i cheerio -S
才成功。
希望這篇不專業的 HEXO 部屬到 Github 上的分享,可以幫助到跟我一樣在安裝過程困擾的人。(應該沒有人跟我一樣錯這麼瞎的問題才對 XDDDD)
最後,分享我剛建立的部落格網站,目前網站的設定還在摸索中,之後也會不定期在上面更新文章 XDDD