Publish Static Website with S3 + GitHub + CloudFront
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).
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.ymlPopulate 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 "/*"Conclusion
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.