Automate static website deployment from Github to S3 using AWS CodePipeline

Automatically deploy changes made to the GitHub repository of the static website to AWS S3. The change you make will be instantly available on live website

You don’t need to clone the git repository to make changes. You can do it from the website itself. After configuring the pipeline, you don’t need to login to AWS. Everything happens automatically under the hood. Aint it cool?

You need one of your s3 buckets configured for static web hosting for this deployment. Read my story on s3 static website deployment and configure one if you don’t have.

Login to AWS console and go to CodePipeline.

Important! Switch to the correct AWS region where your S3 website is created before creating the pipeline.

Click the Create pipeline button.

Give the pipeline a meaningful name: web-s3-deploy
Select New service role. Give it a meaningful name: web-s3-pipeline-role
Artifact store: Choose the Default location option
Bucket: select the s3 bucket which the static website is hosted.
Hit the Next button.

Select the Source provider: Github.
Click the Connect to Github button. Authenticate Authorize AWS CodePipeline to access your Github Repos.

After authentication, select the Repository with your static website files. Select the branch of the repository. I’m using a static website for this tutorial.

Select the Github webhooks (Recommended) option. Important! You need to be the owner or an admin of the repository to create webhooks.

Hit the Next button.

Hit Skip Build Stage button. You can use AWS Codebuild to compile typescript or any project that need to build before deploy. We skip this because the repo contains static website contents.

Hit the Skip button on the prompt.

Deploy provider: Select Amazon S3
Bucket: Select the bucket which configured for the static website.
Extract file before deploy: You must check this because code pipeline compresses the artifact.

No additional configurations needed. Hit the Next button.

You can go back and change configuration if you made any mistake at the Review step. Hit the Create Pipeline button.

Go to your domain from the web browser. It’s now deployed.

Make a change on the repository on website and hit Commit button. Ill change v1 to v2 to get a visible change.

Cheers! Changes to your static website now automatically deploy to the live URL instantly.

That was fast right?

Cost: This pipeline will cost only $1 per month and charges only if a deployment happened.

Cleanup: Delete the pipeline you just created.

👋 Join us today !!

️Follow us on LinkedIn, Twitter, Facebook, and Instagram

If this post was helpful, please click the clap 👏 button below a few times to show your support! ⬇




AVM Consulting — Clear strategy for your cloud

Recommended from Medium

The Essential Guide to a Post-Covid Developer Interview

Backend Design- Software Pattern For Authentication & Authorization

Strategies I Use to Interview Candidates for Software Developer Positions

Why isn’t the Definition of Ready described in the Scrum Guide?

Scaling Machine Learning Models With Docker Swarm

All you need to know about SQS and Kinesis is Here

Goal Net — Chapter 1

Kafka to BigQuery using Dataflow

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sithum Jayarathna

Sithum Jayarathna

DevOps Life. Enjoying creative stuff on the ☁ cloud. Simple, loves 📡researching, 📲 IOT, 🎧 music and 🎮 games.

More from Medium

AWS Batch Guide

Using AWS to host a static website

AWS Launch Wizard for SAP

Transfer data to AWS EC2 instance using FileZilla