close

我曾經也有個很簡單的疑問:如果要架設介紹自己的個人網站,是否會是一件很麻煩且需要很專業

的事?

所幸,隨著各種服務平台的崛起,知名雲端平台AWS也提供稱作S3的首年免費網站空間

詳細的步驟如下:

1. 首先一定要有的,就是申請AWS帳號 請先把信用卡的資訊之類的填完

2. 申請完後,再次進入上方的連結並登入主控台Console,並搜尋S3開始使用該服務

螢幕快照 2019-01-18 下午3.47.23.png

 

2. 在 S3 建立 Bucket (Bucket就是籃子,裝什麼呢?可以把它想像成一個籃子只放一個網站,這樣網站就可以以籃子為單位搬來搬去不怕損毀了)

螢幕快照 2019-01-18 下午3.48.14.png

   替Bucket取一個簡單好記的名字,不過要注意Bucket name必須是世界唯一的,可以後綴一些

   隨機的數字避免跟他人重複

螢幕快照 2019-01-18 下午3.50.17.png

3.  創建完Bucket之後需要做下列必要的設定

   ➡︎ Static Website Hoisting:如下圖進入Bucket Properties,上方的 EndPoint 就是你的網站

      的網址,請記下來

螢幕快照 2019-01-18 下午3.50.49.png

      在 index document 欄位填入HTML的檔案名稱,我這邊是很老梗的命名為index.html。

      在 error document 欄位填入出錯時要顯示給使用者的HTML頁面名稱

    (為避免複雜化,不管出不錯我們都導到我的index.html頁面)

      填完後按下Save

螢幕快照 2019-01-18 下午3.52.02.png

 

4. Bucket預設是只有自己能夠存取的,想當然爾我們當然不希望別人可以隨意翻閱我們的程式碼,因此還需要多一個步驟才能將網站公開

   4-1 取消勾選Public Access Setting的最下面兩個選項

螢幕快照 2019-01-18 下午5.29.18.png

   4-2 根據以下文件新增 Bucket Policy(明定存取權)https://docs.aws.amazon.com/en_us/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html

         簡單來說,方法為修改下行的設定檔被highlight的部分(請用你的Bucket name取代)後按下儲存

{

"Version":"2012-10-17",

  "Statement":[{

  "Sid":"PublicReadGetObject",

  "Effect":"Allow",

  "Principal": "*",

  "Action":["s3:GetObject"],

  "Resource":["arn:aws:s3:::example-bucket/*" ]

} ] }

         位置如下圖

螢幕快照 2019-01-18 下午5.31.03.png

 

5. 最後上傳HTML程式碼至Bucket(一定要在Bucket的首層目錄,不可以丟在任何的資料夾中)

螢幕快照 2019-01-18 下午5.50.44.png

 

完成!接下來只要在瀏覽器的網址列輸入你的 EndPoint 就可以連上你的網站了

螢幕快照 2019-01-18 下午5.50.31.png

 

如果這篇文章有幫助到你,請點擊文章或側欄中的廣告支持我繼續寫作唷!謝謝:)

註1: 若要下載 index.html 程式碼請至 GitHub

arrow
arrow
    文章標籤
    AWS website S3
    全站熱搜
    創作者介紹
    創作者 Jadson 的頭像
    Jadson

    我是傑迪森,嘗試做自己和他人的人生導師

    Jadson 發表在 痞客邦 留言(0) 人氣()