Host Gatsby.js site on amazon s3 with AWS CodePipeline

Host your Gatsby.js site on amazon s3 which is in GitHub repository by creating the webhook on codePipeline for continuous integration and continuous delivery and codeBuild to build the site. Assuming your Gatsby project is ready in GitHub and have an AWS account let’s get started.

GitHub:

1. Sign in to GitHub and go to the repository where your gatsby.js code reside(be in the root directory where package.json exists).
2. Click on create a new file and name it as buildspec.yml (which is later required for codeBuild).
3. Now copy the below code and paste in buildspec.yml.

Note: Don’t forget to enter your bucket name(for an instance www.yourdomain.com) in buildspec.yml, also indentation of the file is important. If you are not aware of the yaml file format you can use this yml validator.

4. Finally, click on commit changes.

Amazon Simple Storage Service(s3):

1. Sign in to the AWS management console and click on the Services tab under Storage select s3.
2. Press on create a bucket and Enter the domain name as your bucket name for an instance www.yourdomain.com.
3. Now click on create.
4. Under Properties pane choose Static website hosting.
5. Select Use this bucket to host a website and enter index document as index.html and error doc as error.html/404.html whatever you have written in your project.
6. In the Properties pane, select Permissions and choose Add Bucket Policy and click on save.

Note down the endpoint which can be used to alias in your DNS.

1. Create one more bucket by the name yourdomain.com only difference is that you will use this for the sake of redirection to the above bucket.
2. Under the properties tab choose Static website hosting and select Redirect requests, there enter the Target bucket or domain (above-created bucket www.yourdomain.com) finally enter the Protocol as HTTP or HTTPS and save it.

AWS CodePipeline:

1. Click on Services tab under Developer Tools select codePipeline.
2. Select the region where you need to create the pipeline.

3. Click on Get Started.

4. Enter the pipeline name and click on next step.

5. Under Source Provider drop-down select GitHub and click on Connect to GitHub. It prompts you to the GitHub login page which creates the webhook between GitHub and codepipeline. (Note: if you are not an admin/owner of the repository ask your admin/owner to provide the access).

• Select the Repository and Branch where your Gatsby.js project resides.
• Now click on Next Step.

6. Select AWS CodeBuild as your build provider from the drop-down.

• Under Configure your project, select Create a new build project.
• Enter the Project name.

Under Environment: How to build:

• Leave the Environment image to default.
• Select your OS like Ubuntu.
• Select Runtime as node.js.
• Select appropriate Version.
• Leave Build specification to default.

Under AWS CodeBuild service role:

• Select Create a service role in your account.
• Enter the Role name and click on save build project, once the build is saved click on the next step.

7. Let’s attach some policies to the role we created just now for the codebuild which provides permission to AWS on behalf of you.

• In another tab open the console and click on Services -> IAM -> Roles.
• Click on the Role you created just now in my case its code-build-test-project-service-role.
• Click on Attach Policies and select AmazonS3FullAccess later press Attach Policy.

This helps codebuild to put built Gatsby.js site to s3.

8. Under Deployment provider select No Deployment and click on Next Step.

9. Under the AWS Service Role click on create a role that creates a service role in IAM to provide AWS CodePipeline permission and press Allow later click on Next Step.

10. Takes you to Review your pipeline, once everything is fine click on Create pipeline.

Voila, you have hosted your Gatsby.js’s static site on s3. Copy the s3 endpoint http://www.yourdomain.com.s3-website.region.amazonaws.com and paste it in the browser to see the website. If you have configured it in your DNS then you can directly use www.yourdomain.com.

Steps explained above can be used to host any static website on s3 not only Gatsby.js only changes will be in the buildspec.yml where you can add more dependencies under install commands.