本來一直不是很想用 Hexo,因為覺得很多人使用,所以有使用另一種 Hugo 來架設 Blog,但是用完一直覺得不合口味,原本打算就將就著用。

剛好看到 Hexo 最多人使用的主題 - Next,感覺還不錯,真香,就來裝裝看吧!

前置作業


安裝需求

需要安裝:

  • Node.js
  • Git

以下方式為 Mac 使用者方法,其他作業系統請詳閱官網

  1. 安裝 Xcode

首先到 App Store 安裝 Xcode,安裝完成後,
開啟它並前往 Preferences -> Download -> Command Line Tools -> Install 安裝命令列工具。

  1. 安裝 node.js

使用 NVM,或是直接用 HomeBrew 安裝:

1
$ brew install node
  1. 安裝 Hexo:
1
$ npm install -g hexo-cli
  1. 完成後可以輸入指令,看看有無安裝成功,成功的話會顯示版本:
1
$ hexo version

我的版本是:

hexo: 4.2.0
hexo-cli: 3.1.0

建立專案


在指定資料夾建立檔案:

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

完成後會建立以下資料:

更改主題與其他設定


主題選用的是 Next,更改步驟如下:

  1. 把 next 這個主題 clone 下來:
1
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
  1. 找到 /_config.yml,打開修改:
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next // 改為 next
  1. 網站設定:
1
2
3
4
5
6
7
8
# Site
title: 標題
subtitle: 副標題
description: 網站描述
keywords: 網站關鍵字
author: 作者名
language: zh-TW
timezone: 時區

其他一些細部設定就可以自己慢慢摸索。

如果要先看看網站的樣式,可以啟動本地端的 server:

1
$ hexo server

寫作


接下來,大概設定完就可以開始建立文章了。

指令是:

1
$ hexo new [layout] <title>

Layout 有 3 種,分別是:post、page(頁面)、draft(草稿),

假設要發一篇檔名為 Hello-World 草稿的話:hexo new draft Hello-World

如果要將 draft 發布為 post 的話,就鍵入:

1
$ hexo publish [layout] <title>

把網站部署到 GitHub


既然都做的差不多了,就可以開始把網站部署到 GitHub Pages。

  1. 新增名為 <username>.github.io 的 repo,例如:bucky0112.github.io

  2. 安裝 hexo-deployer-git 這個插件:

1
$ npm install hexo-deployer-git --save
  1. 修改 /_config.yml:
1
2
3
4
5
6
7
url: https://username.github.io
root: /repo.github.io/

deploy:
type: git
repo: <repository url> #新增repo的網址
branch: master
  1. 上傳網站,執行:
1
$ hexo deploy
  1. 接著需要等待一些時間,讓子彈飛一會,就可以去你的網站看看成果了。
1
https://username.github.io/repo.github.io

Hexo 常用指令


以下是之後再使用 Hexo 發佈文章時常用的指令:

1
2
3
4
5
$ hexo generate      #產生靜態檔案 / hexo g
$ hexo deploy #部署網站
$ hexo server #啟動本地端伺服器 / hexo s
$ hexo new <post> #新增文章
$ hexo clean #清除快取檔案和已產生的靜態檔案