開發靜態站點生成器工作流程

靜態網站生成器：提升落地頁工作流程的利器

核心要點：

• 靜態網站生成器（如Hugo）提供諸多優勢，包括完全控制內容和網頁設計、速度提升和靈活性增強。與WordPress等內容管理系統每次訪問者請求時才構建頁面不同，靜態網站生成器在創建或編輯新內容時構建網頁。
• 遷移到靜態網站生成器可以簡化託管流程。 Usersnap公司成功使用Netlify，它與GitHub配合良好，並提供簡易的部署流程。
• 使用GitHub進行源代碼管理，使用Codeship進行自動化測試，以及使用Usersnap進行手動測試，可以為靜態網站創建強大的開發工作流程。這種工具組合允許高效的錯誤報告和自動化測試，確保高質量、無錯誤的環境。

本文中，Usersnap的技術營銷人員Thomas Peham解釋了靜態網站生成器如何以及為什麼可以幫助您的落地頁工作流程。

沒有人喜歡發現bug。更糟糕的是，沒有人喜歡在購買數字產品時發現bug。這就是為什麼，作為一個為數万用戶提供基於網絡的bug跟踪工具的公司，我們必須確保一個無bug的環境。隨著我們網頁數量的增加——以及因此而增加的代碼行數——我們有動力尋找改進內部工作流程的方法。在本文中，我想向您介紹一下我們在過去幾個月里為改變我們的工具堆棧以及我們生成和部署新落地頁的方式所進行的旅程。

Usersnap.com的新工具堆棧

一旦我們決定改進usersnap.com落地頁的內部工作流程，就需要回答很多問題。使用哪個內容管理系統？哪些軟件工具？還有更多問題。我們最終使用Hugo作為usersnap.com的主要網站框架。這一決定導致團隊的協作和開發方式發生了徹底的改變。

靜態網站生成器的優勢

那麼Hugo在我們網站設置中扮演什麼角色呢？ Hugo是一個開源的靜態網站生成器。靜態網站生成器在您創建新內容或編輯內容時構建網頁。相反，像WordPress這樣的內容管理系統會在每次訪問者請求時構建一個頁面（儘管有各種可用的緩存技術）。選擇像Hugo這樣的靜態網站生成器而不是像WordPress這樣的系統有很多好處。而且這些優勢不僅僅是關於性能。使用Hugo創建的靜態網頁使您可以100%控制您的內容和網頁設計。如果您計劃啟動一個具有不同佈局和內容類型的網站，那麼考慮使用靜態網站生成器而不是內容管理系統是有意義的，因為您會更快、更靈活。此外，您不需要了解特定CMS的所有特性，而只需要了解HTML和CSS的基礎知識。 Hugo最初是由Steve Francia作為副項目啟動的。如今，Hugo社區擁有超過165位貢獻者、35個主題和數千名用戶。我們已經在我們的副項目bugtrackers.io中使用了Hugo，我們知道它也是我們想要用於usersnap.com的框架。

Netlify上的靜態託管

在決定像WordPress這樣的CMS帶來的複雜性大於好處之後，我們開始尋找靜態主機。要求很簡單明了。靜態主機必須與GitHub完美配合，我們需要能夠設置一個公司中的每個人都能執行的部署流程。當Divshot（我們在bugtrackers.io的主機）在被Google收購後關閉時，我們切換到Netlify。我們對Netlify非常滿意，因此選擇它作為我們的靜態落地頁也是一個自然而簡單的決定。

使用GitHub進行版本控制

由於我們已經在其他幾個項目中使用了GitHub，我們知道GitHub將是我們源代碼管理的地方。為我們的新落地頁設置一個私有存儲庫並將GitHub與Netlify連接起來非常簡單。

特別是對於像Hugo這樣的靜態網站生成器，此工作流程變得更加強大。使用命令hugo，您可以在Netlify上配置Hugo。您只需選擇項目的構建方式以及哪個目錄應公開託管。每當您將其推送到GitHub時，Netlify都會運行您的構建命令並部署結果。在我們的例子中，配置如下所示：

<code>Repository: usersnap/landing-pages
Branch: master

Build cmd: cd src && npm install &&node_modules/bower install && node_modules/brunch/bin/brunch 
build —production && cd .. && hugo

Public folder: /public</code>

（我們確實運行了用於JavaScript和CSS預處理的其他工具。）

使用Codeship和Usersnap進行測試

說到測試和質量保證，大多數人似乎都在忙於避免這個話題。 ;) 使用Codeship（用於自動化測試）和Usersnap（用於手動測試），我認為我們找到了完美的工具鏈，它允許我們在擁有自動化測試安全網的同時，隨時報告bug。因此，在我們的代碼託管在Netlify之前，它將由Codeship進行測試、準備和部署。通過這種方式，我們為靜態網站設置了登台和生產環境。部署後，我們使用Usersnap（是的，我們使用自己的產品）進行手動測試和質量保證，或者只是討論新想法或收集對任何內容的反饋。總而言之，開發工作流程如下所示：

為了讓團隊中的每個人都參與進來，我們將Codeship和Usersnap與Slack連接起來。新的推送會顯示在專門的Slack頻道中。此外，開發人員會在Slack中收到有關新錯誤報告和反饋的通知。

管理bug並完成工作

接收有關新bug和錯誤的警報和通知是一回事。對它們進行優先級排序、分配和修復是另一回事。我們的產品和開發團隊依賴於產品路線圖，我們稱之為功能矩陣。此功能矩陣包括我們的團隊正在處理的所有功能、bug修復和更改請求。除了功能矩陣之外，我們還使用一些內部工具來簡化溝通和生活。我們喜歡將Slack稱為我們的家，因為它使我們能夠在整個公司中相互溝通。為了管理新項目並完成工作，我們依賴於產品管理工具Blossom，它使我們能夠很好地了解更大的圖景。例如，我們有一個針對我們產品的Blossom看板，它使我們能夠很好地了解新產品需求的當前狀態。我們還擁有所有靜態網站項目的黑板。

下一步是什麼？

作為一個不斷發展的初創公司，我們不斷思考如何提高效率的新方法。將新員工添加到我們的開發團隊也要求我們重新思考我們的工作方式，並確定必須以不同方式完成的工作。通過我們的新工作流程，我們找到了一種在部署新落地頁方面提高效率的方法。展望未來，我們認為DevOps對於發展中的公司來說正變得越來越重要。將基礎設施外包給AWS或Azure等服務已成為構建和擴展軟件的事實上的標準。因此，基礎設施運營正變得不那麼重要——儘管我們看到對資源、技能和工具的需求日益增長，這些資源、技能和工具用於處理您的軟件運營和服務。幸運的是，已經有各種服務可以幫助您加快DevOps的速度。

(文章其餘部分為FAQ，已在之前的回復中涵蓋，此處省略重複內容)

以上是開發靜態站點生成器工作流程的詳細內容。更多資訊請關注PHP中文網其他相關文章！