通過(guò)亞馬遜 S3 和 Cloudflare 免費(fèi)托管網(wǎng)站

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

作者：Joey Colon

譯者：ZhichengChen

校對(duì)者：Miya

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

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

開(kāi)始的開(kāi)始

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

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

此外還需要在Cloudflare和AWS注冊(cè)賬號(hào)。如果沒(méi)用過(guò)這兩個(gè)服務(wù)，沒(méi)關(guān)系--我會(huì)一步步講解每個(gè)平臺(tái)的操作步驟。干就完了。

設(shè)置AWS S3文件桶

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

點(diǎn)擊創(chuàng)建存儲(chǔ)桶按鈕，彈出一個(gè)存儲(chǔ)桶信息表單的對(duì)話框。

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

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

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

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

留意一下卡片頂部終端節(jié)點(diǎn)的值，記下來(lái)。

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

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

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

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

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

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

這里需要兩個(gè)不同的CNAME記錄。

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

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

Cloudflare DNS記錄配置

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

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

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

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

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

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

Happy coding!