Hexo with GitHub Page - 建立屬於自己的部落格

你是否想過分享自己寫完的筆記或是文章嗎?但又不想做一些很麻煩的事情來實踐這個想法
那麼透過 Hexo 來建立屬於自己的部落格會是你一個好選擇！

什麼是 Hexo

Hexo 是一款基於 Node.js 的網誌框架,它不僅能夠快速、簡單的建立屬於自己風格的部落格，還能使用 Markdown 的語法來撰寫文章，甚至能在幾秒鐘的時間就將自己的部落格部署到免費的雲端服務上(Heroku、GitHub Page)。

Hexo 擁有豐富的開源生態，因此有許多功能插件或是主題可以使用，這也是為什麼 Hexo 這麼多人使用的原因之一。

使用 Hexo 的優點

使用 Markdown 語法撰寫文，上手難度相較簡單
可搭配線上 CICD 工具快速部署於各種免費雲端服務上，不需額外花費金錢成本
中文文件資源多
開源社群活躍
基於 Node.js 擁有豐富的功能插件
擁有許多模板，能快速切換自己喜歡的樣式

Hexo 的初始化安裝

安裝前請先檢查電腦上有以下兩個環境

Git
Node.js

如果上面兩個都安裝完畢了，只要cmd內輸入下面這行即可以安裝好 Hexo

1	npm install -g hexo-cli

如果都還沒安裝可依照以下的網址或步驟下載

安裝 Git

Windows
下載並安裝 Git

Mac

下載 Homebrew

1	/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

下載 Git
1
brew install git

Linux(Ubuntu)
1
sudo apt-get install git-core

安裝 Node.js

官網下載
Mac
1
brew install node

建立初始化的 Hexo Blog

首先在你要放 Blog 專案的資料夾下輸入

1	hexo init [filename]

接著利用 npm 安裝相關 Hexo 套件

1	npm install

這時已經完成本地端伺服器的架設了
利用以下指令即可在 http://localhost:4000 開啟 server

1
2
3

hexo server
// or
hexo s

Hexo 檔案介紹

.
├── _config.landscape.yml // 初始化 themes 的配置檔 (可刪除)
├── _config.yml           // Blog 的配置檔
├── node_modules          
├── package-lock.json
├── package.json          // Node 的依賴套件
├── scaffolds             // 文章格式
├── source                // 各種外部資源(Ex: 圖片、文章md檔)
└── themes                // Blog 的模板

scaffolds

當建立新文章時，Hexo 會根據 scaffold 資料夾內相對應的檔案來建立檔案
Ex: 文章格式 (scaffolds/post.md)

會產生出符合預設規範的文章

產生新文章語法

1	hexo new post1

source

source 資料夾是放置內容的地方。所有的檔案或是資料夾通常都會在這邊，開頭會加上 _(底線) 來命名，讓這些資料夾或是檔案也成為隱藏檔案而被忽略，除了 _posts 資料夾以外。Markdown 和 HTML 檔案會被發布並存放到 public 資料夾，而其他檔案沒有以底線命名的就會被拷貝過去。

themes

themes 資料夾是放置所有 Hexo 的樣式，只要把喜歡的樣式放入此資料夾，再調整 _config.yml 後,就可以設定成該樣式。

_config.yml

_config.yml 是整個 Hexo 的配置檔，網站的各種配置設定都在這邊，Ex：網頁標題、網站描述、網站的網址、路徑等等
更多詳細設定內容

如何更換 Hexo 的樣式

這邊以 Next 的樣式為例
更多樣式

首先先移動到 themes 的資料夾內, 並輸入以下語法

1	git clone https://github.com/theme-next/hexo-theme-next next

接者把 _config.yml 內的 theme 資訊修改為 next

1	theme: next

再重新啟動一次server就可以看到樣式變更了哦

Github Page 部署

為了讓自己設計好的Blog可以在網路上被查詢到，雖然有很多方法都可以達到這個需求，但今天要教學是既簡單又暴力,重點還是一個免費的方法，那就是利用GitHub Page的方式。

首先先在 GitHub 建立名為username.github.io的公開 Repository
username : 自己 GitHub 的名稱

接著是在 _config.yml 設定要部署到這個 Repository中
Hexo 文件

# Deployment
deploy:
  type: git
  repository: "repository 的 github 網址"
  branch: master # 哪個分支上

再來就是將自己設計好的Hexo專案部署到 GitHub Page 上

// step1. clean - 清除舊的網頁靜態檔
hexo clean

// step2. generate - 產生新的網頁靜態檔
hexo generate

// step3. deploy - 部署
hexo deploy

最後就是等待 GitHub 部署完成囉～這個可能要等待一段時間才會完成

結語

那這篇文章是想要紀錄自己踩坑 Hexo 的過程，其實還有很多東西沒有提到，像是其他額外插件功能之類的，那這部分就要請讀者自行去研究囉～

最後由於第一次寫文章，有寫不好的地方再請大家見諒。