AvidDabbler Blog

Hosting Static Sites on AWS

August 26, 2019

Intro

As I expressed in my last post, there were a number of different options that AWS offers to get up and running on a budget when hosting a static website, but at the end of the day I will be going the S3 / Cloudfront way of hosting and routing. This post will go through the following steps in a logical way:

  • Hosting your files through AWS S3.
  • Connecting your files to be accessible through url via Cloudfront.
  • Use CodeBuild to connect your files to a GitHub Repo.
  • Configure a custom domain to your project.

MAKE SURE THAT YOU ARE CREATING THESE ALL WITHIN THE SAME REGION.

Set Up Your S3 Bucket

So the first thing that you need to know about setting up your website is where you need to store these files. S3 is the most common way to store file on AWS securely. Think of S3 as your secure Dropbbox. Or that Dropbox is using S3? Anyway, S3 is going to be where you are going to be storing all of your static website files. In this section we are just going to focus on getting the bucket made public. You wont need to worry about getting anything moved over into the bucket as we will configure it to sync with your GitHub in the next section.

  1. Go to your AWS Console and go to the S3 section of AWS
  2. create bucket with website name minus www
  3. Go inside the bucket and the make public by going to the permissions tab and then click the Block Public Access button then click edit and turn them all off. Then save.
  4. In the same permissions tab click the Bucket Policy button. Then paste the following rule in the code editor and configuring it for the bucket that you just created.
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::example-bucket/*"
            ]
        }
    ]
}
  1. In that same window go to the properties tab and then click Static Website Hosting. Click Use this Bucket to Host a Website set the index document to index.html or whatever you set it up as in your static site. Click Save.

Create CodePipeline

Now, we need some file to host. These files have to come from somewhere. Sure you could have just uploaded some files to your S3 and called it a night, but you want to put the work in you want to be able to just forget that you have to do that. You need CodePipeline. CodePipeline is a great way to work with your code from a project that you want to host somewhere on GitHub, but also store for hosting on AWS. What this next section will do is help you manage the connection between your GitHub branch and your S3 so that whenever you make a change to your specified branch it will push out an update to your S3 bucket where you have your website files hosted.

Choose Pipeline Settings

  1. Name the pipeline after your bucket for simplicity.
  2. new service role
  3. Advanced settings:
  4. Custom Location (Select the S3 bucket that you want to connect to as they need to be in the same location.)
  5. Default AWS Managed Key

choose pipeline settings

Add Source Stage

  1. Click Next
  2. Set your source provider to GitHub
  3. Allow AWS to access GitHub
  4. Select the Repository and Branch that you are wanting to publish.
  5. Select ‘Use GitHub Webhooks’

Add Source Stage

  1. Click Next

OPTIONAL: Add Build Stage

If your site is just static files you can just skip build stage, but if it in React or Gatsby you will need to add the build script in here

build stage

Add Deploy Stage

  1. Set Deploy provider to Amazon S3. Then select the bucket where you want your site to be located in.
  2. Select extract files before deploy - This will allow for your files to be hosted in a readable format instead of all zipped up in a single file.
  3. Next

Add deploy stage

  1. Review the changes and Create Pipeline

review the changes and click next

  1. Once the pipeline has finished syncing go to the management console and head back over to your S3 bucket. When you click on your bucket you should see all the files that you were already hosting in GitHub, but in your S3 bucket. So now if you make a change to your GitHub they will be reflected in your bucket. Feel free to test this out by making some changes to your readMe.md file and then check your readMe.md

Set up CloundFront to connect to S3 Bucket Part I

So now that we have the place where we are going to store your data setup and have figured out how to make sure changes are easily pushed to the S3 bucket. We need to figure out how we are going to how we are going to securely route to those files via URL. We are going to be using an AWS service called CloudFront. What this service allows you to do is route via a CloudFront URL to your S3 bucket. So there will be a CloudFront URL associated with you site, but we will be using that information to reroute to your own custom domain in the future.

A quick note. During this section we will be creating a new certificate in this section that will take you between CloudFront and Certificate Manager. Do not close the CloudFront tab otherwise you will have to start over.

  1. In the Management Console navigate to the the CloudFront service. On the main page in the top left click ‘Create Distribution’. From there you will click ‘Get Started’ under the web section.
  2. Origin Domain Name: select our bucket that you are now hosting your site files in the dropdown.
  3. Origin Path: leave this blank
  4. Origin ID: by default, this field will be auto-generated by CloudFront, you can custom it as you want
  5. Restrict Bucket Access: Yes
  6. Origin Access Identity: Create a New Identity
  7. Grant Read Permissions on Bucket: Yes, Update Bucket Policy
  8. Comment: www.walterkjenkins.com-cloudfront
  9. Alternative CNAME type in your domain with and without the www at the front of your address

S3 Bucket Setup part 1

Set up AWS Certificate Manager

  1. Go to Certificate Manager in the AWS console
  2. Type in the domain name that you have purchased with and without www at the beginning.

enter in your domains

  1. Set up for DNS Validation then click review

DNS validation

  1. Click Confirm and request

request a certificate

  1. Once you are on the validation page you are going to need to copy over the ‘Name’ and ‘Value’ text from the validation page over to the DNS area where you bought your domain. This information is important and should be kept confidential because this data is what verifies with aws that your domain is allowed to release the file that you are hosting to that domain that you purchased.

I personally bought my domain from Google Domains, but basically just copy over that information Copy over CNAME data to domains.google.com

It is important to note that this url will just be a blank page until you connect it to CloudFront.

enter in your domains

Set up CloundFront to connect to S3 Bucket Part II

  1. When you get down to the SSL Certificate click custom SSL Certificate.
  2. Click the input box and if you successfully created your SSL Certificate you should see a drop down associated with your domain.

setting up the SSL Certificate

  1. Set the Default Root Object: index.html
  2. Leave the rest filled default value
  3. Click Create Distribution

DNS Configuration

  1. Through the management console go to Certificate manager and click on where the CNAME data is stored for your url.
  2. This information that is stored in the CNAME and Value fields in Certificate Manager is the information that you need in order to connect your domain provider to your AWS configurations.
  3. Go to go to where you purchased your domain and look for the DNS section.
  4. Copy and past the information that you have in your Certificate Management console over to your Domain provider. This will establish a connection.
  5. Once your Validation status reads ‘Success’ you know that what you have done has worked

validation status

It is important to be patient during this process. This may take a while and if you try to redo the certificate and copy back over the information the process will just start over.

  1. Going back to AWS CloudFront. In the CloudFront Distributions page you will see where you have set up your site. Under domain name. There should be a URL that ends in ‘cloudfront.net’ follow that link. You should see your built site up and running.

If you do not see your site you are going to need to go back and check through your cloudfront configurations

  1. If that works, then copy over that URL to where your domain hosts the DNS configuration info. Preform the same process as before when you were setting up the SSL Validation except this time you will set Name to ‘www’ set it CNAME as the type default to 1h and then set data to the CloudFront URL that you have just copied from AWS.
  2. As like before this will take a minute to go through all of the checks so just be patient.

CONGRATS!!! YOU DID IT

That’s it you are the master of your own Domain ;D

Sources:

Deploy Static Website to Amazon S3 from Github Repository

How to Host a Website on S3 Without Getting Lost in the Sea

Deploy Static Website to Amazon S3 from Github Repository


Written by Walter Jenkins who lives and works in Saint Louis. His passions are Civic Tech, Smart Cities and Alternative Transportation. He specializes in working with data analysis and visualization through maps.
You should follow him on Twitter.