首發於 Nebula Graph 官方博客：https://nebula-graph.com.cn/posts/why-static-site-generator-hugo/html
前言
建站工具，早已不是一個新穎的話題，拋開可視化建站單論開發層面，各種語言都有推出廣受歡迎的建站框架，好比 Python 開發的 Pelican，JavaScript 開發的 Hexo，以及市場份額佔比最大的 PHP 開發的 WordPress 等等，這些筆者在折騰我的博客時多少都有用過。但當須要快速搭建起咱們的 Nebula Graph 官網 時，小小糾結對比以後，筆者選擇了 Golang 語言的 Hugo 來做爲咱們的技術方案，下面就來分享下我的使用 Hugo 建站的一些我的思考和經驗分享。前端
P.S: 客觀來講，各種語言的博客類型框架並沒有太大差異，更多仍是類比語言的我的喜愛與審美不一樣，在此不作敘述。git
實踐介紹
咱們的需求
- 博客系統，須要支持運營發佈咱們平常的技術文章資訊
Hugo 有靈活強大的內容管理系統，能隨着需求，不斷增長不一樣類型的資訊支持，諸如博客、Release Note、技術文檔等，詳細後面會介紹。github
- 品宣介紹，常見就是站點首頁、新聞介紹等
一樣依賴內容管理系統，能很快支持到不一樣頁面的實現，包括相同組件如導航、頁腳等的共享，後面也會介紹。web
- 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 用以支撐起靈活強大的模板系統所採用的項目結構，筆者感受比較能直觀反映出對於不一樣站點需求的支持，它甚至還能夠是不斷嵌以此結構不斷嵌套，外層的配置覆蓋內層的，更多信息能夠參考官方的模板系統介紹。markdown
內置豐富工具集
除了強大的內容管理系統外，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 框架搭建公司 Nebula Graph 官網 的一些實踐心得，但願給有快速建站需求的朋友提供一些思路和參考，咱們的站點是基於已有主題二次開發，更多細節感興趣的朋友也能夠看看咱們放在 GitHub 的源站倉庫。
也歡迎你們來了解咱們的 Nebula Graph 圖數據庫產品 或者前往官方論壇：https://discuss.nebula-graph.com.cn/ 的 建議反饋 分類下提建議 👏；加入 Nebula Graph 交流羣，請聯繫 Nebula Graph 官方小助手微信號：NebulaGraphbot
做者有話說：Hi，我是 Jerry，是圖數據 Nebula Graph 前端工程師，在前端平臺工具開發及工程化方面有些當心得，但願寫的經驗分享能給你們帶來幫助，若有不當之處也但願能幫忙糾正，謝謝~