![static-site-generator-hugo](https://www-cdn.nebula-graph.com.cn/nebula-blog/static-site-generator-hugo.png)

## 前言

建站工具，早已不是一個新穎的話題，拋開視覺化建站單論開發層面，各類語言都有推出廣受歡迎的建站框架，比如 Python 開發的 [Pelican](https://github.com/getpelican/pelican)，JavaScript 開發的 [Hexo](https://github.com/hexojs/hexo)，以及市場份額佔比最大的 PHP 開發的 [WordPress](https://github.com/WordPress/WordPress) 等等，這些筆者在折騰個人部落格時多少都有用過。但當需要**快速搭建**起我們的 [Nebula Graph 官網](https://nebula-graph.com.cn/) 時，小小糾結對比之後，筆者選擇了 Golang 語言的 [Hugo](https://gohugo.io/) 來作為我們的技術方案，下面就來分享下個人使用 Hugo 建站的一些個人思考和經驗分享。

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

## 實踐介紹

### 我們的需求

- 部落格系統，需要支援運營釋出我們日常的[技術文章資訊](https://nebula-graph.com.cn/posts/)

Hugo 有靈活強大的內容管理系統，能隨著需求，不斷增加不同型別的資訊支援，諸如部落格、Release Note、技術文件等，詳細後面會介紹。

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

同樣依賴內容管理系統，能很快支援到不同頁面的實現，包括相同元件如導航、頁尾等的共享，後面也會介紹。

- SEO 需要

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

- 國際化支援，Nebula 注重國內外開發者的訪問體驗

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

- 靈活易於管理，能讓非技術的運營同學也能參與站點的內容管理

強大的模板系統，讓技術人員專心開發完對應模板後，能將內容管理交給運營同學持續運營。

### 特點介紹

#### 靈活強大的內容管理系統

#### 內建豐富工具集

除了強大的內容管理系統外，Hugo 還有很多很好用的內建模板及工具函式，滿足不同需求情況下提升搭建效率，抽象實現細節，更專注於站點的搭建，諸如：

- 資源型別列表的分頁模板 - [Pagination](https://gohugo.io/templates/pagination/)

這個針對只有列表頁的需求，比如部落格，發版歷史，新聞類等，好用的分頁模板，輕鬆的就幫你完成了。

- 資源 RSS 模板 - [RSS](https://gohugo.io/templates/rss/)

對於資訊型的站點必不可少，官方已內建了預設的 rss 模板，只需要新增一行程式碼，即可搞定 rss，當然還支援個性化定製。

- 各類內容及字串處理工具函式 - [Functions](https://gohugo.io/functions/)

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

- 好用的 CLI 工具

內建了 http server 方便本地開發，同時又能將整個站點打包成純靜態的資源，方便了對於部署的操作和維護成本，可以一鍵初始化並啟動專案，開箱即用的感覺，上手容易。

- 好用的內容管理工具
   - 迅速提取部落格內容的目錄導航 - [TableOfContents](https://gohugo.io/content-management/toc/#readout)
  使用此工具函式，會根據你當前的文章內容，提取目錄概要，節省了生成錨點內容的時間。
   - 便捷獲取文章的概覽內容 - [Summary](https://gohugo.io/content-management/summaries/)
   - 便捷獲取文章的圖片資源 - [Image Processing](https://gohugo.io/content-management/image-processing/)
   - 自定義 URL 的規則 -  [URL Management](https://gohugo.io/content-management/urls/)

以上便是我們在實踐中，有接觸過的一些 Hugo 比較好用的工具，當然它提供的遠比這個更豐富，更多工具可檢視[參考官方文件](https://gohugo.io/about/)。

#### 社群資源豐富

- 生態很好，現成大量的主題可供選擇

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

- 答疑途徑多樣
   - 作為一個 45k+ star 的專案，使用人群眾多，知識沉澱很好，網上搜尋能解決大部分問題。
   - 有線上的[論壇](https://discourse.gohugo.io/)，維護者也相當活躍，只要提問得當，能及時得到回覆，解決疑難雜症。
   - [官方文件](https://gohugo.io/documentation/) 的內容組織，層次也比較清晰，從筆者個人使用來看，體驗還是很好的。

## 經驗總結

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

#### 使用現成的主題

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

#### 專案結構和內容關係

就像前面介紹的內容管理系統，從結構上了解內容 contents 與模板 layouts 之間的對映關係，適當結合官網文件的[介紹](https://gohugo.io/content-management/organization/)，瞭解這層對映關係後，能方便在後續的開發過程中，讓你的實踐更符合 Hugo 期望的形式來進行，這樣會讓你不論是實現，還是在閱讀 Hugo 文件的時候，事半功倍，易於理解。

#### 個人定製

除了 Hugo 本身的框架、規範及工具能力外，因為網頁的程式碼最終還是離不開 HTML/CSS/Javascript，自定義相關的內容，只要善用提供的規則（如各個模板的引用，組合），就能在各個模板入口引入你想自己控制的程式碼部分，為你自己的站點添磚加瓦。結合我們自身的實踐，比如第三方站點外掛的整合（埋點統計，Discourse、ShareThis等等），一些自定義彈窗等動態 js 的新增，所以只要熟悉網頁的常規開發，除了 Hugo 的能力外，你可以做到你以往可做的任何事情。

#### 純靜態站點

Hugo 打包構建後輸出的是一個純靜態的資源包，這樣地好處就是你可以將你的站點部署在任何地方，比如使用 GitHub 免費的 [Pages](https://pages.github.com/)，又或者是隨便放在 oss 源中，沒有維護伺服器，資料庫的煩惱。純靜態資源部署很便捷，以 Hugo 為例，他的路由適合檔案目錄相關的，我們的站點有中英文兩個語言版本，開發時都放在一個專案中進行維護共享模板，在構建部署時，會根據語言打成不同的資源包，分別發到不同的國內外 Web 容器，以此最佳化訪問體驗。

## 最後

以上便是筆者使用 Hugo 框架搭建公司 [Nebula Graph 官網](https://nebula-graph.com.cn/) 的一些實踐心得，希望給有快速建站需求的朋友提供一些思路和參考，我們的站點是基於已有主題二次開發，更多細節感興趣的朋友也可以看看我們放在 GitHub 的[源站倉庫](https://github.com/vesoft-inc/nebula-website)。

也歡迎大家來了解我們的 [Nebula Graph 圖資料庫產品](https://github.com/vesoft-inc/nebula) 或者前往官方論壇：[https://discuss.nebula-graph.com.cn/](https://discuss.nebula-graph.com.cn/) 的 `建議反饋` 分類下提建議 ?；加入 Nebula Graph 交流群，請聯絡 Nebula Graph 官方小助手微訊號：[NebulaGraphbot](https://www-cdn.nebula-graph.com.cn/nebula-blog/nbot.png)

> 作者有話說：Hi，我是 Jerry，是圖資料 Nebula Graph 前端工程師，在前端平臺工具開發及工程化方面有些小心得，希望寫的經驗分享能給大家帶來幫助，如有不當之處也希望能幫忙糾正，謝謝~

Hugo 建站經驗之談

相關文章