使用 GitHub Pages 和 Cloudflare 的無限規模和免費虛擬主機

我有一個秘密可以為我的客戶節省大量資金，保證他們的網站安全，並且有內置備份。

秘訣：我將他們的網站設為靜態。 然後，我使用 GitHub 存儲和託管它，並使用 Cloudflare 通過 HTTPS 為其提供服務，並使其快速運行。 我的客戶只為他們的域名付費，但他們得到的比他們討價還價的要多得多。

為什麼是靜態內容？

靜態站點非常快，因為不涉及服務器處理時間。 此外，通過在 git 存儲庫中提交靜態資產的代碼庫，回滾更改只需恢復到先前的提交即可。 備份是一個git push ，您基本上從緩存中為您的整個網站提供服務，這意味著您的服務器幾乎不需要再次處理請求。

構建複雜的用戶界面？

隨著前端框架的出現，比如 React 和它的同類，你可以只用 HTML/CSS 和 JavaScript 來創造神奇的體驗。 不過，您必須將後端邏輯與前端分開，但即使是 Ruby on Rails 現在也帶有 API 模式。

每當我簽約建立網站時，我都會考慮靜態網站是否足以滿足我客戶的需求，並且在很多情況下確實如此。

你想知道我想到了什麼樣的用例嗎？ 偉大的！ 讓我們討論一些您可能需要考慮靜態內容的情況，並解釋這種方法如何可以節省您和您的客戶的時間。

宣傳冊網站

Brochureware 網站旨在提供有關企業的信息，並且在其整個生命週期中不會發生重大變化。 對於這樣的網站來說，動態應用程序顯然是矯枉過正的，而且由於這些網站多年來無人維護，幾乎沒有收到任何更新，它們通常很容易成為黑客攻擊的目標。

靜態 HTML 模板比 CMS 模板便宜得多，而且將來更容易調整。 要求更新此類站點的開發人員不需要有關特定 CMS 的專業知識。 通常，我總是為小冊子網站製作靜態網站。

獎勵：小企業喜歡不支付經常性的每月託管費用。 誠然，託管成本並不高，但客戶只需支付域名以外的任何費用，這很棒。

單頁應用

您是否正在展示一個依賴現代前端框架的精彩、酷炫的新應用程序？

您的應用程序已經大部分是靜態的。 採取一些額外的步驟將任何服務器端邏輯隔離到一個單獨的應用程序中，並充分利用 Cloudflare 的緩存為您的應用程序提供服務。

您的申請將隨時可用。

博客

這是一個艱難的銷售。 很難說服人們靜態站點可以用於博客，但請讀出來——我還沒有走深路。

博客只不過是使用模板呈現的內容。 您根本不需要一個成熟的應用程序來解析每個請求並呈現一個新頁面。 靜態站點非常適合此用例。

考慮傑基爾。 你給它 Liquid 模板和 Markdown 內容，它會將它們組合成一個靜態網站。 無需即時處理，您的博客突然感覺速度明顯加快。

這個工作流程特別有用，因為 GitHub 頁面支持 Jekyll 構建。 突然之間，可以通過拉取請求貢獻博客文章，並且您的所有內容都存儲在版本控制中。 非開發人員仍然可以通過 Stackedit 發布他們的帖子，在 Markdown 中貢獻帖子。

事實上，我現在正在使用 Stackedit 撰寫這篇文章！

此外，如果您想對您的博客文章發表評論，Disqus 通過插入一段 JavaScript 為您提供強大的評論系統。

您正在閱讀的這個頁面也使用了 Disqus。

GitHub 頁面

GitHub Pages 是 GitHub 對項目頁面的回應，它允許您直接從您的存儲庫提供任何靜態網站。 由於 GitHub 頁面支持自定義域，您可以在 GitHub 頁面上免費託管靜態網站，直接從 Git 進行部署。

部署到 GitHub 頁面。

廢話不多說，讓我們來看看它的實際效果！

我已經著手製作了一個單頁 React 應用程序，該應用程序從公共 API 獲取並顯示巴基斯坦盧比的當前匯率。 讓我們將其部署到 GitHub Pages。

首先，讓我們創建一個新的 GitHub 存儲庫。

GitHub 頁面來自一個名為gh-pages的分支，所以讓我們為我的項目創建一個。

 $ git checkout -b gh-pages Switched to a new branch 'gh-pages'

