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

核心要點(diǎn)：

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

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

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

Usersnap.com的新工具堆棧

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

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

那么Hugo在我們網(wǎng)站設(shè)置中扮演什么角色呢？Hugo是一個(gè)開源的靜態(tài)網(wǎng)站生成器。靜態(tài)網(wǎng)站生成器在您創(chuàng)建新內(nèi)容或編輯內(nèi)容時(shí)構(gòu)建網(wǎng)頁。相反，像WordPress這樣的內(nèi)容管理系統(tǒng)會(huì)在每次訪問者請(qǐng)求時(shí)構(gòu)建一個(gè)頁面（盡管有各種可用的緩存技術(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è)計(jì)。如果您計(jì)劃啟動(dòng)一個(gè)具有不同布局和內(nèi)容類型的網(wǎng)站，那么考慮使用靜態(tài)網(wǎng)站生成器而不是內(nèi)容管理系統(tǒng)是有意義的，因?yàn)槟鷷?huì)更快、更靈活。此外，您不需要了解特定CMS的所有特性，而只需要了解HTML和CSS的基礎(chǔ)知識(shí)。Hugo最初是由Steve Francia作為副項(xiàng)目啟動(dòng)的。如今，Hugo社區(qū)擁有超過165位貢獻(xiàn)者、35個(gè)主題和數(shù)千名用戶。我們已經(jīng)在我們的副項(xiàng)目bugtrackers.io中使用了Hugo，我們知道它也是我們想要用于usersnap.com的框架。

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

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

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

由于我們已經(jīng)在其他幾個(gè)項(xiàng)目中使用了GitHub，我們知道GitHub將是我們?cè)创a管理的地方。為我們的新落地頁設(shè)置一個(gè)私有存儲(chǔ)庫并將GitHub與Netlify連接起來非常簡單。

特別是對(duì)于像Hugo這樣的靜態(tài)網(wǎng)站生成器，此工作流程變得更加強(qiáng)大。使用命令hugo，您可以在Netlify上配置Hugo。您只需選擇項(xiàng)目的構(gòu)建方式以及哪個(gè)目錄應(yīng)公開托管。每當(dāng)您將其推送到GitHub時(shí)，Netlify都會(huì)運(yùn)行您的構(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>

（我們確實(shí)運(yùn)行了用于JavaScript和CSS預(yù)處理的其他工具。）

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

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

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

管理bug并完成工作

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

下一步是什么？

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

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

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