前言
建站工具，早已不是一個新穎的話題，拋開可視化建站單論開發層面，各類語言都有推出廣受歡迎的建站框架，比如 Python 開發的 Pelican，JavaScript 開發的 Hexo，以及市場份額占比最大的 PHP 開發的 WordPress 等等，這些筆者在折騰個人博客時多少都有用過。但當需要快速搭建起我們的 Nebula Graph 官網 時，小小糾結對比之后，筆者選擇了 Golang 語言的 Hugo 來作為我們的技術方案，下面就來分享下個人使用 Hugo 建站的一些個人思考和經驗分享。
P.S: 客觀來說，各類語言的博客類型框架並無太大差別，更多還是類比語言的個人喜好與審美不同，在此不做敘述。
實踐介紹
我們的需求
- 博客系統，需要支持運營發布我們日常的技術文章資訊
Hugo 有靈活強大的內容管理系統，能隨着需求，不斷增加不同類型的資訊支持，諸如博客、Release Note、技術文檔等，詳細后面會介紹。
- 品宣介紹，常見就是站點首頁、新聞介紹等
同樣依賴內容管理系統，能很快支持到不同頁面的實現，包括相同組件如導航、頁腳等的共享，后面也會介紹。
- SEO 需要
Hugo 本就是類似服務端模板語言的 Web 框架，天然的服務端渲染。
- 國際化支持，Nebula 注重國內外開發者的訪問體驗
Hugo 能漸進地拓展支持多國語言，只要你有對應的語料配置，就能迅速支撐需求並方便管理。
- 靈活易於管理，能讓非技術的運營同學也能參與站點的內容管理
強大的模板系統，讓技術人員專心開發完對應模板后，能將內容管理交給運營同學持續運營。
特點介紹
靈活強大的內容管理系統
...
├── config // 模板需要的內容語料
| ├── default
| | ├── config.toml
| | └── config.cn.toml
| | └── config.en.toml
| | └── footer.cn.toml
| | └── footer.en.toml
| | └── ...
├── content // 內容部分，日常多由運營同學管理維護
| ├── en // 國際化支持
| | ├── posts // 內置默認的博客（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 渲染時使用的模板頁面 - 發布歷史頁面
| | | | ├── news.html // 新增資訊類型 news 渲染時使用的模板頁面 - 媒體新聞頁面
...
以上，便是 Hugo 用以支撐起靈活強大的模板系統所采用的項目結構，筆者感覺比較能直觀反映出對於不同站點需求的支持，它甚至還可以是不斷嵌以此結構不斷嵌套，外層的配置覆蓋內層的，更多信息可以參考官方的模板系統介紹。
內置豐富工具集
除了強大的內容管理系統外，Hugo 還有很多很好用的內置模板及工具函數，滿足不同需求情況下提升搭建效率，抽象實現細節，更專注於站點的搭建，諸如：
- 資源類型列表的分頁模板 - Pagination
這個針對只有列表頁的需求，比如博客，發版歷史，新聞類等，好用的分頁模板，輕松的就幫你完成了。
- 資源 RSS 模板 - RSS
對於資訊型的站點必不可少，官方已內置了默認的 rss 模板，只需要添加一行代碼，即可搞定 rss，當然還支持個性化定制。
- 各類內容及字符串處理工具函數 - Functions
這個不用多說，對應程序中的各類常見的字符串替換，Hugo 都有着良好的支持，同時它還支持類似 Pipe 管道的方式，將處理內容以 | 分隔層層傳遞下去，就像我們在 Linux 輸入的命令一樣。
- 好用的 CLI 工具
內置了 http server 方便本地開發，同時又能將整個站點打包成純靜態的資源，方便了對於部署的操作和維護成本，可以一鍵初始化並啟動項目，開箱即用的感覺，上手容易。
- 好用的內容管理工具
- 迅速提取博客內容的目錄導航 - TableOfContents
使用此工具函數，會根據你當前的文章內容，提取目錄概要，節省了生成錨點內容的時間。 - 便捷獲取文章的概覽內容 - Summary
- 便捷獲取文章的圖片資源 - Image Processing
- 自定義 URL 的規則 - URL Management
- 迅速提取博客內容的目錄導航 - TableOfContents
以上便是我們在實踐中，有接觸過的一些 Hugo 比較好用的工具，當然它提供的遠比這個更豐富，更多工具可查看參考官方文檔。
社區資源豐富
- 生態很好，現成大量的主題可供選擇
作為 Golang 語言最受歡迎的站點框架，隨着越來越多人的使用，Hugo 官方鼓勵大家開源自己的主題，約定了簡易可行的規范，讓貢獻者的主題能在 Hugo 官網方便地被他人找到，易於復用。非技術的同學，也可以找到符合自己需求的主題，不用寫一行 HTML 代碼，也能讓自己生成自己的站點。
- 答疑途徑多樣
經驗總結
除了上面偏向於 Hugo 本身提供的功能介紹外，下面結合筆者自身的實踐經歷，闡述一些小小的經驗總結，方便后來的朋友：
使用現成的主題
基於 DIY 原則來說，結合自身需求，去主題市場找一個符合自己的主題來進行修改，應該是上手最快的方式了，甚至不需要開發就能拿來直接用，即使需要開發，使用他人已開發好的主題，由於 Hugo 框架本身具有很好的約定規范，你也能很快了解到一個 Hugo 項目的結構組成及運行機制，降低調研上手成本。
項目結構和內容關系
就像前面介紹的內容管理系統，從結構上了解內容 contents 與模板 layouts 之間的映射關系，適當結合官網文檔的介紹，了解這層映射關系后，能方便在后續的開發過程中，讓你的實踐更符合 Hugo 期望的形式來進行，這樣會讓你不論是實現，還是在閱讀 Hugo 文檔的時候，事半功倍，易於理解。
個人定制
除了 Hugo 本身的框架、規范及工具能力外，因為網頁的代碼最終還是離不開 HTML/CSS/Javascript，自定義相關的內容，只要善用提供的規則（如各個模板的引用，組合），就能在各個模板入口引入你想自己控制的代碼部分，為你自己的站點添磚加瓦。結合我們自身的實踐，比如第三方站點插件的集成（埋點統計，Discourse、ShareThis等等），一些自定義彈窗等動態 js 的添加，所以只要熟悉網頁的常規開發，除了 Hugo 的能力外，你可以做到你以往可做的任何事情。
純靜態站點
Hugo 打包構建后輸出的是一個純靜態的資源包，這樣地好處就是你可以將你的站點部署在任何地方，比如使用 GitHub 免費的 Pages，又或者是隨便放在 oss 源中，沒有維護服務器，數據庫的煩惱。純靜態資源部署很便捷，以 Hugo 為例，他的路由適合文件目錄相關的，我們的站點有中英文兩個語言版本，開發時都放在一個項目中進行維護共享模板，在構建部署時，會根據語言打成不同的資源包，分別發到不同的國內外 Web 容器，以此優化訪問體驗。
最后
以上便是筆者使用 Hugo 框架搭建公司 Nebula Graph 官網 的一些實踐心得，希望給有快速建站需求的朋友提供一些思路和參考，我們的站點是基於已有主題二次開發，更多細節感興趣的朋友也可以看看我們放在 GitHub 的源站倉庫。
也歡迎大家來了解我們的 Nebula Graph 圖數據庫產品 或者前往官方論壇：https://discuss.nebula-graph.com.cn/ 的 建議反饋 分類下提建議 👏；加入 Nebula Graph 交流群，請聯系 Nebula Graph 官方小助手微信號：NebulaGraphbot
作者有話說：Hi，我是 Jerry，是圖數據 Nebula Graph 前端工程師，在前端平台工具開發及工程化方面有些小心得，希望寫的經驗分享能給大家帶來幫助，如有不當之處也希望能幫忙糾正，謝謝~