Hugo 建站經(jīng)驗之談

時間：2023-07-10 22:36:01 | 來源：網(wǎng)站運營

時間：2023-07-10 22:36:01 來源：網(wǎng)站運營

Hugo 建站經(jīng)驗之談：

前言

建站工具，早已不是一個新穎的話題，拋開可視化建站單論開發(fā)層面，各類語言都有推出廣受歡迎的建站框架，比如 Python 開發(fā)的 Pelican，JavaScript 開發(fā)的 Hexo，以及市場份額占比最大的 PHP 開發(fā)的 WordPress 等等，這些筆者在折騰個人博客時多少都有用過。但當需要快速搭建起我們的 Nebula Graph 官網(wǎng) 時，小小糾結對比之后，筆者選擇了 Golang 語言的 Hugo 來作為我們的技術方案，下面就來分享下個人使用 Hugo 建站的一些個人思考和經(jīng)驗分享。

P.S: 客觀來說，各類語言的博客類型框架并無太大差別，更多還是類比語言的個人喜好與審美不同，在此不做敘述。

實踐介紹

我們的需求

• 博客系統(tǒng)，需要支持運營發(fā)布我們?nèi)粘５募夹g文章資訊

Hugo 有靈活強大的內(nèi)容管理系統(tǒng)，能隨著需求，不斷增加不同類型的資訊支持，諸如博客、Release Note、技術文檔等，詳細后面會介紹。

• 品宣介紹，常見就是站點首頁、新聞介紹等

同樣依賴內(nèi)容管理系統(tǒng)，能很快支持到不同頁面的實現(xiàn)，包括相同組件如導航、頁腳等的共享，后面也會介紹。

• SEO 需要

Hugo 本就是類似服務端模板語言的 Web 框架，天然的服務端渲染。

• 國際化支持，Nebula 注重國內(nèi)外開發(fā)者的訪問體驗

Hugo 能漸進地拓展支持多國語言，只要你有對應的語料配置，就能迅速支撐需求并方便管理。

• 靈活易于管理，能讓非技術的運營同學也能參與站點的內(nèi)容管理

強大的模板系統(tǒng)，讓技術人員專心開發(fā)完對應模板后，能將內(nèi)容管理交給運營同學持續(xù)運營。

特點介紹

靈活強大的內(nèi)容管理系統(tǒng)

...├── config // 模板需要的內(nèi)容語料| ├── default | | ├── config.toml| | └── config.cn.toml| | └── config.en.toml| | └── footer.cn.toml| | └── footer.en.toml| | └── ...├── content // 內(nèi)容部分，日常多由運營同學管理維護| ├── en // 國際化支持| | ├── posts // 內(nèi)置默認的博客（post)類型資訊| | | ├── post-01.md| | | ├── post-02.md| | └── release // 新增的 release 類型資訊| | | ├── release-01.md| | | └── release-02.md| ├── cn| | ├── posts| | | ├── post-01.md| | | ├── post-02.md| | └── release| | | ├── release-01.md| | | └── release-02.md...├── themes // 站點的主題| ├── nebula-theme // 主題名| | ├── layout // 模板| | | ├── _default // 默認的模板| | | | ├── baseof.html // 渲染的種子頁面定義| | | | ├── list.html // 默認博客 post 類型資訊 - 列表頁的使用模板頁面| | | | ├── single.html // 默認博客 post 類型資訊 - 詳情頁使用模板頁面| | | ├── partials // 復用的模板片段| | | | ├── head.html| | | | ├── footer.html| | | | ├── menus.html| | | | ├── ...| | | ├── index.html // 首頁（'/') 默認會使用的模板| | | ├── section| | | | ├── release.html // 新增資訊類型 release 渲染時使用的模板頁面 - 發(fā)布歷史頁面| | | | ├── news.html // 新增資訊類型 news 渲染時使用的模板頁面 - 媒體新聞頁面...以上，便是 Hugo 用以支撐起靈活強大的模板系統(tǒng)所采用的項目結構，筆者感覺比較能直觀反映出對于不同站點需求的支持，它甚至還可以是不斷嵌以此結構不斷嵌套，外層的配置覆蓋內(nèi)層的，更多信息可以參考官方的模板系統(tǒng)介紹。

內(nèi)置豐富工具集

除了強大的內(nèi)容管理系統(tǒng)外，Hugo 還有很多很好用的內(nèi)置模板及工具函數(shù)，滿足不同需求情況下提升搭建效率，抽象實現(xiàn)細節(jié)，更專注于站點的搭建，諸如：

• 資源類型列表的分頁模板 - Pagination

這個針對只有列表頁的需求，比如博客，發(fā)版歷史，新聞類等，好用的分頁模板，輕松的就幫你完成了。

• 資源 RSS 模板 - RSS

對于資訊型的站點必不可少，官方已內(nèi)置了默認的 rss 模板，只需要添加一行代碼，即可搞定 rss，當然還支持個性化定制。

• 各類內(nèi)容及字符串處理工具函數(shù) - Functions

這個不用多說，對應程序中的各類常見的字符串替換，Hugo 都有著良好的支持，同時它還支持類似 Pipe 管道的方式，將處理內(nèi)容以 | 分隔層層傳遞下去，就像我們在 Linux 輸入的命令一樣。

• 好用的 CLI 工具

