通過亞馬遜 S3 和 Cloudflare 免費托管網(wǎng)站

原文：https://medium.com/better-programming/how-to-host-your-personal-website-for-free-3101c4ab2e49

作者：Joey Colon

譯者：ZhichengChen

校對者：Miya

在過去的五年左右時間里，Web變化很大，曾經(jīng)dev-op實踐被奉為圭臬，如今卻略顯過時。

發(fā)布網(wǎng)站到線上，過去的標(biāo)準(zhǔn)做法是給服務(wù)商支付費用，比如NameCheap或者GoDaddy?，F(xiàn)在虛擬主機(jī)仍然是一個不錯的選擇，不過已經(jīng)有一些更簡便的方法。接下來會介紹我免費部署個人網(wǎng)站到線上的方法。

開始的開始

需要準(zhǔn)備網(wǎng)站的靜態(tài)文件（HTML/CSS/JS）。這個教程講述的是托管靜態(tài)站。

還需要一個域名。域名價格一般是一年15美元左右，不同的頂級域名價格不同。如果你想要打造個人品牌，那么購買一個域名還是很有必要的。

此外還需要在Cloudflare和AWS注冊賬號。如果沒用過這兩個服務(wù)，沒關(guān)系--我會一步步講解每個平臺的操作步驟。干就完了。

設(shè)置AWS S3文件桶

登錄AWS控制臺，進(jìn)入S3管理控制臺。

點擊創(chuàng)建存儲桶按鈕，彈出一個存儲桶信息表單的對話框。

在“存儲桶名稱”欄，填寫完整的域名。在這個教程里，我會使用tutorial.joey.dev?！皡^(qū)域”欄，選擇離我比較近的州，US East(N.Virginia)。當(dāng)然你可以選擇離你比較近的地區(qū)。選好后點擊下一步。

在步驟二，直接點擊下一步。在步驟三，取消阻止所有公共訪問選項，我們也用不到S3日志傳輸服務(wù)，直接點擊下一步。

在步驟四，直接單擊創(chuàng)建存儲桶按鈕。在S3管理控制臺會看見新創(chuàng)建的存儲桶。點擊新創(chuàng)建的存儲桶，會出現(xiàn)下面的界面：

點擊屏幕頂部的屬性選項卡，然后選擇第一行的靜態(tài)網(wǎng)站托管卡片。選中使用此存儲桶托管網(wǎng)站選項。索引文檔，直接填寫idnex.html然后點擊保存。

留意一下卡片頂部終端節(jié)點的值，記下來。

漂亮！最后一步就是上傳網(wǎng)站文件到存儲桶里了。點擊概述標(biāo)簽頁然后點擊上傳按鈕，出現(xiàn)下面的彈窗，開始上傳吧。

在選擇上傳的文件后，點擊下一步按鈕。在第二步，點擊管理公共權(quán)限下拉框，選擇為此對象授予公共讀取訪問權(quán)限選項。點擊下一步。

第三步，所有選項都不用更改，直接點擊下一步。在第四步點擊上傳按鈕。上傳完成后，通過訪問終端節(jié)點地址就可以訪問網(wǎng)站了。

厲害了，接下來設(shè)置Cloudflare。

這里假設(shè)你是第一次使用Cloudflare服務(wù)，Cloudflare并沒有綁定任何域名。在Cloudflare控制臺，點擊Add a Site按鈕，輸入網(wǎng)站地址，點擊Next。再點擊Next，選擇Free plan。

進(jìn)入DNS查詢結(jié)果頁面后，刪除掃描到的所有記錄，結(jié)果看起來如下：

這里需要兩個不同的CNAME記錄。

第一個記錄，name，輸入www，Domain name，輸入不包含http://的域名，如tutorial.joey.dev。

第二個記錄，name輸入域名，Domain name，輸入我們之前提到的S3存儲桶的終端節(jié)點。確保添加這些記錄的時候橙色的云是可用的。

Cloudflare DNS記錄配置

對照著上圖，如果確定設(shè)置沒有問題，點擊Continue?，F(xiàn)在需要把你的域名的nameservers從域名注冊商指向Cloudflare的nameservers。這涉及到域名注冊商網(wǎng)站的一些操作，可以閱讀一下相關(guān)的文檔。

修改完nameservers，還需要設(shè)置一些頁面規(guī)則。在這之前，先確保SSL證書設(shè)置正確。在Cloudflare控制臺，點擊域名進(jìn)入到域名控制臺，點擊Crypto選項卡確保SSL的設(shè)置是Flexible。

好事將近。點擊Page Rules選項卡。這里需要創(chuàng)建兩個頁面規(guī)則，把非SSL的流量跳轉(zhuǎn)到SSL，把www.joey.dev跳轉(zhuǎn)到更簡短的joey.dev，在這里合并成了一條規(guī)則（按需配置）。

至此，.dev域名自動跳轉(zhuǎn)到了SSL，當(dāng)有人訪問www.domain.dev時，也會跳轉(zhuǎn)，一箭雙雕。

如果你的頂級域名不是.dev，需要額外配置下面的規(guī)則：

訪問域名。哈哈哈，現(xiàn)在可以訪問SSL加密版部署在AWS S3存儲桶集成cdn的網(wǎng)站啦。

Happy coding!