simple static website

簡單的靜態網站

使用單一 AWS CloudFormation 腳本建立簡單、廉價、CDN 支援的靜態網站。非常適合使用靜態站點生成器建立的站點，例如 Gatsby、Hugo、11ty；無狀態 React 應用程式；或只是普通的舊 HTML、CSS 和圖像檔案。

指示

1. 在此註冊 AWS 網域

2. 在 Route53 中為該網域建立了託管區域

3. 使用simple-static-website.yaml模板建立新的 CloudFormation 堆疊。由於 CloudFront 的限制，這必須在us-east-1中完成。

4. 提供參數：

   • 網域
   • 網站名稱
   • HostedZoneId（使用控制台，將提供清單）
   • BucketName（可選），如果您想使用現有儲存桶。如果留空，CloudFormation 將從 URL 子網域產生儲存桶名稱。

5. 使用控制台或 awscli 設定 CloudFormation 堆疊：

    aws cloudformation deploy 
       --stack-name foo 
       --template-file simple-static-website.yaml 
       --parameter-overrides 
           DomainName=example.com 
           HostedZoneId=ABCDEFGHIJK0123456789 
           WebsiteName=www
   

6. 將一個簡單的index.html 檔案放入新建立的S3 儲存桶中。檢查堆疊的 CloudFormation 輸出以取得範例 awscli 命令。

7. 透過您提供的網域造訪您的新網站。請參閱 URL 的 CloudFormation 輸出。

使用內容傳遞網路 (CDN) 的注意事項

請記住，CloudFront CDN 會將您的網站快取在世界各地的多個位置。如果您變更站點，則必須使快取失效。需要收費，但總的來說，這是一個非常便宜的設置，因為它不運行任何伺服器。

致謝

此腳本的靈感來自 Alain Seng 的優秀部落格文章，以及透過 Amazon 現已停用的 CloudFormer 範本運行的現有手動設定網站的輸出。 CloudFormer 是一個出色的工具，但由於該解決方案向用戶開放的 CVE 數量不斷增加，因此它已被 Amazon 掩蓋。 karimelmel 對此有一篇很好的文章。感謝 eisenhowerj 改進了我的 CloudFormation 腳本並添加了新功能。