This blog is hosted on AWS S3 fronted by CloudFront using a custom domain in Route53. If some or none of those things made any sense to you, no worries, we will walk through all of it together.

What are all those things?​

First let's start with S3. S3 stands for Simple Storage Service. It is a service provides by AWS to store files. These files can be private, public, or a mix. For the purposes of this post, we will be going over how to serve public assets over the internet.

CloudFront is AWS' CDN offering. It is a service that caches content so that it serves it up quicker for users around the world.

Route53 is AWS' domain service. This is where you can buy and host your own domain, like this one, brockdavis.codes.

This tutorial assumes you already have an AWS account. If not you can sign up for one at here. It also assumes you have already purchased a domain through Route53.

Setting up S3​

First search for S3.

Click Create bucket.

Set the name to your Route53 domain. For example, mine is brockdavis.codes

Click the Permissions tab.

Uncheck the Block all public access box and check the box acknowleding that it may be public.

Scroll to Bucket policy and click Edit. and use the policy below. Make sure to replace BUCKET_NAME with the name of your bucket.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::BUCKET_NAME/*"
        }
    ]
}

Click the properties tab and scroll to the bottom and click edit under the Static website hosting header.

Click Enable and set your index document. For example, mine is index.html.

Once this is saved make sure to copy the static hosting URL without the http. You will need it for CloudFront

Setting up CloudFront​

Search for CloudFront.

Click Create distribution

For the origin, use the uri you copied from your S3 bucket. Make sure to not use the http

Scroll down and under Viewer select Redirect HTTP to HTTPS.

Add your domain as a CNAME.

Click Request certificate

Input your domain name, select DNS Validation, then Request

On the next screen, select Create records in Route 53 then select Create records

Once the certificate is validated, select it on the create distribution screen and create the distribution.

Setting up Route53​

Search for Route 53

Select your domain and create a new record

Leave the first box empty, make sure is it an A record, toggle the Alias toggle, select ALias to Cloudfront distribution, and select the distribution you just created. Then click Create records.

Once that is saved you can navigate to your static site using your custom domain

Recently I did a session at Georgia State University where I walked students on how to create and deploy a basic website using GitHub Pages to showcase their work, resume, or startup idea. I promised the students that I would do a write up on the steps we went over, how to take it to the next steps, and put it online. So that is what this post is.

Create a GitHub Account​

Head on over to GitHub and either sign in or create an account. If you are a student use your .edu email address so you can leverage their student developer pack and get free perks later.

Create the repo​

After you have signed up, head on over to your repos and create a repo with username.github.io as the repo name. For example, mine is brockneedscoffee.github.io, ensure it it set to Public, and that you initialize with a README.md file.

Next, click settings and on the left navigation menu look for pages and click that. You will see a message that your site is live, click visit site to see your page.

GitHub used what is called GitHub Actions, to take your content and deploy it to the internet. You can look more into what occured by clicking the Actions tab.

You can look specficially into each step for the action by clicking on the workflow and each step within it.

Edit the page​

Now it is time to edit your site. Click the code tab. Once there type . on your keyboard. This will open a web editor.

Once you are in the editor, look for the README.md file on the left side. Make whatever changes you want. For mine I put:

Hi! My name is Brock Davis and I am a Software Development Manager at Amazon Web Services!

Now you want to commit the change. Click the branch icon on the left side, you should see a 1 on it. Then click the plus icon next to the README.md file to add your file to the commits

Now input a commit message, I put initial change then click the check icon above that to push your changes

This will trigger another run of the GitHub Action. Once it is complete, you can visit your site again and you should see the changes

Now let's add some additional details to the README.md file and commit those changes like we did above. It is a markdown file and if you need assistance on the syntax, you can checkout this cheatsheet.

I added my resume to the file as seen below

Once I commit my changes and push them, witint a few minutes I should see the changes on my site

Take it to the next level​

At the end of the day, all the GitHub action is doing is taking the contents of your repo and publishing it. It is looking for either a README.md file or index.html. So next try using things like Bootstrap or some other framework to style and create a custom index.html file to make your site your own.