用Hugo搭建博客並部署到GitHub Pages


用Hugo搭建博客並部署到GitHub Pages

之前擔心過現有博客平台(如博客園,CSDN)突然倒閉了,博文特別是插圖來不及備份;也考慮過自建博客可以更隨意,因此有了自建博客的打算。花了兩天時間,走了一些彎路,有一些經驗總結:

  1. 做事情一定要搞清楚需求,掂量自己的實力。原本我只是想做一個備份,那么本地寫好markdown,存好插圖,再同步到博客園就行了,沒有必要費力建博客搭網站。雖然Hexo和Hugo都有很多模板供選擇,但如果要徹底改造成自己喜歡的樣子,還得好好研究琢磨。對於沒有任何HTML經驗的我,這種工作量遠遠超過了我的預期。

  2. 不要淪為工具的努力。就像斟酌linux還是windows好一樣,糾結自建博客和使用博客平台對我來說沒太大意義。因為我的目的還是寫作,博客也是服務於寫作的。既然自建博客的收益並不能完全覆蓋我的需求(可能還要支配大量的經歷調bug),那么我就應該果斷放棄。

  3. Hugo非常非常快,但中文文檔和博客少,而且舊模板和新Hugo的兼容性也不好;Hexo中文文檔和博客特別多,模板也不錯,但是稍微麻煩一點,而且慢得多。

最后,我就簡單地用Hugo搭建了一個個人CV(簡歷)網站。下面記錄一下流程:

1. 本地搭建

1.1 安裝Hugo

  1. Hugo官方GitHub倉庫,下載最新的win64安裝包。解壓到D:\hugo
  2. 配置環境變量:此電腦->屬性->高級系統設置->環境變量->系統變量->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非常快。

如果要搭博客,后期要考慮的事情就多了。比如評論系統,各種裝飾插件等。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM