Publish static website with S3 + Github + Cloudfront

Photo by 夜 咔罗 on Unsplash

A static website is a type of website that consists of fixed content and resources that do not change dynamically. This means that the content is pre-built and remains the same for all users who visit the website. Static websites are typically written in HTML, CSS, and JavaScript, and they can be hosted on a variety of platforms, including cloud services like Amazon Web Services (AWS).

>> This article was originally published on my blog:
https://habil.dev/publish-static-website-with-s3-github-cloudfront/

Amazon S3 (Simple Storage Service) is a scalable cloud storage service provided by Amazon Web Services. It allows you to store and retrieve large amounts of data, including files like images, videos, documents, and more. S3 is designed to be highly reliable, secure, and cost-effective. It’s commonly used to store a wide range of data, from backups to media files.

Using AWS S3 to host a static website can provide you with a cost-effective, reliable, and scalable solution that is well-suited for websites with content that doesn’t change frequently.

I assume, you have a static website and want to deploy your changes with GitHub Actions and distribute your website with CloudFront CDN network.

Also, I assume, you already have an S3 bucket and CloudFront Distribution.

Create Secrets

In order to run your action, you need to create some secret for it. Let’s create 3 required secrets for the action.

• AWS_ACCESS_KEY_ID
• AWS_SECRET_ACCESS_KEY
• DISTRIBUTION_ID

Create GitHub Action

Create a new directory named .github and workflow in your project root directory.

After that, you need to create a main.yml file.

mkdir .github && cd .github && mkdir workflow && cd workflow
touch main.yml

Populate the main.yml file with the following content

name: Upload Website to S3
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v1
- name: Configure AWS Credentials
  uses: aws-actions/configure-aws-credentials@v1
  with:
    aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
    aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
    aws-region: eu-central-1

- name: Deploy static site to S3 bucket
  run: aws s3 sync . s3://my-static-website-bucket --delete
- name: Invalidate CloudFront Distribution
  run:  aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"</code></pre><h2 id="conclusion">Conclusion</h2><p>We created a Github Pipeline and uploaded our static files to the s3 service, invalidating the CloudFront service, and loading the updated version of our page.</p><p>See you in the next article. 👻</p>