最近修正了部落格的一個小問題，隨手紀錄一下
問題 #
Hugo 會將圖片做預處理，針對不同螢幕尺寸給不同大小的圖片，這個動作立意良好，可以加快資料載入速度，
不過有個問題是它壓縮率太大了，尤其像是螢幕截圖，被 Hugo 壓縮過後文字直接變成馬賽克，
這邊沒有瑟瑟內容不需要打碼阿喂。
不過 Hugo 這麼做的好處是最佳化 SEO，內容傳遞效率一定比較好， 經過 Hugo 處理過的圖片丟到 PageSpeed Insights 測出來評分是滿分， 反而那些沒有被壓縮的圖片被說太大了哈哈。
要改善這個問題，我的想法是把靜態資源獨立出來，不給框架預先處理，等打開網頁的時候從第三方節點載入， 這樣確保使用者可以看到原始解析度的圖片。
方案 #
目前我採用的方案是 AWS S3 + CloudFront，S3 存放靜態資料，而 CloudFront 是一種 CDN 的服務， 簡單來說就是 AWS 會幫你把資源散布到全球網路，加速當地使用者存取資源的速度。
S3 的存放成本很低，每 GB 0.025 USD，傳輸部分每月 20000 GET 請求、輸出 100G 以內不用錢。 CloudFront 用久免費額度也是給得很大，每月 1 TB 傳輸量 + 1000萬次 Http/Https 請求。
假設你的網站成功曝光，吸引一堆人來朝聖的話，你可能會遇到一個很有趣的問題， 流量部分原則上不會超量，
除非你沒事放一堆高清無碼的愛情動作片，但 GET 請求有機會超過 20000 個， 超量部分以每 1000 個請求 0.00037 USD (以GET為例，有些動作會貴一點)，所以結論是不用擔心啦白菜價XD
實作 #
第一步先進 AWS 主控台，選 S3，然後點 Create Bucket，先選擇 bucket 的區域，需要手動輸入的是名稱，
名子是唯一，稍微取長一點避免重複，注意下面擁有權選 ACLs disable，Access 禁止所有公開權限，
原則上預設就是這些設定，雖然等一下我們要丟的東西完全開放是無所謂，但盡量養成設定最小權限的習慣。
好了之後點 Create bucket
下面的設定大概長這樣，沒列出來的就是預設選項。
原則上 AWS 是不會另外收稅的，唯獨位置選在日本會需要額外負擔消費稅， 這個跟日本當地的法規有關，詳細可以到問答集看一下。
是說稅金不高啦～放心用
搜尋欄輸入 CloudFront 進入，點 Create distribution，Origin access 預設是 Public，記得改成 Origin access
然後點 Create new OAC，名稱隨意
往下滑，Viewer 設定 Http 重導向 Https
下面 WAF 我選關閉，我可以用 Cloudflare 來代替。下面設定你資源分散的廣度， 依照你自己的評估選擇。
儲存完後，點右上角複製 Policy
回到你的 bucket，在權限標籤下點選編輯 Bucket policy
把剛剛複製好的全部貼上，並儲存
現在你可以把 預設的網址/檔名 貼到瀏覽器上，有看到圖/影片的話就是成功了。
自訂網域 #
這個算額外步驟，如果想用自訂網址的話，我們要做的事情就是關聯子網域跟AWS的預設網址。
這邊步驟步不會太多，所以就以文字代替，我才不會說是我忘記截圖。
要使用自己的網域，首先我們要先建立憑證，請切換到 AWS Certificate Manager (ACM)，
這個步驟要在區域 N. Virginia (us-east-1) 裡完成
(跟你 bucket 所在位置無關，這點我是參考其他文章的建議)，
點選 Request a certificate，要一個公開憑證，輸入你要使用的網域，加密演算法挑個自己喜歡的，
驗證方式預設 DNS，點 Request 完後，驗證狀態會是 Pending，同時它會給你一組 Name & Value，
到你域名的平台，在 DNS Record 裡加入一個新的 CNAME 紀錄，把值填進去儲存 (如果是 Cloudflare，
這階段請先選 DNS Only)，過一段時間後驗證狀態應該就會轉成 Issued，
接下來你就可以回到 CloudFront，進入預設網址，在 General 頁面內的 Settings，
點右上角 Edit，Alternate domain name (CNAME) 填入自己的網址，
Custom SSL certificate 裡選擇剛剛申請好的證書，點儲存，等一段時間後，
你應該可以用自己的網址存取靜態資源了。
後記 #
現在網路速度跟裝置運算速度快的前提下，我認為提高傳輸品質的優先權可以高於節省資源大小， 主要是圖片壓縮後如果字都看不到了，那放上來好像也沒什麼用。