玩转开源 | 搭建 Hugo 管理 Markdown 文档
在工作、學(xué)習(xí)中,不可避免會(huì)要寫一些文檔;又或者想搭建個(gè)簡(jiǎn)單網(wǎng)站,記錄和分享您的生活經(jīng)驗(yàn)或知識(shí);撰寫這些文檔中使用 markdown 是一個(gè)非常不錯(cuò)的選擇,讓我們更加聚焦在文檔表達(dá)的內(nèi)容上。實(shí)際上筆者的文檔基本都是在 Sublime 中用 markdown 格式撰寫的。
在 先前文章 《Markdown的那些事兒》 也有提到到,圍繞 markdown 有著大量的開源軟件、庫(kù)做支持;這里分享下使用基于MIT許可證的開源軟件 Hugo 來(lái)管理 Markdown 文檔,能幫助基于 markdown 生成各種風(fēng)格主題的靜態(tài)頁(yè)面。先不妨看下筆者一些markdown 文檔效果:https://quincik.gitee.io/algorithms/docs/nine/array/
Hugo 常用來(lái)做什么?
Hugo是一款強(qiáng)大的用于生成靜態(tài)網(wǎng)頁(yè)的程序,擅長(zhǎng)于將 Markdown 文檔按需要轉(zhuǎn)換成各類主題的靜態(tài)網(wǎng)頁(yè);它由Go語(yǔ)言編寫的,在處理速度上非常快;也有人對(duì)比過(guò)類似一些產(chǎn)品比如 Jekyll / Hugo / Hexo,其編譯網(wǎng)頁(yè)的速度是最快的。
使用Hugo的主要場(chǎng)景包括搭建公司、產(chǎn)品或個(gè)人網(wǎng)站,尤其是在結(jié)合云服務(wù)器的環(huán)境下。它的強(qiáng)大性不僅體現(xiàn)在速度上,也涵蓋了靈活性和多樣性。靜態(tài)網(wǎng)頁(yè)生成的成果可以輕松部署于GitHub Page、Gitee Page等平臺(tái),同時(shí)也能便捷地轉(zhuǎn)換為各種主題形式,滿足用戶多樣化的需求。
結(jié)合Hugo和Nginx的組合,可以迅速、高效地搭建公司站點(diǎn)或個(gè)人站點(diǎn)。這種方式不僅利用了Hugo快速生成靜態(tài)網(wǎng)頁(yè)的特性,還借助Nginx提供的高性能、穩(wěn)定的Web服務(wù)器功能,為訪問(wèn)者提供了極佳的體驗(yàn);最近,騰訊云服務(wù)器CVM推出了不少優(yōu)惠活動(dòng),感興趣的不妨試試。
搭建 Hugo 環(huán)境
第一步,安裝 Go 語(yǔ)言環(huán)境,可以直接去官網(wǎng)下載下 GO 的程序,進(jìn)行安裝即可。附上官網(wǎng)安裝鏈接:https://go.dev/doc/install
第二步,Hugo 經(jīng)常會(huì)結(jié)合 Git 一起用,這里也安裝 Git 的程序,同樣也是推薦官方下載:https://git-scm.com/download/win
第三步,安裝 Dart Sass, Hugo v0.114.0 以及 后續(xù)版本 是用Dart 來(lái)進(jìn)行 Sass 的編譯的;筆者是在 Windows 使用 Scoop 安裝(其他系統(tǒng)可能更為方便),以下給出一些參考步驟:
- 先使用 win 自帶的 PowerShell 來(lái)安裝 Scoop # Optional: Needed to run a remote script the first time
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
irm get.scoop.sh | iex scoop install sass當(dāng)然這只是一種選擇,也可以考慮直接去 github 上下載 release 安裝,這里給的是 v1.69.5:https://github.com/sass/dart-sass/releases/tag/1.69.5 - 使用 Scoop 安裝 sass。
第四步,安裝 Hugo ,去 Github 上下載個(gè)最新版本安裝即可,這里給的是 v0.120.4 :https://github.com/gohugoio/hugo/releases/tag/v0.120.4
特別注意下以上的環(huán)境安裝,記得都配置下 系統(tǒng)環(huán)境變量Path 方便后續(xù)的使用。最后附上,筆者安裝的程序的 相關(guān)版本信息。
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 進(jìn)入 D 盤: cd d:;
第二步, 執(zhí)行命令 : hugo new site "blog";
第三步, 進(jìn)入到 hugo 主題網(wǎng)站:https://themes.gohugo.io/ ,這里用 hugo-book主題 來(lái)演示;
第四步, 點(diǎn)擊下載,進(jìn)入 github 站點(diǎn),下載 最新 releases 主題包;
第五步, 解壓縮到 blog/themes 目錄下,并修改 hugo.toml 文件,設(shè)置主題:theme = 'hugo-book-9'。
除開下載源碼安裝的方式,四、五步也還有其他方式 比如:git submodule add https://github.com/alex-shpak/hugo-book themes/hugo-book 等,雖然方式不同主要目標(biāo)都是將主題文件放在hugo themes文件下。
第六步,進(jìn)入 D:\blog: cd .\blog\ ;然后執(zhí)行 hugo serve -D 運(yùn)行hugo自帶的服務(wù)功能。
到這里,其實(shí)我們就能看到 利用hugo 搭建出來(lái)的默認(rèn)站點(diǎn)了:http://localhost:1313/
Hugo 新增文檔
在下載 hugo-book主題 的時(shí)候,里面就包含了 它的一些示例網(wǎng)頁(yè);只需要復(fù)制到 content 里面就能看到。由于使用的都是默認(rèn)配置,這里僅拷貝docs/example、docs/_index.md
當(dāng)然,我們可以自己新建下 自己的 Markdown文件(hello.md);由于 快速使用中配置都為默認(rèn)的,因此 我們需要在 docs下面進(jìn)行創(chuàng)建,便于菜單吐出。
Hugo 的基本搭建就先介紹到這里了,后續(xù)如果有機(jī)會(huì)再分享 Hugo 配置、相關(guān)主題。
歡迎關(guān)注 Java研究者專欄、博客、公眾號(hào)。
總結(jié)
以上是生活随笔為你收集整理的玩转开源 | 搭建 Hugo 管理 Markdown 文档的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 新一代自拍神器!vivo S10系列发布
- 下一篇: 3款高评价的.Net开发的WMS系统推荐