玩轉開源 | 搭建 Hugo 管理 Markdown 檔案

2023-11-23 12:00:49

在工作、學習中,不可避免會要寫一些檔案;又或者想搭建個簡單網站,記錄和分享您的生活經驗或知識;撰寫這些檔案中使用 markdown 是一個非常不錯的選擇,讓我們更加聚焦在檔案表達的內容上。實際上筆者的檔案基本都是在 Sublime 中用 markdown 格式撰寫的。

在 先前文章 《Markdown的那些事兒》 也有提到到,圍繞 markdown 有著大量的開源軟體、庫做支援;這裡分享下使用基於MIT許可證的開源軟體 Hugo 來管理 Markdown 檔案,能幫助基於 markdown 生成各種風格主題的靜態頁面。先不妨看下筆者一些markdown 檔案效果:https://quincik.gitee.io/algorithms/docs/nine/array/

Hugo 常用來做什麼?

Hugo是一款強大的用於生成靜態網頁的程式,擅長於將 Markdown 檔案按需要轉換成各類主題的靜態網頁;它由Go語言編寫的,在處理速度上非常快;也有人對比過類似一些產品比如 Jekyll / Hugo / Hexo,其編譯網頁的速度是最快的。

使用Hugo的主要場景包括搭建公司、產品或個人網站,尤其是在結合雲伺服器的環境下。它的強大性不僅體現在速度上,也涵蓋了靈活性和多樣性。靜態網頁生成的成果可以輕鬆部署於GitHub Page、Gitee Page等平臺,同時也能便捷地轉換為各種主題形式,滿足使用者多樣化的需求。

結合Hugo和Nginx的組合,可以迅速、高效地搭建公司站點或個人站點。這種方式不僅利用了Hugo快速生成靜態網頁的特性,還藉助Nginx提供的高效能、穩定的Web伺服器功能,為存取者提供了極佳的體驗;最近,騰訊雲伺服器CVM推出了不少優惠活動,感興趣的不妨試試。

搭建 Hugo 環境

第一步,安裝 Go 語言環境,可以直接去官網下載下 GO 的程式,進行安裝即可。附上官網安裝連結:https://go.dev/doc/install

第二步,Hugo 經常會結合 Git 一起用,這裡也安裝 Git 的程式,同樣也是推薦官方下載:https://git-scm.com/download/win

第三步,安裝 Dart Sass, Hugo v0.114.0 以及 後續版本 是用Dart 來進行 Sass 的編譯的;筆者是在 Windows 使用 Scoop 安裝(其他系統可能更為方便),以下給出一些參考步驟:

  1. 先使用 win 自帶的 PowerShell 來安裝 Scoop
	# Optional: Needed to run a remote script the first time
	> Set-ExecutionPolicy RemoteSigned -Scope CurrentUser 
	> irm get.scoop.sh | iex
  1. 使用 Scoop 安裝 sass。
	scoop install sass

當然這只是一種選擇,也可以考慮直接去 github 上下載 release 安裝,這裡給的是 v1.69.5:https://github.com/sass/dart-sass/releases/tag/1.69.5

第四步,安裝 Hugo ,去 Github 上下載個最新版本安裝即可,這裡給的是 v0.120.4 :https://github.com/gohugoio/hugo/releases/tag/v0.120.4

特別注意下以上的環境安裝,記得都設定下 系統環境變數Path 方便後續的使用。最後附上,筆者安裝的程式的 相關版本資訊。

PS D:\> go version
go version go1.21.4 windows/amd64

PS D:\> git -v
git version 2.42.0.windows.2

PS D:\> sass --version
1.69.5

PS D:\> hugo version
hugo v0.120.4 ...

Hugo 快速使用

第一步, 開啟 PowerShell 進入 D 盤: cd d:;

第二步, 執行命令 : hugo new site "blog";

第三步, 進入到 hugo 主題網站:https://themes.gohugo.io/ ,這裡用 hugo-book主題 來演示;

第四步, 點選下載,進入 github 站點,下載 最新 releases 主題包;

第五步, 解壓縮到 blog/themes 目錄下,並修改 hugo.toml 檔案,設定主題:theme = 'hugo-book-9'

除開下載原始碼安裝的方式,四、五步也還有其他方式 比如:git submodule add https://github.com/alex-shpak/hugo-book themes/hugo-book 等,雖然方式不同主要目標都是將主題檔案放在hugo themes檔案下。

第六步,進入 D:\blog: cd .\blog\ ;然後執行 hugo serve -D 執行hugo自帶的服務功能。

到這裡,其實我們就能看到 利用hugo 搭建出來的預設站點了:http://localhost:1313/

Hugo 新增檔案

在下載 hugo-book主題 的時候,裡面就包含了 它的一些範例網頁;只需要複製到 content 裡面就能看到。由於使用的都是預設設定,這裡僅拷貝docs/exampledocs/_index.md

當然,我們可以自己新建下 自己的 Markdown檔案(hello.md);由於 快速使用中設定都為預設的,因此 我們需要在 docs下面進行建立,便於選單吐出。

Hugo 的基本搭建就先介紹到這裡了,後續如果有機會再分享 Hugo 設定、相關主題。

歡迎關注 Java研究者專欄、部落格、公眾號。