前言
建站工具，早已不是一個新穎的話題，抛開可視化建站單論開發層面，各類語言都有推出廣受歡迎的建站架構，比如 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
以上便是我們在實踐中，有接觸過的一些 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 架構搭建公司
的一些實踐心得，希望給有快速建站需求的朋友提供一些思路和參考，我們的站點是基于已有主題二次開發，更多細節感興趣的朋友也可以看看我們放在 GitHub 的
源站倉庫也歡迎大家來了解我們的
Nebula Graph 圖資料庫産品或者前往官方論壇：
https://discuss.nebula-graph.com.cn/的
建議回報
分類下提建議 👏；加入 Nebula Graph 交流群，請聯系 Nebula Graph 官方小助手微信号：
NebulaGraphbot作者有話說：Hi，我是 Jerry，是圖資料 Nebula Graph 前端工程師，在前端平台工具開發及工程化方面有些小心得，希望寫的經驗分享能給大家帶來幫助，如有不當之處也希望能幫忙糾正，謝謝~
![27. Remove Element(清單)題目代碼[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)