Easily deploying your static website to S3 locally


This guide serves as a follow-up to the How to Host Your Static Website with AWS S3 post. After configuring your website on S3 with a CloudFront CDN, you might find using the AWS web interface to upload new files and clearing the CloudFront CDN less intuitive and somewhat cumbersome.

Therefore, I will demonstrate how to create a simple JavaScript file that automates these tasks using the AWS CLI, streamlining the process for you.

Install AWS CLI and authenticate yourself

Create a javascript file to automate the CLI

const { exec } = require("child_process");

const bash = `aws s3 sync ${process.env.BUILD_PATH} s3://${process.env.AWS_S3_BUCKET} --acl public-read && aws cloudfront create-invalidation --distribution-id ${process.env.AWS_CLOUDFRONT_ID} --paths '/*'`;

exec(bash, (err, stdout, stderr) => {
  if (err) {
  } else {
    console.log(`stdout: ${stdout}`);
    console.log(`stderr: ${stderr}`);

Add the script to your package.json

  "scripts": {
    "deploy": "node deploy"

Final considerations

This covers the basics of uploading to S3 and invalidating your cache at Cloudfront. In the future, I aim to create a more advanced guide that includes instructions on how to upload only modified files to S3 and invalidate the cache specifically for those modified files. When your project is filled with dependencies, featuring multiple folders, files, etc., invalidating the cache for everything can lead to unnecessary expenses with AWS services.

Did you find this article to be useful? Help me continue this blog by supporting me. I'll be really grateful :)