Automate static website deployment from Github to S3 using AWS CodePipeline

Sithum Jayarathna
Jan 23, 2019 · 3 min read

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 yourdomain.com.

You don’t need to clone the git repository to make changes. You can do it from the github.com 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.

Image for post
Image for post

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

Click the Create pipeline button.

Image for post
Image for post

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.

Image for post
Image for post

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 noobcod.com for this tutorial.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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.

By the way, check out our best AWS deal: www.avmconsulting.net/well-architected-review

AVM Consulting Blog

AVM Consulting — Clear strategy for your cloud

Sithum Jayarathna

Written by

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

AVM Consulting Blog

AVM Consulting — Clear strategy for your cloud

Sithum Jayarathna

Written by

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

AVM Consulting Blog

AVM Consulting — Clear strategy for your cloud

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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