技術人的 Blog - Hexo

從前就想要寫 Blog ，使用過免費、自己架設…後來發現了 git 上面的 Hexo 框架，使用適合工程師的 Markdown 語法，而且可以將 Blog 直接託管在 Github 或是 Gitlab 上，相當的直覺，並且有多種 Hexo Theme 可以選用。這邊做Mac上簡單的安裝及介紹！

Quick Start

Hexo官方特別強調的幾點：

超級快速：Node.js 帶給你超級快的檔案產生速度，上百個檔案只需幾秒就能建立完成。
Markdown 支援：支援所有 GitHub Flavored Markdown 的功能，甚至能在 Hexo 使用大部份的 Octopress 外掛。
一鍵部署：你只需要一個指令就能把網站部署到 GitHub Pages, Heroku 或其他網站。
豐富的外掛：Hexo 有強大的外掛系統，你可安裝外掛讓 Hexo 支援 Jade, CoffeeScript。​‌‌​‌​​​​‌‌​​‌​‌​‌‌‌‌​​​​‌‌​‌‌‌‌

安裝

• 首先必須安裝 Node.js 與 Git

• 安裝 Hexo ，在 command line 上輸入

1

$ sudo npm install -g hexo-cli

初始化 Hexo

• 首先建立一個資料夾 blog

註：建立一個新的網站。如果沒有設定 folder 的話，Hexo 會在目前的資料夾建立網站。​‌‌​‌​​​​‌‌​​‌​‌​‌‌‌‌​​​​‌‌​‌‌‌‌

• 然後指到 blog 目錄下

1

$ cd /Users/morose/Documents/Temp/blog

• 初始化 blog 當作工作區

1

$ hexo init

• 產生靜態檔案

1

$ hexo generate

• 啟動伺服器，預設是 http://localhost:4000/

1

$ hexo server

​‌‌​‌​​​​‌‌​​‌​‌​‌‌‌‌​​​​‌‌​‌‌‌‌

• 驗證 http://localhost:4000/

Change Theme

這邊要教學如何套上自己喜歡的Theme，官方已經提供很多的Hexo Theme，歡迎大家找尋適合自己的Theme來做使用。

下載 Theme

• 首先至Hexo Theme挑選自己喜歡的Theme

註：此範例使用的Theme為Replica​‌‌​‌​​​​‌‌​​‌​‌​‌‌‌‌​​​​‌‌​‌‌‌‌

• 基本上每位Theme作者都會提供相關的使用教學

• 將Replica克隆一份到你的themes下

1

$ git clone https://github.com/sabrinaluo/hexo-theme-replica.git themes/replica

​‌‌​‌​​​​‌‌​​‌​‌​‌‌‌‌​​​​‌‌​‌‌‌‌

• 修改Blog/_config.yml

1

theme: replica

• 重新啟動hexo server

• 恭喜你Theme更換完畢​‌‌​‌​​​​‌‌​​‌​‌​‌‌‌‌​​​​‌‌​‌‌‌‌

部署 Gitlab Pages

GitLab Pages是一項功能，允許你直接從GitLab中的存儲庫發布靜態網站。
你可以將其用於個人或商業網站，例如投資組合，文件，宣言和業務演示。你還可以將任何許可歸因於你的內容。

準備

• gitlab 帳號

相關設定

• 設定.gitignore排除不需上傳的檔案

1
2
3
4
5
6
7

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

• 設定.gitlab-ci.yml用於自動部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Full project: https://gitlab.com/pages/hexo
image: node:6.10.0

pages:
  script:
  - npm install
  - ./node_modules/hexo/bin/hexo generate
  artifacts:
    paths:
    - public
  cache:
    paths:
      - node_modules
    key: project
  only:
  - master

• 修改_congig.yml配置

1
2
3
4

url: https://<<你的帳號>>.gitlab.io/xxxblogs/
root: /xxx.blogs
permalink: :year/:month/:day/:title/
permalink_defaults:

• 移除theme中的.git資料夾

1

rm -rf ./themes/replica/.git

註：.gitignore和.gitlab-ci.yml都是建立在Blog根目錄下。​‌‌​‌​​​​‌‌​​‌​‌​‌‌‌‌​​​​‌‌​‌‌‌‌

建立專案

• 登入gitlab並且建立xxxblogs專案

• push 專案

1
2
3
4
5
6

cd existing_folder
git init
git remote add origin https://gitlab.com/<<你的帳號>>/xxxblogs.git
git add .
git commit -m "Initial commit"
git push -u origin master

• 靜待幾分鐘網址列輸入https://<<你的帳號>>.gitlab.io/xxxblogs

​‌‌​‌​​​​‌‌​​‌​‌​‌‌‌‌​​​​‌‌​‌‌‌‌