hexo 起步

install

1
2
3
sudo pacman -S nodejs-lts-fermium git
sudo npm install -g hexo-cli
# if already installed, use `npm -g outdated` to check if updatable

init

init 時可以看到它用 git 去抓預設的 starter, 跟 gatsby 一樣.
這也是為什麼需要 git

1
2
3
4
5
6
mkdir blog && cd $_
hexo init --no-install # 需要資料夾是空的, 所以不能先做 git 設定
# 設定 git 相關步驟
npm install

INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git

抓下來的同時, 也會依據 package.json 裡面的相依自動安裝套件,
可以看到除了 hexo 之外的相依套件如下:

1
2
3
4
5
6
7
8
9
"hexo-generator-archive": "^1.0.0",
"hexo-generator-category": "^1.0.0",
"hexo-generator-index": "^2.0.0",
"hexo-generator-tag": "^1.0.0",
"hexo-renderer-ejs": "^1.0.0",
"hexo-renderer-marked": "^4.0.0",
"hexo-renderer-stylus": "^2.0.0",
"hexo-server": "^2.0.0",
"hexo-theme-landscape": "^0.0.3"

new

hex new 用來建立新文章

1
2
3
4
5
6
7
8
9
10
11
12
13
Usage: hexo new [layout] <title>

Description:
Create a new post.

Arguments:
layout Post layout. Use post, page, draft or whatever you want.
title Post title. Wrap it with quotations to escape.

Options:
-p, --path Post path. Customize the path of the post.
-r, --replace Replace the current post if existed.
-s, --slug Post slug. Customize the URL of the post.
  • layout 是 source 底下目錄名稱, 預設為 post, 會在 _posts 底下新增.
    • 不同的 layout 預設的模板在 scaffolds 底下
  • title 是文章標題 (front matter), 也會用來讓 slug 來產生 md 檔名
  • -p, 指定相對於 layout 底下的檔名, 例如 -p 2021/hello.md

因為取檔名實在很麻煩, 所以我決定用時間來當檔名, 在 package.json 增加底下 script,
以方便我用 vscode 點擊操作 npm scripts.

1
2
"post": "hexo new -p $(date +%Y)/$(date +%m%d%H%M).md $(date +%m%d%H%M)"
"work": "hexo new -p $(date +%Y)/w$(date +%m%d%H%M).md $(date +%m%d%H%M)"

generate

hexo g 用來產生 public 底下的 HTML 檔案

server

hexo s 跑 web server

config

根據喜好修改 _config.yml 此檔案為全局 blog 設定

1
2
3
4
5
6
7
8
9
10
11
12
title: Jay's B!og
subtitle: I am free and that's why I am lost.
author: Jay Chang
language:
- zh-tw
- en
timezone: 'Asia/Bangkok'
url: https://changsijay.com/
permalink: :title/
skip_render:
- _posts/**/*w.md # work related posts, don't public
relative_link: true