本文最初發(fā)布于 Hacker Noon 博客，經(jīng)原作者授權(quán)由 InfoQ 中文站翻譯并分享。
在大多數(shù)情況下， JeremyMorgan.com 網(wǎng)站的首頁在世界各地的加載時間都不到一秒。
這個網(wǎng)站的速度之前就很快， 3 秒鐘就可以加載完成，但現(xiàn)在更快了。我將在本文中披露我是怎么設(shè)置的。
我選擇使用 Hugo 構(gòu)建這個網(wǎng)站，并托管在 Netlify 上。
之前的網(wǎng)站設(shè)置
大約在 2011 年的某個時候，我決定從 wordPress/ target=_blank class=infotextkey>WordPress 轉(zhuǎn)移到靜態(tài)站點生成器。理由很簡單：我寫好一篇文章，發(fā)表它，之后不會修改太多。這當(dāng)然不足以證明從數(shù)據(jù)庫提供服務(wù)更合理。因此，有一個系統(tǒng)可以為每篇文章生成一個 html 頁面并以靜態(tài)的方式提供出來就夠了。
我決定選用 Octopress ，它在當(dāng)時是一個非常受歡迎的 Jekyll 包裝器，也很好地滿足了我的需求。
僅這一步就大大減少了加載時間。然后，我變得有點沉迷于頁面加載速度，做了很多事情來讓它加載得更快，包括：
- 圖像優(yōu)化（我用過的一些工具）
- 簡化 css 和 JAVAScript
- 對某些資產(chǎn)使用 CDN
我對這種設(shè)置當(dāng)然很滿意。多年來，我的工作流程就是新建一篇文章，在筆記本電腦或臺式機上生成它，然后將文件 SCP 到運行 Nginx 的 FreeBSD 服務(wù)器上。這種方式持續(xù)了很長一段時間。回顧過去，那是一個糟糕的工作流程，但我兩個月才寫一篇文章，所以這樣也沒什么問題。
我花了很多年來定制我的 Octopress 安裝，并為項目貢獻(xiàn)代碼和補丁。
問題成堆
雖然一開始我很喜歡 Octopress，也很欣賞 Brandon Mathis 等人的工作，但 Octopress 開始變得讓人非常痛苦。
對我來說，最大的問題不是 Octopress 本身，而是 Ruby 依賴。這里就不介紹太多細(xì)節(jié)了，但它變得非常難以管理。Octopress 需要比較老的 gems 來完成操作，因此，隨著 Ruby 以及某些 gems 的發(fā)展，維護一個可構(gòu)建的 Octopress 安裝變得很有挑戰(zhàn)性。
我無法再從我的筆記本電腦進行構(gòu)建，因為我需要維護所有舊軟件。我用舊軟件搭建了一個 linux 服務(wù)器，并用它來完成構(gòu)建。然后，把這些東西轉(zhuǎn)移到一個容器中，這樣就可以維護 Ruby 以及那些 gems 的舊版本用來生成輸出。例如，運行的 Ruby 版本不能高于 1.9.3 。
所以，我?guī)啄昵熬烷_始研究解決方案，但一直沒有時間去切換。幾年來，我的工作流程是這樣的：
還不錯，但這個過程有個致命缺點，就是 Octopress 構(gòu)建，我知道這一點。為一個簡單的構(gòu)建步驟維護所有這些舊軟件很容易，但前提是我不碰任何東西。
上個月，我用于構(gòu)建 Octopress 鏡像的服務(wù)器壞了。所以我啟用了另一臺服務(wù)器，安裝了 Docker 和容器，但它無法工作。我試了我能想到的所有方法，事實很清楚：
我可以花數(shù)小時用這些古老的軟件構(gòu)建出另一個容器來讓 Octopress 運行起來，或者我能把時間花在更換到另一個 CMS 上。
因此，我開始認(rèn)真評估另一個靜態(tài)站點生成器的選項。
為什么選擇 Hugo
我花了很多時間來評估不同選項，歸結(jié)起來就是以下幾個：
- Hugo （Go）
- Gatsby （JavaScript）
- Pelican （Python）
這些都是靜態(tài)站點生成器，它們都可以很好地解決我的問題。我了解 Go、JavaScript 和 Python，所以我可以修改一些東西。這只是一個普通的博客，它只是一個目錄結(jié)構(gòu)下的一組文件。這些方法都是可行的。但是，我的要求是什么呢？
- 靜態(tài)文件生成器
- 必須可以快速構(gòu)建
- 必須容易定制化
- 必須可移植（mac、OSX、Linux）
最后一點可能看起來有點傻，但我永遠(yuǎn)不知道我將在什么平臺上寫作。我可能使用 Mac、windows 或 Linux，這取決于所寫的內(nèi)容。我希望先在本地構(gòu)建并查看頁面，然后再推到開發(fā)環(huán)境，最后推到生產(chǎn)環(huán)境。這對我來說很重要。不過，經(jīng)過大量評估后，我發(fā)現(xiàn)：
所有這些靜態(tài)文件生成器都滿足這些需求。
因此，這讓選擇變得困難起來。我有一個 JeremyMorgan.com 版本，在所有的平臺上使用這三個生成器運行都沒有問題。我可以自定義一些東西，它們都能快速地構(gòu)建好頁面。但我必須選擇一個。
我最終選擇了 Hugo ，因為我害怕陷入另一個依賴地獄。Gatsby 很酷，也很強大，但對我所做的事情來說似乎太復(fù)雜。它在 JavaScript 生態(tài)系統(tǒng)中也有大量的依賴，眾所周知，JavaScript 生態(tài)系統(tǒng)有時會突發(fā)奇想做出破壞性的更改。
Pelican 依賴于 Python 生態(tài)系統(tǒng)，而 Python 生態(tài)系統(tǒng)不那么古怪，所以 Pelican 排第二位。而 Hugo 是從可執(zhí)行文件構(gòu)建的。因此，即使它被放棄或依賴關(guān)系被破壞，我也總是可以使用可執(zhí)行文件來生成網(wǎng)站，直到我找到一個替代方案。
這就是我選擇 Hugo 的原因。它有一個簡單的保護層，可以讓你免受依賴關(guān)系被破壞的影響。并不是每個人都關(guān)心破壞性更改和向后兼容性。項目被放棄，這是使用開源軟件的一部分代價。Hugo 簡單、可移植，而且是用 Golang 編寫的，所以如果它被拋棄，我可以 fork 或修改它。
為什么選擇 Netlify
下一個問題是在哪里托管它。當(dāng)服務(wù)器崩潰時，我決定把靜態(tài)文件轉(zhuǎn)移到一個Amazon Lightsail設(shè)置中。這個過程超級簡單，而且非常快，我知道，另找一個托管服務(wù)器不會更好。
幾乎沒有理由在 2020 年建立一個完整的 Linux 服務(wù)器來托管一個靜態(tài)網(wǎng)站。
我對于托管設(shè)置的要求如下：
- 必須快
- 必須安全
- 必須能輕松部署
因此，我考慮了以下選項：
- 安裝了 Nginx 的另一臺 Linux/FreeBSD 服務(wù)器
- Azure Windows VM with IIS
- AWS Amplify 設(shè)置
- Netlify
我開始準(zhǔn)備服務(wù)器并進行測試。我發(fā)現(xiàn)，無論如何優(yōu)化，托管的 Web 服務(wù)器都無法跟 AWS 或 Netlify 的速度相比。這部分是由于邊緣服務(wù)器。我在以下地點測試速度：
- 波特蘭，俄勒岡州
- 杜勒斯，弗吉尼亞州
- 奧蘭多，佛羅里達(dá)州
- 達(dá)拉斯，德克薩斯州
- 舊金山，加利福尼亞
- 圣保羅，巴西
- 倫敦，英國
- 玫瑰山，毛里求斯
我在世界各地做了抽樣測試，但這些是我最關(guān)注的城市。我想看看，所有這些地方中哪里最快。我選擇了一個有很多文字和圖片的頁面。結(jié)果讓我大吃一驚。
托管的 FreeBSD 服務(wù)器和 IIS 服務(wù)器速度很快，但在我離開美國后，與 Netlify 和 AWS 就不在一個級別了。我希望所有的網(wǎng)站訪問者都能快速瀏覽，而不僅僅是我身邊的人。這是我重點考慮的一個因素。
比速度，Netlify 幾乎在每個地區(qū)都是贏家。
經(jīng)過一天中不同時段的長時間測試，Netlify 勝出，AWS Amplify 與之相近。如果我在 AWS 的優(yōu)質(zhì)資產(chǎn)上花上一大筆錢，我相信也能取得好成績，但我這個網(wǎng)站不賺錢，所以那不是我的選擇。
看看我的要求，Netlify 全部滿足：
- 速度快（它最快）；
- 安全（據(jù)我所知它是安全的）；
- 工作流異常簡單。
我將我的 Github 庫連接到 Netlify。我可以提交到任何分支來存儲更改。我能提交到一個開發(fā)分支，我可以把它推送到預(yù)覽。當(dāng)我把它推送到主干時，它會自動發(fā)布到 JeremyMorgan.com。
為什么加載速度如此之快？
以下是我的網(wǎng)站加載速度如此之快的原因：
- 它是一個靜態(tài)網(wǎng)站；
- 只有 HTML、JavaScript 和 CSS；
- 它比以前輕量化；
- 使用了最少的 CSS 和元素；
- 經(jīng)過優(yōu)化的 JPEG 圖片；
- 發(fā)布之前會壓縮；
- Netlify 真得很快，在哪都很快。
綜合上面這些因素，我的網(wǎng)站主頁加載時間不到一秒，而帶有大量圖片和文本的頁面大約在三秒內(nèi)加載完畢。超級快。
從用途方面說，網(wǎng)站快速加速非常重要。因為這個網(wǎng)站會提供關(guān)于開發(fā)的教程和信息，我不希望人們等半天才能看到。我希望，即使在互聯(lián)網(wǎng)接入較差的國家，這個網(wǎng)站也能正常使用。無疑，Hugo 和 Netlify 幫我實現(xiàn)了這個目標(biāo)。
