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