這個部落格一直以來都是用Hexo進行代碼生成，並使用了even這個主題做為配置。然而在時間的摧殘下，使用Hexo的npm生態系開始出現問題。

首先是hexo-renderer-sass居然不支援node15了，而且眾多套件往往年久失修。

其次是也想要找時間重整一下寫技術筆記的習慣，就順勢轉換平台了。

如果已經看到這篇文章，應該就是我轉換完畢了XD。最近碩士論文寫完也比較有空來整理。

不過作為技術文章，還是寫一下我有做什麼更動。

Why hugo

Hugo 的首頁裏開宗明義寫著The world’s fastest framework for building websites，意味著他以高效能為豪。

事實上他在渲染靜態網頁的確很快，在比較各家靜態網頁產生器時，渲染速度是很重要的關鍵。而由golang寫成的hugo在這方面可是比node好上許多。

Installation

我使用的是macOS，但在不同的系統上安裝步驟應該大同小異。這邊使用brew直接安裝。

1

brew install hugo

然後建立新的blog，既然是第二代，就給他加個v2吧。

1
2

hugo new site blogv2
cd blogv2

佈景主題我沿用著hexo的even主題，在hugo上也有一份even的fork能使用。

1

git clone https://github.com/olOwOlo/hugo-theme-even.git theme/even

在使用even上少數要注意的就是他使用post而非官方預設的posts作為文章資料夾。以及第一次使用要記得copy一份config到blog的root。

1

cp theme/even/exampleSite/config.toml .

接著就是調整config.toml的內容使他跟原本的blog差不多。記得要看裡面的說明，我沒看到NOTE: Don't enable highlightInClientandchroma at the same time!這句話，不小心開了兩個，結果就是在render code的時候炸開了。

發布的部分就跟hexo大同小異，都是publish static page到github或是自己的server上，就不敘述。

Transform from hexo

我把比較多的內容放在從hexo轉移我過去的文章到現在的平台上做了什麼事情。

首先我砍了以前的一些沒意義文章（不重要），然後放上了我的CV，祈求找到一份好工作XD。

然後就是我拿掉了Hexo有在用的Disqus，反正沒什麼人會留言，真的要的話以後再設定吧。

技術上，我遇到的第一個問題就是：

原本Hexo能用的Block Quote完全不能用。

也就是說像是{% asset_img front.png title %}這種方式插入圖片的方式完全失效了。同理，{% blockquote %}等等用法也要全部調整一遍。

也就是說插入圖片的方式要改回markdown的方式或是html的圖片，也就是

1

![](image.png)

如果圖片要改大小也只能用

1

<img src="image.png" width="200">

話是這麼說，hugo在官網中有提到，Shortcodes跟hexo的Block Quote真的非常像，像是插入圖片能用這樣寫取代（實際使用要拿掉左括號的-，這是避免在這篇文章被渲染qq）

1

{{-< figure src="image.png" title="image" height="300">}}

甚至也能插入youtube影片

1

{{-< youtube Q2yMktQ6OUo >}}

在統合文章的時候也發現，在hexo裏居然可以用<shift+enter>的方式來進行換行（Line Breaks）。但是在hugo裏面就很愉快的被打臉了ＸＤ，因此在轉換的時候，過去的排版全部亂套了。hugo仍然要求換行用兩個空白鍵+Enter來換行，也就是產生一個<br>。

在網址內引用部分，也是從hexo的寫法

1

{% post_link filename title %}

改寫成hugo的Shortcodes

1

[title]({{-< ref "post/filename" >}} "title")

在「閱讀更多」方面，hexo使用了<!-- more -->做為分隔，而hugo使用了<!--more-->。差在more左右的空格有無。並且我發現沒有寫more的話，在home preview會出現渲染錯誤的問題（我還沒找到解法）。

在引用圖片上，文章的目錄架構會是

1
2
3
4
5
6
7

.
├── content.md
├── content
│  ├── 1.png
│  ├── 2.png
│  ├── 3.png
│  └── image.png

若是要讓圖片同時在index page以及內文中出現，原本hexo語法會是

1

{% asset_img image.png Front %}

在hugo中，要用絕對路徑引用才會讓圖片同時在內文以及index page不失效

1

{{-< figure src="/post/content/image.png">}}

Github update

更新github上的網頁也很簡單，首先先產生靜態資料

1

hugo

比hexo的hexo g少很多，耶。

接著進到public資料夾，然後初始化，上傳

1
2
3
4
5
6

cd public
git init
git remote add upstream <git>
git add -A
git commit -m "Update"
git push -f upstream main

最後我直接使用了別人的deploy codeXD，但我有做了點更改。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

#!/bin/bash

hugo 
(
cd public
git add -A

msg="rebuilding site `date`"

if [ $# -eq 1 ]
  then msg="$1"
fi

git commit -m "$msg"
git push upstream main
)

儲存成deploy.sh然後chmod +x deploy.sh，執行就能動了。

Reference