Resume 工作坊 (基礎課程)
5 min readJul 20, 2021
前言:
本次工作坊基礎課程會帶領同學,如何使用S3的服務架設一個純文字的靜態網站。
Connect to AWS:
本教學是使用 AWS Console 如果在註冊上有問題可點選此連結
Step 1: 登入 AWS 平台
進入AWS開發平台:https://reurl.cc/qgKZ8D
Step 2: 進入 S3
想了解 S3可以點選此連結
Step 3: 建立儲存貯體
- 輸入儲存貯體名稱
- 選擇想放置的Region
點擊建立儲存貯體
Step 4: 編輯公有存取權
- 點擊許可
- 點擊編輯
- 把封鎖公開存取權的勾拿掉
- 點擊存儲更變
- 欄位中輸入"確認"
- 點擊確認
Step 5: 編輯儲存貯體政策
繼續往下滑找到儲存貯體政策,點擊編輯
- 請複製以下儲存貯體政策,並將它貼上至 Bucket policy editor (儲存貯體政策編輯器),程式中”xxxxxxxxx”的部分請改成 Step3 建立的貯體名稱
- 點擊儲存更變
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::"xxxxxxxxx"/*"
}
]
}
Step 6: 建立index.html
- 開啟電腦中的記事本建立 index.html 檔案
- 複製以下的code 到剛剛開啟的記事本,並把檔名改成 index.html 檔案(此檔為網站內容後續可以自行修改)
建議同學可以使用 Notpad++ 或 brackets編輯程式比較容易除錯
Notpad++: 連結
brackets: 連結
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>My Website Home Page</title>
</head>
<body>
<font color="purple">
<h1>Welcome to Resumeworkshop</h1>
</font><br>
<p>Now hosted on Amazon S3!</p>
</body>
</html>
Step 7: 上傳index.html
- 點擊物件
- 點擊上傳
- 上傳 index.html
- 點擊上傳
上傳完成後會發現物件中多了index.html
Step 8: 開啟靜態網站託管
點擊屬性
往下滑找到靜態網站託管,點擊編輯
- 靜態網站託管,點擊啟用
- 託管類型,點擊託管靜態網站
- 輸入index.html
點擊儲存更變
Step 9: 完成
靜態託管網站有網址,把它複製到瀏覽器即可
範例網站: http://resumeworkshop.s3-website-us-west-1.amazonaws.com
做到這一步基本上就算是一個簡單的HTTP的靜態網站了,但HTTP稱不上是一個安全的網站,想知道HTTP與HTTPS差別可點擊此連結
AWS上也有提供HTTP轉成HTTPS的服務詳情可以參考資料中的Route 53白皮書
履歷製作閱讀 Resume 工作坊 (進階課程)請點此傳送門
參考資料:
https://reurl.cc/7r1QDk (AWS S3 + CloudFront — SSL 靜態網頁架站教學)
https://reurl.cc/MAl5XX (AWS route53白皮書)
https://reurl.cc/5rAW8y (AWS S3白皮書)
https://reurl.cc/VEdO8N (Hosting A Static Site On AWS S3)