Hexo

Hexo 是一個快速、簡單且強大的網誌框架。Hexo 使用 Markdown(或其他渲染引擎)解析您的文章,並在幾秒鐘內,透過漂亮的主題產生靜態檔案。

Setup

1
2
3
4
5
6
# Install Hexo (Require: Node.js and GIT)
npm install -g hexo-cli

# Initial
hexo init gclin.github.io
cd gclin.github.io

跑完上面的指令,會產生一個像下列這個結構的目錄

  • _config.yml是整個網站的設定檔
  • source裡的檔案或目錄,除了_開頭的外,會直接被複製到public目錄。其中會有幾個特殊的目錄_posts, _drafts, …,是用來放要被渲染的文章。
  • themes是放網站主題的地方
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
gclin.github.io
├── _config.yml
├── node_modules
│   ├── JSONStream
│   ├── .....
│   └── yargs
├── package-lock.json
├── package.json
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   └── _posts
└── themes
└── landscape

Preview

Hexo有提供在本機啟動一個網頁伺服器的功能,可以預覽文章渲染後的結果。

1
2
3
4
5
# Launch preview server
hexo s

# Or launch preview server(include draft)
hexo s --draft

Writing

透過hexo new的指令建立Post或Page,這個指令只會產生檔案在對應的目錄,並顯示其路徑,所以可以用自己習慣的工具來撰寫內容。若文章被建立為draft則不會被發佈,甚至連預覽都看不到,必需要透過hexo publish發佈後才會被顯示,在這之前想在預覽時就看到draft的文章,可以使用hexo s --draft來啟預覽。

1
2
3
4
5
# To create a new post or a new page
hexo new [layout] <title>

# Use the publish command to move drafts
hexo publish [layout] <title>

Theme

網路上有很多主題可以下載,只要把主是放到themes底下,然後改一下相關設定,就可以得到一個完全不一樣的網站。

1
2
3
4
5
6
7
8
# Install theme NexT
git clone https://github.com/iissnan/hexo-theme-next themes/next

# 修改網站設定檔案 (_config.yml)
theme: next

# 修改主題設定檔 (themes/next/_config.yml)
scheme: Mist

Deploy

Hexo只是用來產生一個靜態網站的工具,還是要找到一個地方來放這個網站,所以Hexo有提供指令,可以快速的發佈內容到指定的地方,我的網站是放在GitHub Pages,下面是Commit到GitHub的例子。

1
2
3
4
5
6
7
# 編輯_config.yml
deploy:
type: git
repo: git@github.com:gclin/gclin.github.io.git

# Generate and deploy
hexo deploy -g

CNAME

最後如果是Deploy到GitHub Pages,而且有設定CNAME的話,若沒設定好CNAME會一直被蓋掉,可以使用hexo-generator-cname這個套件來產生CNAME

1
2
3
4
5
# Generate CNAME for github pages
npm install hexo-generator-cname --save

# 修改_config.yml
url: http://blog.gclin.org