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