Home How to deploy a web with Amplify Hosting

How to deploy a web with Amplify Hosting


This is a practical use case where I will explain step by step how I deployed my blog using Amplify Hosting. I will use the AWS Console to do it.

The source code of my blog (web) is available here


AWS Amplify is a set of purpose-built tools and features that enables frontend web and mobile developers to quickly and easily build full-stack applications on AWS.

Amplify provides two services: Amplify Hosting and Amplify Studio.

  • Amplify Hosting provides a git-based workflow for hosting full-stack serverless web apps with continuous deployment.
  • Amplify Studio is a visual development environment that simplifies the creation of scalable, full-stack web and mobile apps. Use Studio to build your frontend UI with a set of ready-to-use UI components, create an app backend, and then connect the two together.

AWS Amplify is the fastest and easiest way to develop and deploy reliable and scalable mobile/web applications on AWS

How to deploy a web with Amplify

We need to have our code ready to be deployed in a supported repository.

  • Supported repositories: GitHub, Bitbucket, GitLab and AWS CodeCommit.
  • Another option is to deploy manually with drag and drop, Amazon S3 or any URL.

In AWS Console, enter to AWS Amplify service and choose Amplify Hosting

a) If you don’t have an Amplify app, this screen appears and you have to click on Get Started


and then choose Amplify Hosting


b) If you already have an Amplify resource click on New app and Host web app


Configure Amplify Hosting:

The first step to setting up Amplify Hosting is to connect your repository. In my case, I chose GitHub amplify3

Add repository branch: choose your repository and your branch amplify4

Configure build settings: Advanced settings are optional, allow you to reference your build image, add environment variables and override default installed packages amplify5

Review the configuration and click Save and deploy amplify6

Now Amplify must be provisioned, built, deployed and verified amplify7

At this moment an email notification will be sent to your email (at least in the GitHub case) amplify3.2

When finished, you will be able to access the new URL generated by Amplify amplify8 amplify9

How to associate my web with my domain name

We can also set up our Domain Name to our deployed website with Amplify Hosting easily.

To register the domain name I used Amazon Route53.

Use Route53 is not the cheapest option (e.g. I paid $12 to register the new domain with Route53 instead of $1 the first year with GoDaddy), but it’s worth it (to me)

In the side menu, click Domain management, and then click Add domain.


Choose your Domain and click on Save. As I register my domain with Route53, it appears in the text field when I click on it.


Now you can choose the branch, the subdomains and check for automatic redirect from HTTP to HTTPS, and click Save.


It may take several minutes to complete. First, you need to create the SSL certificate, then configure the SSL and finally activate it.

amplify13 amplify14

If we access the main page we can see that the URL has changed.


We can now access it with our domain name:


That’s it, quick and easy!

This post is licensed under CC BY 4.0 by the author.

How I decided on the technology behind the blog

How to create infrastructure with CDK