用Hugo搭建博客並部署到GitHub Pages
之前擔心過現有博客平台(如博客園,CSDN)突然倒閉了,博文特別是插圖來不及備份;也考慮過自建博客可以更隨意,因此有了自建博客的打算。花了兩天時間,走了一些彎路,有一些經驗總結:
-
做事情一定要搞清楚需求,掂量自己的實力。原本我只是想做一個備份,那么本地寫好markdown,存好插圖,再同步到博客園就行了,沒有必要費力建博客搭網站。雖然Hexo和Hugo都有很多模板供選擇,但如果要徹底改造成自己喜歡的樣子,還得好好研究琢磨。對於沒有任何HTML經驗的我,這種工作量遠遠超過了我的預期。
-
不要淪為工具的努力。就像斟酌linux還是windows好一樣,糾結自建博客和使用博客平台對我來說沒太大意義。因為我的目的還是寫作,博客也是服務於寫作的。既然自建博客的收益並不能完全覆蓋我的需求(可能還要支配大量的經歷調bug),那么我就應該果斷放棄。
-
Hugo非常非常快,但中文文檔和博客少,而且舊模板和新Hugo的兼容性也不好;Hexo中文文檔和博客特別多,模板也不錯,但是稍微麻煩一點,而且慢得多。
最后,我就簡單地用Hugo搭建了一個個人CV(簡歷)網站。下面記錄一下流程:
1. 本地搭建
1.1 安裝Hugo
- 到Hugo官方GitHub倉庫,下載最新的win64安裝包。解壓到
D:\hugo
。 - 配置環境變量:
此電腦
->屬性
->高級系統設置
->環境變量
->系統變量
->Path
->編輯
->新建
->D:\hugo
。
1.2 創建站點
在命令行中運行hugo new site G:/RyanXing
,即創建了一個名為RyanXing
的文件夾,作為Hugo站點。
1.3 新建頁面和文章
進入該文件夾:
-
新建頁面:
hugo new links.md
該文件自動出現在
content/links.md
。 -
創建文章:
hugo new post/myfirst.md
其自動出現在
content/post/myfirst.md
。放在post
目錄是為了方便聚合頁面。注意要把draft一行去掉。draft意思是草稿,即在生成時不出現。
1.4 使用主題
在Hugo Themes選擇喜歡的主題。有適合簡歷的,也有適合博客的。
要根據主題提供的README進行后續操作。假設選擇Minos。根據說明文檔,執行:
cd themes/
git clone --depth 1 https://github.com/carsonip/hugo-theme-minos
然后在根目錄的config.toml
中設置該主題為默認主題即可(添加該行):
theme = "hugo-theme-minos"
1.5 修改配置文件
我們現在繼續修改根目錄的config.toml
。
baseurl = "https://ryanxingql.github.io/"
languageCode = "zh-CN"
title = "RyanXing's CV"
paginate = 10
theme = "hugo-theme-minos"
1.6 預覽
在根目錄執行:hugo server
。此時生成的是靜態文件,真的很快。只要server不關,會一直監控文件變化,自動生成靜態文件。
我們可以看到命令行提示Web Server is available at ...
。在瀏覽器輸入http://localhost:1313
。
一定要記得去掉正文的draft,否則不顯示。
2. 部署
在GitHub上創建一個倉庫,名為RyanXingQL.github.io
。注意命名規范。
在根目錄執行:hugo
。
此時,所有的靜態頁面都會生成到public
目錄。執行以下命令:
cd public
git init
git remote add origin git@github.com:RyanXingQL/RyanXingQL.github.io.git
git add -A
git commit -m "first commit"
git push -u origin master
瀏覽器輸入https://ryanxingql.github.io/
,刷新一下就能看到啦。Hugo非常快。
如果要搭博客,后期要考慮的事情就多了。比如評論系統,各種裝飾插件等。