Forestry.io

從一開始就很明確,我們必須選擇靜態網站生成器。靜態網站具有安全性、高效能,並提供 100% 的彈性。在 Forestry.io 我們提供適用於靜態網站生成器所建構網站的內容管理解決方案,所以我們可能會稍微偏頗一些。唯一的問題是:哪一個靜態網站生成器最適合我們?

為何選擇 Hugo?

在我們早期的研究中,我們查看了 Ionic 的 網站 以獲取一些靈感。他們使用 Jekyll 來建立他們的網站。雖然 Jekyll 是一個很棒的生成器,但對於較大網站的構建時間可能會非常緩慢。擁有超過 150 頁和許多自定義配置及插件的網站,我們的網站已經不屬於低流量類別。我們的開發人員希望在處理網站時能夠擁有流暢的體驗,而內容編輯者則需要能夠快速預覽內容。簡而言之,我們需要構建速度非常快。

我們知道 Hugo 很快,但在做出決定之前,我們做了一些額外的基準測試。看到 Hugo 運行時,這是一個完全不同層次的驚奇世界。Hugo 用不到一秒鐘就能構建我們 150 頁的網站!來看看:

                   | EN   
+------------------+-----+
  頁面數           | 141  
  分頁頁面         |   4  
  非頁面檔案       |   0  
  靜態檔案         | 537  
  處理過的圖片     |   0  
  別名             |  60  
  網站地圖         |   1  
  清理過的         |   0  

總計 739 毫秒

事實上,我們非常喜歡 Hugo,以至於我們的巫師 Chris 將他的工作流程公開,我們開始了開源專案 Create-Static-Site。這是一個 簡單的網站啟動方式,只需一行代碼即可設置現代網頁開發工作流程。本質上,它將構建配置作為 JS、CSS 和圖片處理的依賴項。

最後,我們想藉此機會給我們在建構網站時使用的其他驚人工具一些愛。

我們使用了哪些工具?

  • 我們的挪威設計師 Nichlas 愛上了 Sketch。據說它是設計師夢想成真的工具。
  • 有人說我們的主圖 令人著迷。Nichlas 使用 3DS Max 創建了它。
  • Hugo – 當然。
  • Chris 無法想像現代網頁開發沒有 GulpWebpack。我們使用它們來加入額外的構建步驟,如 Browsersync、CSS、JS 和 SVG 優化。
  • 說到加入構建步驟,沒有 CircleCI 的持續部署和自動測試功能,我們的生活會更加困難。
  • 我們忍不住讚美 Algolia。Chris 很喜歡它,甚至寫了一篇教程 如何在 Hugo 靜態網站中實現 Algolia 搜索
  • Cloudinary 可能是將響應式圖片加入網站最簡單的方法。
  • 我們可能會對此有些偏見 - 我們認為 Forestry.io 是一個將乾淨 UI 的內容管理系統加在網站上,而不會干擾開發者體驗的好方法。
  • 我們使用強大的 AWS 進行託管。
  • Formspree.io 管理我們的支持和企業請求。
  • 我們還使用瀏覽器 cookies 和 JS 來定制我們用戶的體驗,讓它更具動態感。