內(nèi)置了 http server 方便本地開發(fā)，同時又能將整個站點打包成純靜態(tài)的資源，方便了對于部署的操作和維護成本，可以一鍵初始化并啟動項目，開箱即用的感覺，上手容易。

• 好用的內(nèi)容管理工具
• 迅速提取博客內(nèi)容的目錄導航 - TableOfContents 使用此工具函數(shù)，會根據(jù)你當前的文章內(nèi)容，提取目錄概要，節(jié)省了生成錨點內(nèi)容的時間。
• 便捷獲取文章的概覽內(nèi)容 - Summary
• 便捷獲取文章的圖片資源 - Image Processing
• 自定義 URL 的規(guī)則 - URL Management

以上便是我們在實踐中，有接觸過的一些 Hugo 比較好用的工具，當然它提供的遠比這個更豐富，更多工具可查看參考官方文檔。

社區(qū)資源豐富

• 生態(tài)很好，現(xiàn)成大量的主題可供選擇

作為 Golang 語言最受歡迎的站點框架，隨著越來越多人的使用，Hugo 官方鼓勵大家開源自己的主題，約定了簡易可行的規(guī)范，讓貢獻者的主題能在 Hugo 官網(wǎng)方便地被他人找到，易于復用。非技術的同學，也可以找到符合自己需求的主題，不用寫一行 HTML 代碼，也能讓自己生成自己的站點。

• 答疑途徑多樣
• 作為一個 45k+ star 的項目，使用人群眾多，知識沉淀很好，網(wǎng)上搜索能解決大部分問題。
• 有在線的論壇，維護者也相當活躍，只要提問得當，能及時得到回復，解決疑難雜癥。
• 官方文檔 的內(nèi)容組織，層次也比較清晰，從筆者個人使用來看，體驗還是很好的。

經(jīng)驗總結

除了上面偏向于 Hugo 本身提供的功能介紹外，下面結合筆者自身的實踐經(jīng)歷，闡述一些小小的經(jīng)驗總結，方便后來的朋友：

使用現(xiàn)成的主題

基于 DIY 原則來說，結合自身需求，去主題市場找一個符合自己的主題來進行修改，應該是上手最快的方式了，甚至不需要開發(fā)就能拿來直接用，即使需要開發(fā)，使用他人已開發(fā)好的主題，由于 Hugo 框架本身具有很好的約定規(guī)范，你也能很快了解到一個 Hugo 項目的結構組成及運行機制，降低調(diào)研上手成本。

項目結構和內(nèi)容關系

就像前面介紹的內(nèi)容管理系統(tǒng)，從結構上了解內(nèi)容 contents 與模板 layouts 之間的映射關系，適當結合官網(wǎng)文檔的介紹，了解這層映射關系后，能方便在后續(xù)的開發(fā)過程中，讓你的實踐更符合 Hugo 期望的形式來進行，這樣會讓你不論是實現(xiàn)，還是在閱讀 Hugo 文檔的時候，事半功倍，易于理解。

個人定制

除了 Hugo 本身的框架、規(guī)范及工具能力外，因為網(wǎng)頁的代碼最終還是離不開 HTML/CSS/Javascript，自定義相關的內(nèi)容，只要善用提供的規(guī)則（如各個模板的引用，組合），就能在各個模板入口引入你想自己控制的代碼部分，為你自己的站點添磚加瓦。結合我們自身的實踐，比如第三方站點插件的集成（埋點統(tǒng)計，Discourse、ShareThis等等），一些自定義彈窗等動態(tài) js 的添加，所以只要熟悉網(wǎng)頁的常規(guī)開發(fā)，除了 Hugo 的能力外，你可以做到你以往可做的任何事情。

純靜態(tài)站點

Hugo 打包構建后輸出的是一個純靜態(tài)的資源包，這樣地好處就是你可以將你的站點部署在任何地方，比如使用 GitHub 免費的 Pages，又或者是隨便放在 oss 源中，沒有維護服務器，數(shù)據(jù)庫的煩惱。純靜態(tài)資源部署很便捷，以 Hugo 為例，他的路由適合文件目錄相關的，我們的站點有中英文兩個語言版本，開發(fā)時都放在一個項目中進行維護共享模板，在構建部署時，會根據(jù)語言打成不同的資源包，分別發(fā)到不同的國內(nèi)外 Web 容器，以此優(yōu)化訪問體驗。

最后

以上便是筆者使用 Hugo 框架搭建公司 Nebula Graph 官網(wǎng) 的一些實踐心得，希望給有快速建站需求的朋友提供一些思路和參考，我們的站點是基于已有主題二次開發(fā)，更多細節(jié)感興趣的朋友也可以看看我們放在 GitHub 的源站倉庫。

也歡迎大家來了解我們的 Nebula Graph 圖數(shù)據(jù)庫產(chǎn)品 或者前往官方論壇：https://discuss.nebula-graph.com.cn/ 的 建議反饋 分類下提建議 ；加入 Nebula Graph 交流群，請聯(lián)系 Nebula Graph 官方小助手微信號：NebulaGraphbot

作者有話說：Hi，我是 Jerry，是圖數(shù)據(jù) Nebula Graph 前端工程師，在前端平臺工具開發(fā)及工程化方面有些小心得，希望寫的經(jīng)驗分享能給大家?guī)韼椭缬胁划斨幰蚕Ｍ軒兔m正，謝謝~