靜態(tài)網(wǎng)站生成器：提升落地頁工作流程的利器

核心要點：

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

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

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

Usersnap.com的新工具堆棧

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

靜態(tài)網(wǎng)站生成器的優(yōu)勢

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

Netlify上的靜態(tài)託管

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

使用GitHub進(jìn)行版本控制

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

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

<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預(yù)處理的其他工具。）

使用Codeship和Usersnap進(jìn)行測試

說到測試和質(zhì)量保證，大多數(shù)人似乎都在忙於避免這個話題。 ;) 使用Codeship（用於自動化測試）和Usersnap（用於手動測試），我認(rèn)為我們找到了完美的工具鏈，它允許我們在擁有自動化測試安全網(wǎng)的同時，隨時報告bug。因此，在我們的代碼託管在Netlify之前，它將由Codeship進(jìn)行測試、準(zhǔn)備和部署。通過這種方式，我們?yōu)殪o態(tài)網(wǎng)站設(shè)置了登臺和生產(chǎn)環(huán)境。部署後，我們使用Usersnap（是的，我們使用自己的產(chǎn)品）進(jìn)行手動測試和質(zhì)量保證，或者只是討論新想法或收集對任何內(nèi)容的反饋?？偠灾?，開發(fā)工作流程如下所示：

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

管理bug並完成工作

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

下一步是什麼？

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

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

以上是開發(fā)靜態(tài)站點生成器工作流程的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！