How to Host Your Static Site on AWS S3

• Sat, Jan 19, 2019
• 5-minute read

So, you have your blog as a static site. In a previous post we deployed our site using Netlify. In this post we are going to discuss how you can host your site on the cloud using the AWS S3 storage service.

Login or Create an AWS Account

Create an Account or Login

Follow the next steps to Login or Create a new AWS account:

1. Go to the AWS home page.
2. Click the Create an AWS Account button.
   NOTE: If you already have an account, click Sign in to the Console and skip the rest of the steps.
3. Provide your email address, password, and account name, and click Continue.
4. Continue with the registration process providing the required information.
5. Add a payment method. They won’t charge you anything if you choose the free tier plan, which is free for the first year for you to explore the different services.
6. Verify your account with your phone number.
7. Choose a Support Plan.
8. You receive a confirmation email, which means your account is active now.

Create an S3 Bucket

The first step on the process is to create an AWS S3 bucket, which will store the static files of your website.

1. On the AWS Management Console, find the S3 service by typing ‘S3’ on the Find services search box or by navigating through the Services menu on the upper navigation bar.
2. Click the + Create bucket button.
3. Enter a Bucket name in the text field.
   IMPORTANT: Your bucket name must be unique, and preferably DNS-compliant. See the naming restrictions for more information. Something like “www.your-awesome-site.com” should work as long as the name you choose is available.
4. Choose your region. For this example we’re using us-east-1.
5. Click Next.
6. Leave the next page as default (all boxes unchecked) and click Next.
7. In the next page, in the Public access settings for this bucket section, uncheck all boxes.
   In the Manage system permissions section, choose Grant Amazon S3 Log Delivery group write access to this bucket, and click Next.
8. Click Create bucket.

Configure your S3 Bucket for Static Website Hosting

Configuring your bucket for hosting static websites is really simple. Follow the next steps to do so:

1. Open the S3 bucket you just created by clicking its name on the AWS management console.
2. Click the Properties tab on the upper navigation panel.
3. Click the Static website hosting option.
   1. Check the Use this bucket to host a website option.
   2. Type index.html in the Index document field. You can leave the Error document field black or accept the default value, error.html.
   3. Click Save.
4. Click the Permissions tab on the upper navigation panel.
5. Click the Bucket Policy button.
   1. Copy the following policy and paste it in the corresponding text field:

   {
     "Version": "2008-10-17",
     "Id": "PolicyForPublicWebsiteContent",
     "Statement": [
         {
             "Sid": "PublicReadGetObject",
             "Effect": "Allow",
             "Principal": {
                 "AWS": "*"
             },
             "Action": "s3:GetObject",
             "Resource": "arn:aws:s3:::www.your-awesome-site.com/*"
         }
     ]
   }
   

   2. Replace www.your-awesome-site.com with the name of your own bucket.
   3. Click Save.

You now have everything set up for hosting a static site on AWS S3. To see the URL of your website,

1. Click the bucket name you just created to open it.
2. Click the Properties tab on the navigation bar.
3. Click the Static website hosting tab.
   The URL is the indicated Endpoint.

But there’s still nothing on your bucket to display. Let’s add our files to the bucket so we can see our site online. There are two options to do this:

• Upload the files directly to the bucket through the Console, or
• Use the Amazon Command Line Interface (CLI) to sync the build with a Deploy.

The following sections explain the two different approaches.

Upload your Files to the S3 Bucket

Follow these steps to upload your site to the S3 bucket. For this example we are going to use the Gatsby site we created in the previous post.

1. On a terminal, navigate to your site directory and run gatsby build
   NOTE: This command can change depending on the build command of the framework you’re using, npm build is a possible option.
2. Open your S3 bucket by clicking its name on the AWS management console.
3. Click the Upload button.
4. Select all the files created with the build command and drag them to the Upload page on the AWS Console.
5. Click Next.
6. In the Manage public permissions section, select Grant public read access to this object(s), and click Next.
7. Leave the default Standard option selected on the Set properties page and click Next.
8. Click Upload and wait for the uploading processs to finish.
9. Verify that your site is live visiting your URL http://www.your-awesome-site.com.s3-website-us-east-1.amazonaws.com/.

Use the Amazon CLI to Sync the build with the a Deploy to S3

Deploying your site to S3 with the Amazon CLI is as easy as running a command in your Terminal. But first you need to install the CLI.

1. Follow the instructions for Installing the AWS CLI.
   NOTE: Follow the instructions corresponding to your working environment.
2. Follow the steps to Configure the AWS CLI.
3. Run the following command inside your project directory to start the build process and deploy to your S3 bucket: gatsby build && aws s3 sync public/ s3://www.your-awesome-site.com.
   NOTE: The command can be different depending on your build command, it can use yarn run build or npm run build. Also, your build directory can be build, or like in this case public. Make sure to use the correct directory. An alternative command would look something like this: npm run build && aws s3 sync build/ s3://<bucket-name>.