讓我們把網站推上去：

 $ git remote add origin [email protected]:amingilani/price-check.git $ git push -u origin gh-pages Counting objects: 27, done. Delta compression using up to 8 threads. Compressing objects: 100% (25/25), done. Writing objects: 100% (27/27), 28.67 KiB | 0 bytes/s, done. Total 27 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To github.com:amingilani/price-check.git * [new branch] gh-pages -> gh-pages

我們完成了！ 此時，該網站將在https://amingilani.github.io/price-check上提供免費 SSL：

需要注意的重要事項：

• GitHub pages 在項目的gh-pages分支中提供index.html文件
• 該網站在USERNAME.github.io/REPOSITORY-NAME提供服務

自定義域名。

在 GitHub 上提供網站服務很好，但任何體面的網站都需要自定義域名。 幸運的是，GitHub 允許您將自己的域帶入聚會！

首先，讓我們創建一個特殊的CNAME文件並將我們的域名放在那裡。 這將使 GitHub 知道要將哪個域名路由到存儲庫。

 $ echo 'pricecheck.gilani.me' > CNAME $ git add . $ git commit -m 'Add a custom domain' ... $ git push ...

其次，讓我們將子域的CNAME指向 GitHub 在USERNAME.github.io的 DNS：

注意：請勿將其用於頂級域！ 將CNAME記錄添加到您的域的根目錄將禁用您的MX和TXT記錄。 僅將其用於您的子域。 Apex 域將在後面討論。

此時，我們的網站應該在 HTTP 上的自定義域上運行：

需要注意的重要事項：

• 默認*.github.io域通過 HTTPS 提供服務。
• 我們的自定義域名是通過不安全的 HTTP 提供的。
• 不要在您的頂級域上使用CNAME記錄，除非您想殺死您的電子郵件。

GitHub 頁面的限制：

• 存儲庫的文件大小必須小於 1 GB。
• 網站的文件大小必須小於 1 GB。
• 每月帶寬限制為 100 GB。 我們稍後會繞過這個。

使用頂級域作為您的自定義域

解決此限制的最簡單方法是使用www作為您的子域，並將所有 HTTP 流量從頂點重定向到www 。 在我的示例中，我會將gilani.me重定向到www.gilani.me ，它指向我的靜態站點，但我不喜歡以簡單的方式做事。

如果您真的想使用頂級域，請檢查您的 DNS 提供商是否允許您設置ANAME記錄。 這些（簡化）介於CNAME記錄之間，因為它們允許您指向域和A記錄，因為它們不會使同一區域上的其他記錄無效。

沒有ANAME ？ 最後一個選項是更改為支持此功能的 DNS 提供商：輸入 Cloudflare。 Cloudflare 在頂點域上提供CNAME扁平化，這相當於ANAME記錄。 最好立即進行切換，因為我們將在下一節中介紹 Cloudflare。

TLDR ：切換到 Cloudflare 的免費 DNS 並在您的頂級域上設置CNAME 。 他們用他們的CNAME做了一些特別的事情，使它工作。

SSL 和 Cloudflare

歡迎來到後斯諾登時代。 我們對政府批准的窺探和黑客攻擊的所有最嚴重的恐懼都得到了證實，全世界都在爭先恐後地保護傳輸中和靜止的數據。

作為現代 Web 管理員，您應該至少在您的網站上提供 SSL，並且沒有混合內容。

已經到了谷歌瀏覽器將普通 HTTPS 網站標記為不安全的地步，而谷歌搜索開始在排名中更青睞 HTTPS 網站。 稍後我們將討論使您的前端安全的更多策略，但現在，我們將僅介紹 SSL。

幸運的是，我們現在有了 Let's Encrypt。

它是一個非盈利且完全自動化的證書頒發機構 (CA)，可讓您以編程方式為您控制的任何域頒發短期 90 天 SSL 證書。 使用起來輕而易舉； 它是開源的； 該項目得到了眾多公司的支持，包括 Mozilla 和電子前沿基金會。

充分利用 Cloudflare

Cloudflare 是一項 DNS、CDN 和 DDoS 保護服務。

它緩存您的網站，並將其從地理位置附近的服務器提供給用戶，從而使您的網站更快。 它還有一個額外的好處，就是讓你保持在 GitHub 的 100GB 帶寬限制之下，因為即使你的網站變得非常流行，大多數請求也會到達緩存，而永遠不會到達服務器。

最重要的是，Cloudflare 提供了一項名為 Universal SSL 的服務，他們會從他們的 CA 合作夥伴那裡向您頒發免費的 SSL 證書，這樣您就可以免費獲得 HTTPS……永遠。

為什麼選擇 Cloudflare？

我知道你在想什麼：Gilani，你剛剛告訴我 Let's Encrypt 有多棒。 為什麼要談論 Cloudflare？ 好吧，這一切都歸結為簡單。

作為一項腦力練習，想像一下在世界各地設置多個 Nginx 緩存和反向代理，為它們提供所有有效的 SSL 證書並從最近的位置為用戶提供網頁服務。

即使原始服務器沒有 SSL 證書，這也會導致您的網站通過 SSL 提供服務，儘管 Cloudflare 為您提供了特殊的自簽名證書，您可以將其放在原始服務器上以保護與 Cloudflare 服務器的連接。 這就是 Cloudflare 為您提供的免費計劃，您甚至不必每 90 天更新一次證書。

作為一名自由職業者，我得到了希望盡快為他們的業務建立和運行網站的客戶。 他們不了解也不關心安全問題、困擾現代網絡或傳輸過程中的加密。 一些客戶很難理解域名的概念，當他們不得不支付 15 美元的年費“只是為了讓我的網站正常運行”時，他們會覺得很煩人。 因此，請嘗試向他們解釋為什麼他們必須支付一組反向代理來保護他們在免費託管本身上運行的網站。

設置 Cloudflare SSL

讓我們再弄髒手。 首先要做的是，切換到通過 Cloudflare 路由所有流量：

接下來，在 Crypto 下，將 SSL 級別設置為“Full”。

強制“自動 HTTPS 重寫”以終止混合內容警告。

此時，我們的網站將通過 HTTP 和 HTTPS 運行。 讓我們為我們域中的所有內容強制使用 HTTPS。

全做完了。 我們的網站應始終通過 HTTPS 加載，在 Chrome 中具有綠色“安全”評級。

最後的話和安全注意事項

有幾件事我沒有在上面討論，我想花點時間澄清幾點。

精明的人會指出，這種設置存在一些明顯的安全問題，即沒有安全的 HTTP 標頭，例如：

• Content-Security-Policy ：從主機白名單加載腳本和資產，並且可以禁止內聯 js。
• X-Frame-Options ：禁止在 iframe 中加載您的網站。

你是對的。 GitHub 頁面甚至 Cloudflare都不允許您自定義 HTTP 標頭。 但是，您可以使用 HTML meta標記設置 CSP。

只需將其插入您的網頁：

 <meta http-equiv="Content-Security-Policy" content="default-src https:">

然而，目前還沒有實用的方法在 GitHub 頁面上設置X-Frame-Options標頭，這意味著攻擊者可以將您的網頁加載到特製的iframe中並發起 XSS 攻擊。 但是，如果您是專心的，則可以通過要求用戶在每個敏感操作時確認他們的密碼或 2FA 令牌，或者在每個經過身份驗證的請求時傳遞一個 CSRF 令牌來解決此問題。

一些人主要擔心的是，通過使用 GitHub 上的免費公共存儲庫，您的網站和源代碼可供任何想要分叉或下載它的人使用。 所以我認為這裡的擔憂是錯誤的。

靜態內容不是源代碼，因為它在提供給用戶之前沒有被編譯或處理為腳本。 如果他們要運行指向您網站的網絡爬蟲，您的用戶將獲得完全相同的網站靜態副本。 雖然將代碼託管在 GitHub 存儲庫中確實可以更輕鬆地下載您網站的副本，但它不會公開任何尚未公開的內容。

縮放，無限縮放

本文中提出的想法不僅限於小型應用程序的免費 Web 託管。

您可以基於現代 JavaScript 框架構建前端層，將其連接到大型基於雲的後端即服務 (BaaS)，如 Firebase，並創建複雜的應用程序，而無需擔心服務器、正常運行時間、或任何其他基礎設施相關問題。

製作一個新的令人興奮的基於網絡的遊戲？！ 查看 GameSparks，一切順利。

摘要、自白和鏈接

在這篇文章中，我讓它看起來好像我手動將我的 React 應用程序發佈到了gh-pages 。 我沒有做這樣的事情。 我在master上工作，到了部署的時候，我運行了npm run deploy ，它啟動了一個構建腳本並將構建推送到gh-pages 。 請查看我的存儲庫的master分支以了解它是如何工作的。

外賣

優點：

• 即時部署
• 輕鬆協作
• 安全的託管環境

注意事項：

• 無法訪問 HTTP 標頭
• 輕鬆下載網站副本
• 需要 GitHub 知識
• 取決於技術供應商

鏈接：

• 您可以在 amingilani/price-check 找到我的應用程序的源代碼
• 這個應用程序在 pricecheck.gilani.me 上發布，應該可以無限期使用。