天天看點

将部落格從Hexo遷移至Hugo

自從了解了Github Pages這種靜态部落格後,開始喜歡上這種技術人員才能鼓搗明白的協作方式。自己的部落格系統也從最初的Octopress,切換到Hexo,直到最近看到Hugo這種号稱全球最快的靜态部落格系統,被适合技術人員的風格樣式所吸引。于是在經曆了三天的折騰後,順利的将Hexo遷移至Hugo中。同時,利用github workflows在送出後,将部落格自動釋出到騰訊的雲開發中。其實這三種不同的部落格系統也恰好了代表了每一個時代流行的語言,Octopress(Ruby),Hexo(Node.js),Hugo(Go)。時代在發展社會在進步,唯一不變的是開發人員追去完美的心,記錄下這一過程,也作為切換至Hugo後的第一篇博文。

https://sunqi.site/2021/11/29/%E5%B0%86%E5%8D%9A%E5%AE%A2%E4%BB%8Ehexo%E8%BF%81%E7%A7%BB%E8%87%B3hugo/#%E5%AE%89%E8%A3%85hugo 安裝Hugo

因為Hugo是Go語言開發的,是以安裝起來比較簡單,不過在我的Mac上,我最終還是選擇brew方式進行安裝。由于之前運作的brew是x86版本的,為了安裝Hugo也對brew重新進行了安裝。brew配置好了之後,直接安裝指令即可。

brew install hugo      

後續的流程相對簡單,根據Hugo官網的Quick Start按照步驟即可。

建立站點

hugo new site quickstart      

添加一個主題

經過對比,我選擇了相對低調、靈活的LoveIt作為部落客題。這個主題非常靈活,基本把要預留的内容都留出來了,是以不需要将themes中的檔案存放于部落格版本庫中,隻需要以submodule形式存在即可。

cd quickstart
git init
git submodule add https://github.com/dillonzq/LoveIt themes/LoveIt      

配置Hugo

Hugo每個主題都會有一個exampleSite的目錄,比如LoveIt,就是在themes/LoveIt/exampleSite。這裡面存放了主題配置的基本樣例,我們至少需要将config.toml拷貝至你的Blog根目錄,之後就可以進行配置了。其他資源檔案可以視實際需要拷貝至相應的目錄中。

在配置檔案中,有比較詳細的中文注釋,根據實際内容進行調整就可以了,我删除掉了英語和法語部分的配置,其他配置按照我的實際需要進行了配置。由于配置内容過多,這裡就不一一列舉了,這裡面隻把一些特殊的選項和大家分享一下。

如何配置百度統計?

在params.footer中保留了一個custom的參數,隻需要将百度統計寫入其中就可以,例如:

[params.footer]
......
    custom = '<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?08e49a207e75eef254a959d4b9dede90"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3492265208608388" crossorigin="anonymous"></script>'
......      

如何配置ICP及備案資訊?

仍然在params.footer中保留了一個icp參數,隻需要将備案資訊寫入其中即可,例如:

[params.footer]
......
    icp = '<br /><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502042680" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="/images/beian.png" style="float:left;"/>京公網安備 11010502042680号</a> | <a target="_blank" href="https://beian.miit.gov.cn/">京ICP備2020039231号-1</a>'
......      

從Hexo遷移至Hugo

因為Hexo本質上也是使用Markdown方式進行管理,是以遷移上也比較友善,但是由于每個人遇到的問題并不相同,是以這裡分享一下我自己遇到的實際問題。

https://sunqi.site/2021/11/29/%E5%B0%86%E5%8D%9A%E5%AE%A2%E4%BB%8Ehexo%E8%BF%81%E7%A7%BB%E8%87%B3hugo/#%E5%A6%82%E4%BD%95%E8%BF%81%E7%A7%BB 如何遷移?

這是我在Hexo中的文檔目錄

|-- source
|   |-- _drafts -> 草稿目錄,在Hugo中是通過模闆中的draft參數控制,可以先拷貝至Hugo /content/posts目錄中
|   |-- _posts -> 文章目錄,拷貝至/content/posts目錄中
|   |-- about -> 關于目錄,拷貝至/content/about目錄中
|   |-- favicon.ico -> 浏覽器favorite icon圖示
|   `-- images -> 靜态檔案,拷貝至/static/images目錄中      

文章結構

之前在編寫Hexo時候,使用了Hexo Admin插件,不知道為什麼生成的文章是這個樣子的:

title: "将部落格從Hexo遷移至Hexo"
date: 2021-11-29T20:23:54+08:00
---      

由于缺少了頂部的—,導緻Hugo無法正确識别标題和建立時間。于是用Python寫了一個簡單的腳本進行替換。

部分圖檔無法顯示

在我早期寫的部落格中,我使用了{% img …}來引用圖檔,但是這種方式在Hugo中是無法正确顯示的。于是仍然使用Python腳本進行了全局性替換。由于隻是作為臨時替換,是以在代碼規範性上差了一點,但是能解決我的問題了。

目錄結構問題

在我完成了以上兩步後,發現我的部分文章中的右側目錄顯示不夠完整,正常的顯示邏輯應該是這樣的效果。

将部落格從Hexo遷移至Hugo

我發現我的文章中一級标題都沒有顯示,經過調查,發現之前存在一個誤區,在一篇文檔中,其實title部分才是一級标題,正常文章中的标題要從二級寫起,這樣目錄才能正常生成出來。這意味着,我需要将原有文檔中不規範的标題都加一個#才可以,是以仍然采用Python批量替換方式完成。

至此,所有的文章已經能夠在Hugo中按照順序顯示了。

保持連結格式

在原有Hexo中,文章基本是按照時間格式進行命名,例如/year/month/day/title方式,但是在Hugo預設的方式中則是采用了直接命名的方式,這就需要我們在配置中進行修改,以達到上線後和原有連結保持一緻的效果。在config.toml中修改如下内容:

[permalinks]
  # posts = ":year/:month/:filename"
  posts = "/:year/:month/:day/:slug/"      

利用Github Action自動上線

配置到了這裡,基本具備了上線條件,之前我在Github上使用了Travis CI方式進行編譯上線,但是随着Github Workflow越來越成熟,是以這次決定采用Github方式進行部署。由于Github Pages在國内通路越來越慢,大概在前年将部落格遷移至騰訊的雲開發中。騰訊預設提供的雲開發Action不太好用,于是我還是用執行指令方式完成,以下是我的github workflow yaml,供大家參考。

需要替換的secrets變量,需要在Github中進行建立。

将部落格從Hexo遷移至Hugo

添加評論系統

LoveIt主題中支援多種評論系統,最終我使用的是valine,不過需要注冊一個LeanCloud賬号,建立一個開發闆的應用程式後,再更新配置檔案才行。

将部落格從Hexo遷移至Hugo

建立好應用後,在應用詳情中找到”應用憑證“,擷取相關鑒權資訊。

将部落格從Hexo遷移至Hugo

最後在Hugo config.toml中進行更新

[params.page.comment.valine]
  enable = true
  appId = "your_appId"
  appKey = "your_appKey"
  ......
  serverURLs = "https://your_leancloud_url"      

配置好的效果如下:

将部落格從Hexo遷移至Hugo

總結

其實Hugo LoveIt中還提供了很多功能,暫未深入研究,也歡迎大家共同交流。

到這裡,我的全新Hugo樣式的Blog已經釋出上線,這是整體的效果,也歡迎大家經常通路我的部落格——老孫正經胡說(

https://sunqi.site

)。

将部落格從Hexo遷移至Hugo