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 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.
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 noobcod.com 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 Github.com 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 !!
If this post was helpful, please click the clap 👏 button below a few times to show your support! ⬇
