使用 Hexo 在 GitHub Pages 上建立 Blog

前言

最近想開始把一些學習的筆記記錄下來，但又覺得筆記分散在各個資料夾裡不容易整理，瀏覽起來也不方便，因此興起了寫網誌的念頭。本來想直接用現成的 Google Blogger 來紀錄，但覺得在網頁上進行編輯與排版實在是有點麻煩，就開始尋找一個可以將 markdown 文件轉成 html 並幫我把版面全部搞定的方案，這樣我就只要專心紀錄內容就好，不需要去煩惱排版之類的問題。

搜尋了相關資料後，發現 GitHub 提供一個免費的空間讓使用者建立網頁，而且透過 Hexo 可以快速的使用別人設計好的網頁樣板，於是開始嘗試安裝 Hexo 並把 Blog 放在 GitHub 上。

事前準備

1. 一個 GitHub 帳號
2. 先 Google 搜尋一下 Hexo Theme，確定有喜歡的 open source 樣板，再開始安裝

安裝

1. 安裝 nodejs

   ​​​​sudo apt-get update
   ​​​​sudo apt-get install nodejs
   

2. 安裝 npm

   ​​​​sudo apt-get install npm
   

3. 安裝 Hexo

   ​​​​sudo npm install -g hexo-cli
   

4. 安裝 hexo-deployer-git

   ​​​​sudo npm install hexo-deployer-git --save
   

建立網誌

1. 建立 Hexo 工作空間，其中 HEXO_FOLDER 為資料夾的名稱

   ​​​​hexo init HEXO_FOLDER
   

   執行後，會自動生成資料夾和一些預設的檔案

2. 進入 Hexo 工作空間，啟動 Hexo server

   ​​​​cd HEXO_FOLDER
   ​​​​hexo server # or hexo s
   

   使用瀏覽器開啟 http://localhost:4000 ，確認 Hexo 是否順利安裝

連接 GitHub，並發布網頁

1. 在 GitHub 上建立一個名為 USERNAME.github.io 的 repository，其中 USERNAME 為 GitHub 的帳號名稱

2. 開啟 Hexo 工作空間資料夾中的 _config.yml，將 Hexo 與 GitHub repository 連接

   ​​​​# Deployment
   ​​​​## Docs: https://hexo.io/docs/deployment.html
   ​​​​deploy:
   ​​​​type: git
   ​​​​repo: [e-mail]:USERNAME/USERNAME.github.io.git
   ​​​​branch: master
   ​​​​message: 'Updated:{{now("YYYY-MM-DD HH:mm:ss")}}'
   

3. 將網頁發布至 GitHub

   ​​​​cd HEXO_FOLDER
   ​​​​hexo clean
   ​​​​hexo generate # or hexo g
   ​​​​hexo deploy # or hexo d
   ​​​​# generate and deploy in one line: hexo d --g
   

   發布後，使用瀏覽器開啟 http://USERNAME.github.io 即可看到網頁內容

4. 網誌內容更新：

   • 更新並啟動 server: hexo s --g
   • 更新並發布至 GitHub: hexo d --g

使用其他主題

1. 複製想要的 Hexo Theme 到 Hexo 工作目錄下的 theme 資料夾

   ​​​​cd HEXO_FOLDER/theme
   ​​​​git clone https://github.com/FAVORITE/THEMENAME.git
   

2. 開啟 Hexo 工作空間資料夾中的 _config.yml，將 theme 設定為 clone 下來的資料夾名稱

   ​​​​# Extensions
   ​​​​## Plugins: https://hexo.io/plugins/
   ​​​​## Themes: https://hexo.io/themes/
   ​​​​## theme: landscape
   ​​​​theme: THEMENAME
   

3. 更新並啟動 server，確認是否成功

   ​​​​hexo s --g
   

---

參考資料

• Ubuntu平台下通过Hexo在Github上搭建博客教程(一)
• Ubuntu平台下通过Hexo在Github上搭建博客教程(二)
• 在Ubuntu系统下用Github和Hexo建立自己的博客