使用 Hexo 搭配 Claudia 架設 blog 教學與心得

$cover

前言

這是我在準備成大乙組特選上機考的前三天睡覺睡不著心血來潮架的，其實本來是想要自己寫一個 blog 的但~~真的沒時間~~，在架設的過程中有遇到一些問題（甚至我到現在還不知道原因），在爬了網路上各種教學後我決定寫這篇文章來統整一下資訊與心得。

然後由於我是 Windows 用戶，所以這篇文章就只提供 Win 系統的載法，只後如果有空的話會再更新 Linux 或其他系統的（但其實都大同小異就是了）。

先說說我在使用的時候遇到的問題：

程式碼沒辦法正常高亮
不支援 LaTex 表達式
圖片無法支援絕對路徑 source/（尚未釐清原因）

這些問題的解法等等會再一併提到，那我們就開始吧！

前置要求

在安裝 Hexo 之前有一些前置的工具要安裝。

Node.js

主要提供 npm 來安裝其他所需要的套件，可以到 node.js 下載，直接載 LTS 的就行了。

Git

主要用來將檔案部屬到 Github 上，或是將 repo clone 下來，可以到 git 下載。

開始安裝

安裝 Hexo

開啟 CLI 介面，並輸入以下指令來安裝 Hexo

npm install -g hexo-cli
npm install hexo

安裝完後可以打打看 Hexo 指令，例如：hexo -v 來確認是否安裝完成。

初始化 Hexo

先到你要存放 blog 的路徑，例如：D:\Github 然後輸入

hexo init <folder>
cd <folder>
npm install

這裡的 <folder> 就是你要存放 blog 的資料夾。
成功後資料夾裡面應該會出現這些檔案

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

設定

`_config.yml`

用來設定網站的各個細項，像是

# Site
title: Youtong's Blog   # 網站標題
subtitle:               # 子標題
description:            # 描述
keywords:               # 關鍵字
author: Youtong         # 使用者
language: en # or zh-CN # 語言選擇（Claudia 僅支援英語或簡中）
timezone:               # 時區

詳情可以參考官網（文章最下面附有連結）。

`source`

用來存放網站內容的資料夾，除了 _post 以外任何 _ 開頭的檔案 / 資料夾都會被忽略。

`themes`

用來儲存各個不同主題的資料夾，等等 Claudia 就是裝在裡面。

安裝 Claudia 依賴套件

在安裝 Claudia 之前要先安裝其依賴套件，要注意是到根目錄（例如 github\blog 而非 github\blog\themes）底下輸入指令

npm install hexo-renderer-pug 
npm install hexo-renderer-dartsass
npm install hexo-generator-search

# if you need RSS, you must be install this plugin
npm install hexo-generator-feed
# Flowchat
npm install hexo-filter-flowchart        
# Math
npm install hexo-renderer-mathjax

安裝 Claudia

到 themes 資料夾，然後輸入

git clone https://github.com/Haojen/hexo-theme-Claudia.git
cd hexo-theme-Claudia
npm install

設定 Theme & Github Page 部屬

回到剛剛根目錄的 _config.yml 並修改成以下內容

theme: hexo-theme-Claudia

如果要 deploy 到 Github Page 的話要再改這些東西

deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master

Claudia 設定

接著可以到 themes\hexo-theme-Claudia\_config.yml 修改主題的設定，要小心不要跟最外層的 _config.yml 搞混了。

回到一開始的問題

程式碼沒辦法正常高亮
不支援 LaTex 表達式
圖片無法支援絕對路徑 source/（尚未釐清原因）

1. 程式碼沒辦法正常高亮

其實只要修改最外層的 _config.yml 就好

highlight:
  enable: false      
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: false
  hljs: true

這邊的重點是 enable 一定要 false，其他設定的話可以自己調。
詳細可以參考官網（文章最下面附有連結）

2. 不支援 LaTex 表達式

想讓 Hexo 支援 LaTex 的話需要安裝其他的套件，首先我們要把 hexo-renderer-marked 刪掉並安裝 hexo-renderer-pandoc hexo-filter-mathjax，在安裝 hexo-renderer-pandoc 之前還要先安裝 pandoc ，可以到 pandoc 選擇對應的規格安裝，我自己是直接用 chocolatey，如果你有的話也可以直接安裝。

choco install pandoc

安裝完 pandoc 後就可以

npm uninstall hexo-renderer-marked
npm install hexo-renderer-pandoc hexo-filter-mathjax

接下來到根目錄的 _config.yml 新增設定

pandoc:
  extra:
    - no-highlight:
  extensions:
    - +abbreviations
    - +autolink_bare_uris
    - +emoji
    - +hard_line_breaks
    - -implicit_figures
    - +mark
    - +short_subsuperscripts

mathjax:
  tags: none # or 'ams' or 'all'
  single_dollars: true # enable single dollar signs as in-line math delimiters
  cjk_width: 0.9 # relative CJK char width
  normal_width: 0.6 # relative normal (monospace) width
  append_css: true # add CSS to pages rendered by MathJax
  every_page: true # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter
  extension_options:
    {}
    # you can put your extension options here
    # see http://docs.mathjax.org/en/latest/options/input/tex.html#tex-extension-options for more detail

3. 圖片無法支援絕對路徑 `source/`

一般來講我們要在文章裡插入圖片可以直接

![](path)

接著便會 direct 到 https://example.com/path，但我在使用的時候卻會變成 https://example.com/article/path？翻閱了很多文章後有看到有些人說是根目錄的 _config.yml 的 post_asset_folder 沒設定好，但我在更改設定後依然沒能解決問題，於是我就直接使用完整的 url。

![](https://example.com/path)

這樣就解決問題了，雖然還是不知道原因…
但這麼做有個問題就是 localhost 如果是第一次 deploy 或是路徑有變的話會抓不到圖片。

如何部署

講了那麼多終於要講如何部署了

生成靜態檔

npx hexo generate
# or
npx hexo g

清除暫存和靜態檔

npx hexo clean

部屬到本地

npx hexo server
# or
npx hexo s

部屬到 Github

npx hexo deploy
# or
npx hexo d

基本上部屬的時候就是 clean, generate, deploy 三件套，但也不用一直 clean，如果有更改 _config.yml 或是安裝新的套件時再用就好（雖然我自己是以防萬一會 clean 一次）。

心得

自己使用下來覺得蠻不錯的，尤其主題本身很戳我愛好，可以插入圖片的功能也是畫龍點睛，之後應該會把各個心得文、筆記、雜記之類的放到這裡，還有我在 HackMD 跟 Obsidian 上面的筆記也會搬過來。

參考：

Youtong's blog