Mount Fitz Roy Cerro Chaltén, South America

Deploying to AWS Amplify

  • ElPuas

  • 3/2/2021

Recently I have been testing various hosting services for my site, I have elpuas.com on Netlify, I have a test version on Gatsby Cloud, and now it's the turn of AWS Amplify.

So I gave myself the task of following the steps to create a hosting environment for my site.

What is Amplify?

AWS Amplify is a set of tools ( open-source framework, an administration UI, console ) and services ( static web hosting ) to accelerate the development of web and mobile applications on AWS.

AWS Amplify

As many of these services, they can get started free, so let's see the steps to follow to make my site with Gatsby in Amplify!

Create an Account & Add my Repo

To create our account, go to https://aws.amazon.com/amplify/ If you don't have an account, create one, and click the Get started for free button.

Dashboard Amplify

The link redirects you to the following URL: https://sandbox.amplifyapp.com/getting-started, here there are two options to choose from if you want to create a Backend or a Front End, in my case I click on the Connect App Repo on the Host my Web App panel.

To be honest, I thought it was going to be a more difficult, but it was very easy to get my site running in Amplify, of course, it is a simple site without a database (well, I use Google Sheets to manage some data) or access to an external API, Once we have created our account, we are going to add our repo, similar to Netlify or Gatsby Cloud, we authorize AWS to access our repo.

Setting our Repo

Connect the branch from the GitHub, Bitbucket, GitLab, or AWS CodeCommit repository. Connecting to the repository allows Amplify to push updates to every code change in the branch.

Then connect the master branch of the repository ( or the branch you want to deploy ), click on Next

In this view, I check the default build configuration (as in the picture. ), here you can also add your Enviroment Variables, or choose, as in my case gatsby build instead of npm run build.

Finally, I check the configuration one more time and if everything is ok, I click Save & Deploy to deploy my site.

The Amplify console will pull the code from my repository, make changes to the frontend, and start deploying at https://master.dq8tpziuyrsx7.amplifyapp.com/. As a bonus, it takes screenshots of my website on different devices to find design problems.

The deployment was successful, I can see in the admin UI:

You can visit elpuas in Amplify

Now that my site is up, and Amplify is connected to my repo, any changes I make to the branch will trigger a new deployment.

As you can see it was very simple and just a few steps to have my Gatsby site in Amplify.

Now that I've learned how to work with the Amplify Console, what are the next steps? I can add authentication to my application in Gatsby or Create an API with GraphQL.

You can also set up backends quickly with Amplify's user interface and intuitive CLI workflows to set up scalable AWS backends with authentication, storage, data, and other common use cases.

As always check the documentation first, and thanks for getting here.

© 2024 Built with Gatsby by El.Puas