Home Create your own static website
Post
Cancel

Create your own static website

Introduction

To create your own website there are a lot of decisions to make, some I struggled with are:

  1. What should the website look like?
  2. What is the purpose of the website?
  3. What domain should I use?

Once majority of these questions are answered you still need to host your website, assuming its a static website. You can refer to this blog and the code will be published in my github for ease of use.

You are expected to have a static website ready and domain registered.

Prerequisites

  1. Workstation/instance with terraform and aws cli installed. Some familiarity with terraform and AWS/AWS CLI, though not required.
  2. Admin access to a preferable domain (in my case it is djmathew.com) and knowledge on how to update nameservers to AWS Route53, AWS Route53 is not necessary but desired in order for the tf template to work with minimal modifications.
  3. AWS Account with a non-root admin user and a bucket to save terraform state file.
  4. Github account and repository with your static website code.
  5. Static website code - since this post is focused on deployment of a already built static website, I am assuming you already have your static files ready.

Deployment

  1. Clone the github repo -
  2. Update terraform.tfvars
  3. Run terraform apply
  4. Note the outputs as it will be required at a later stage
  5. Copy your static files to the main AWS S3 bucket
1
aws s3 cp /path-to-your-static-files/* s3://<s3-static-website>/

Explanation

  1. Three AWS S3 buckets
    1. apex - To redirect djmathew.com to www.djmathew.com
    2. www - To host the static website
    3. Access logs - To store logs of s3 bucket usage
  2. Two CDNs for the corresponding buckets of apex and www.
  3. Domain - A domain of your choice either registered via AWS Route53 or any other Registrar. Ex: djmathew.com
  4. Hosted Zone - To configure the Nameservers that the domain points to and update records.
  5. SSL Certificates - Free SSl certificate by Amazon Certificate Manager to make the website secure with https
  6. GitHub actions - To configure CI/CD so that you can focus on content.

Next step is to have the website in a CI/CD setup so that you can just update content and the build and deployment is automated.

Watch this space for updates!


CI/CD

Coming soon


This post is licensed under CC BY 4.0 by the author.