Back

S3 Static Website hosting made even easier

2023-01-18

S3 Static website hosting is a great feature available in AWS S3. It is handy solution for hosting a website that includes static content. I wanted to write a project which makes setting up your own static website on S3, even easier.

    This project includes the following features:

  • A template which can be used to build your static site
  • An S3 bucket which hosts your static site and it's associated files
  • A subdomain S3 bucket which handles requests starting with 'www.'
  • A logging S3 bucket which captures logging requests that can be used to track usage on your site


Prerequisites

You must have the following, configured on your machine:

  • AWS CLI, logged into an IAM Role used for provisioning resources
  • Terraform OSS


Steps

(1) Start by cloning this project to your machine

(2) Start customizing your site by editing the files under src/

(3) Once you're ready, complete region selection and terraform state bucket creation by running ./init.sh

NOTE: If you already have a terraform state bucket in your account and wish to use that one, run: ./init.sh <<STATE_BUCKET_NAME>>



(4) Run ./deploy.sh <<TF_ACTION>>

First action should be plan, then after verifying the plan, run again with apply



(5) Your S3 Static website should now be running! You can access it with the S3 endpoint in your bucket under Properties > Static website hosting > Bucket website endpoint



(OPTIONAL) Setting up a custom domain with your static website

You may decide to add a custom domain to your website to give your users something a bit more name friendly than the endpoint that AWS generates for you 😛

If you have a domain that you own, outside of AWS Route53 (e.g GoDaddy), you can follow this guide: https://youtu.be/fm6FPQMZ_WI?t=319

If you have a domain registered in Route53:

(1) Navigate to Route53 > Hosted Zones. AWS would've already created a public hosted zone for you once your domain was successfully registered.

(2) Click on the hosted zone with your desired domain name and click on 'Create Record'

    (3) Create the record with the following setup (root domain):

  • Record name: Leave it blank
  • Record type: A record (Routes to an IPv4 address and some AWS resources)
  • Alias: True
  • Route traffic to: Alias to S3 website endpoint > Select your region > Select your S3 endpoint (If none appears, type: s3-website-<<REGION_NAME>>.amazonaws.com)
  • Routing policy: Simple routing
  • Evaluate target health: No


    (4) Create the record with the following setup (sub domain):

  • Record name: www
  • Record type: A record (Routes to an IPv4 address and some AWS resources)
  • Alias: True
  • Route traffic to: Alias to S3 website endpoint > Select your region > Select your S3 endpoint (If none appears, type: s3-website-<<REGION_NAME>>.amazonaws.com)
  • Routing policy: Simple routing
  • Evaluate target health: No


(5) Your R53 domain should now evaluate to your static website!



Conclusion

I started this project because I wanted to get a web portfolio running with the least amount of overhead. As you may have already guessed, this site utilizes this project! Really enjoyed this one.



Please feel free to get in touch via any of the contact methods above if you have any questions or suggestions regarding this project.

Finished Reading