最近把部落格搬家到靜態網站，用了 Hugo 架設的，包含圖床也都一併放到 S3, 這過程有點艱辛就記錄下來了，希望可以幫助到大家。

ASW S3

Step 1

建立 Bucket, Services -> S3

Step 2

自訂名稱，不一定要跟網域一樣， Region 選跟自己國家相近的，連線速度會好一點

台灣的話可以選日本

Step 3

這邊直接 Next, 沒有要設定的部分

Step 4

記得把 Read 的權限打開，否則你上傳的東西沒有人能看的到

Step 5

點擊 Create 建立

Step 6

完成建立你的 Bucket

啟用靜態網站

Step 1

找到剛新建好的 Bucket, 點擊進入

Step 2

Endpoint 是要綁定 CloudFront 使用的，綁錯的話 SSL 是沒辦法使用的。

這邊一定要先把 Endpoint 的 URL 先複製起來。

CloudFront + SSL 憑證

Step 1

準備建立 Distribution

Step 2

點擊 Create

Step 3

選擇 Web, 點擊 Get Started

Step 4

進去之後，畫面先往下拉，我們先建立 SSL 憑證（不用錢，但只能在 AWS 服務上使用）

Step 5

輸入你的網域，前面加 *, 這樣只要申請一個，之後帶 Subdomain 都可以直接使用

例如之後我要申請 img.niclin.tw, smalltalk.niclin.tw, 都可以直接吃這個　*.niclin.tw 的SSL 憑證

Step 6

驗證 Domain 擁有權

可以選 DNS 或是 Email (推薦 Email, 比較快）

Step 7

這邊可以查看到目前驗證的情況。

記得去收信，驗證。

透過信件的連結，點擊 Approve 同意申請

可以看到已經通過申請了。

Step 8

回到 Distribution 的分頁，繼續完成設定。

• Origin Domain Name: 選擇剛剛建立的 Bucket
• Viewer Protocol Policy: 選擇連進來的 HTTP 通通導向 HTTPS

• Compress Objects Automatically: 記得選 Yes, 這是做資源壓縮，就不需要自己對檔案做優化 gzip
• Price Class: 可以選亞洲，也比較便宜
• Alternate Domain Names(CNAMES): 在這邊綁定 Domain 後，也記得要到購買網域的地方將 DNS 指回來，指向位置 xxxxxxxxxxxx.cloudfront.net

• 看到 Domain Name 的 xxxxxxxxxxxx.cloudfront.net，這就是要用來綁 DNS CNAME 的。

• 先切換到 Origins 分頁，勾選 Origin Domain 後，點 Edit

• 把 Origin Domain Name 設定成 S3 Static Website Hosting 的 Endpoint。

完成

將 index.html 上傳到 S3, 應該就能透過 https://xxx.your-domain 訪問靜態網站囉。