Skip to content

Publishing Your Next Gatsby Site to AWS With AWS Amplify

Nader Dabit
Nader Dabit
September 4th, 2018
Publishing Your Next Gatsby Site to AWS With AWS Amplify

In this post, we'll walk through how to host & publish your next Gatsby site to AWS using AWS Amplify.

AWS Amplify is a combination of client library, CLI toolchain, UI components & CI / CD hosting platform. Amplify allows developers to get up & running with full-stack cloud-powered applications with features like authentication, GraphQL, storage, REST APIs, analytics, Lambda functions, hosting & more.

Using the Amplify console, you can now easily deploy your application to AWS with built in CI / CD & atomic deployments.

Getting Started - Gatsby

First, we'll want to create a new Gatsby project. If you don't already have Gatsby installed, install it:

npm install --global gatsby-cli

Next, we’ll create a new Gatsby site:

gatsby new my-gatsby-site

Finally, change into the new site directory:

cd my-gatsby-site

Getting Started - AWS Amplify

Now that we have our Gatsby site up & running, let's add hosting & make the site live on AWS.

To do so, create a new GitHub repo & push the project to the repo.

git init
git remote add origin git@github.com:<username>/<projectname>.git
git add .
git commit -m 'initial commit'
git push origin master

Now that the GitHub project has been created we can log into the Amplify Console.

From here, under Deploy we can click GET STARTED:

Amplify Console

Next, we'll choose GitHub as our repository & click Next.

Choosing repo

Then connect the mater branch of the new repo we just created & click Next:

Choosing branch

In this view, we can review the default build settings & click Next to continue:

Build settings

Finally, we can review the deployment & click Save & Deploy when we're ready to deploy our app:

Deploying

Once the deployment is successful, you should see this:

Successful deployment

To view details of the deployment, click on the name of the branch (in our case, master).

In this view, you can see details about the deployment including a link to view the app & screenshots of the app on different devices.

Deployment details

Kicking off a new build

Now that our app is deployed, let's take it one step further. The Amplify Console will automatically watch your master branch & kick off a new build whenever new code is merged. Let's test this out.

Open src/pages/index.js & replace the following line:

<h1>Hi people</h1>

with this:

<h1>Hello from Amplify</h1>

Save the file & push the changes to your master branch:

git add .
git commit -m 'updated heading'
git push origin master

Now, when we go back into the Amplify console we’ll see that a new build has been started:

New build

When the build is completed & we launch the app, we should now see our new heading:

New build completed

Next Steps

Now that you've gotten the hang of working with the Amplify Console, what are some next steps?

If you're interested in adding authentication to your Gatsby app, check out this Gatsby Auth Starter I published.

If you're interested in adding new features to your Gatsby app (like authentication or a GraphQL API), check out the Amplify CLI & Amplify Client libraries.

You may also be interested in working with multiple environments or teams. If so, check out the documentation on how to get up & running with teams or have a look at this post that I wrote.

Nader Dabit
Written by
Nader Dabit

Talk to our team of Gatsby Experts to supercharge your website performance.