Static Website Deployment on a S3 Bucket with GitHub and CodePipeline
I have a static website I want to periodically change but I manage the code on GitHub, how can I host this on a S3 bucket and ensure the content is synced? This isn’t actually as daunting as it may sound, getting this to sync with AWS S3 is relatively easy with CodePipeline. Like with many AWS services, there is a small cost.
I will be reusing one of the S3 buckets from a previous tutorial for this, specifically tutorial-001-sj.
- Sign into the AWS Console
- Under “Find Services” type in “CodePipeline” and select CodePipeline.
- Note: Ensure you are in the right region, the first time I did this I wanted to pull my hair out as I kept getting “Cannot convert undefined or null to object codepipeline” it turned out when I selected the correct region and everything matched it went away. Click on “Create Pipeline”.
- Under “Pipeline name”, give it a name. I went with “tutorial-001-sj”. For the role name, I left this as default “AWSCodePipelineServiceRole-us-west-1-tutorial-001-sj”. Then click “Next”.
- Under the “Source Provider”, select “GitHub”. Then select the repository and branch you would like to upload the commits from. Then click “Next”. Note: If you see a button that says “Connect to Github” you will need to connect your AWS and GitHub account to continue.
- Under “Add build stage”, click “Skip build stage”. It will come up with a warning, click on “Skip”.
- Under “Add deploy stage”, select the “Deploy provider”, it should be set to “Amazon S3”. Set the region that corresponds with your S3 bucket, in my case this was “EU (Frankfurt)”. Then select the bucket, ensure that “Extract file before deploy” is checked, then click “Next”.
- Review and ensure everything looks good, then create “Create Pipeline”.
- Once the pipeline is created it will take you to a page like the below. Access your S3 bucket and check to see that the index.html file or files in the repo are there.
- Go to GitHub and make a minor change to one of the files. In my case the changes were updated instantly.
