Help us understand the problem. What is going on with this article?

利用AWS S3來部署Hugo Site

0. Prerequisite

如果你還不清楚Hugo是怎麼樣的一個靜態網頁工具,可以先參考使用hugo搭建你的第一個blog來對hugo有初步的認識。

如果你已經了解並且準備好讓Hugo可以透過internet讓所有人瀏覽,那在這一篇post中我們將會詳細的介紹。

在開始之前,本片文章會使用到AWS的CLI來配置AWS上的相關資源。
安裝 AWS CLI

1. Create S3 Bucket and configuration

接著,我們可以透過command line輸入

aws s3api create-bucket --bucket <your-bucket-name> --region ap-northeast-1 --create-bucket-configuration LocationConstraint=ap-northeast-1

如果成功的話,AWS Cli應該會回覆創建完成後的bucket的url

{
    "Location": "http://<your-bucket-name>.s3.amazonaws.com/"
}

而目前S3 bucket目前還只是一般存放file object的storage空間,如果我們需要透過S3來host website,則還需要進一步的配置。

首先,我們先透過s3 website的command來設定web host的基本資料

aws s3 website s3://<your-bucket-name>/ --index-document index.html --error-document error.html

接著在你的電腦裡將下面的json內容儲存成policy.json

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::first-blog-1qaz/*"
            ]
        }
    ]
}
aws s3api put-bucket-policy --bucket <your-bucket-name> --policy file://policy.json

透過這兩行command,我們可以先對s3 bucket設定基本的web hosting configuration,接著便是針對整個bucket來設定公開存取的權限以便讓所有人瀏覽時都可以有read only的權限,以便檢視你的網站中的每個頁面。

2. Config hugo & take off

在前面的文章中我們有提到,Hugo在設計上將所有的config集中在config.toml,因此hugo也貼心的提供deployment的configuration,使用者只需要將下面這段配置貼到config.toml中

[[deployment.targets]]
    # An arbitrary name for this target.
    name = "mydeployment"

# S3; see https://gocloud.dev/howto/blob/#s3
# For S3-compatible endpoints, see https://gocloud.dev/howto/blob/#s3-compatible
    URL = "s3://<your-bucket-name>?region=ap-northeast-1"

另外,在config.toml中有個baseurl的設定,原先的內容是baseurl = "https://example.com",我們將他稍做修改成baseurl = "/",修改完成後,再下一次hugo,讓所有的變更再次更新的build folder中。

最後,只需要hugo deploy的這一行command,輸入之後按下enter應該只需要幾秒鐘,應該就可以看到hugo已經幫你把整個網站deploy上AWS囉。 最後只需要透過瀏覽器瀏覽 http://<your-bucket-name>.s3-ap-northeast-1.amazonaws.com/index.html,如果你使用來host靜態網站的providor是其他Netlify,Github或是GCP等其他平台 Hosting & Deployment,Hugo官方也已經整理了多家的範例,做法也大同小異,有興趣的人可以參考看看。

3. Summary

Hugo作為一個靜態網頁的framework,功能與相關的生態資源在此時此刻都已經滿完整也越來越強大,基本上對於一班的使用者用來架設部落格或是企業活動campaign Landing page,從開發到部署都已經有相當成熟的文件,希望能夠有更多人一起使用Hugo然後一起在社群上有更多的feedback。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした