How to Deploy a Website in Ten Minutes on AWS Amplify Using Hugo

In this post, you will learn how to set up and deploy a website using Hugo (AWS Cloud9’s Integrated Development Environment (IDE) for Content Management), aws code commit for source code management, and aws boost Automated deployment process, for serving source-based websites.

Start by provisioning the AWS Cloud9 IDE.

AWS Cloud9 The environment is based on the Amazon Elastic Compute Cloud. You will need to provision an AWS Cloud 9 environment in your AWS account to a public subnet in the Amazon Virtual Private Cloud.

This can be done with the following steps:

  • Sign in to your AWS account with credentials that have administrative privileges. If you do not have an AWS account, you can create one.

  • Open Cloud9 Console and click create environment,

image.png

  • to select Next Step,

  • In the Environment Settings section, under Environment Type, select Create a new environment EC2 instance (direct access),

image.png

  • For Instance type, select the desired instance type.

image.png

  • For Network, under Network Settings (VPC), select the VPC that will host your AWS Cloud9 instance.

  • Select the public subnet of this VPC to deploy.

  • Leave all other settings unchanged and select Next Step,

  • Review and choose selections create environment, It takes a few minutes to set up the surroundings.

image.png

  • When your environment is ready, you can access the AWS Cloud9 IDE from your browser.

image.png

Use AWS CodeCommit, a fully managed resource management service that hosts secure Git-based repositories.

  • Open the CodeCommit console in a new browser and create a new repository.

image.png

  • In Repository Name, enter boost-website,

  • Enter a suitable description.

  • to select to create,

image.png

It takes a few minutes to create the repository.

  • In the AWS Cloud9 IDE, return to your browser and place your cursor in the bottom terminal window of the IDE.

  • Enter the following code to download and unzip the current example website saved as a .zip file.

cd ~/environment
aws s3 cp s3://ee-assets-prod-us-east-1/modules/3c5ba9cb6ff44465b96993d210f67147/v1/example-website.zip ~/environment/example-website.zip
unzip example-website.zip
rm example-website.zip

enter fullscreen mode

exit fullscreen mode

The following screenshot shows the result.

image.png

  • Then run the command to create a directory to host and start the website by copying the files from the example website.
mkdir ~/environment/amplify-website/
cd ~/environment/amplify-website/

enter fullscreen mode

exit fullscreen mode

  • Next, create a new default branch named local master on your AWS Cloud9 instance. Then copy the files from the example website.
git init
git remote add origin codecommit::us-east-1://amplify-website
git remote -v
git checkout -b main

enter fullscreen mode

exit fullscreen mode

image.png

  • Adding and committing locally commits all changes to the remote Amazon Codecommit repository.
cp -rp ~/environment/example-website/* ~/environment/amplify-website/
git add *
git commit -am "first commit"
git push -u origin main

enter fullscreen mode

exit fullscreen mode

  • In the Amplify console, select get started,

image.png

  • to select increasing hosting And click on Get Started.

image.png

  • On the Getting Started with Amplify Console page, select aws code commit as your source code repository.

image.png

image.png

image.png

  • On the Review page, select save and deploy,

image.png

Amplify builds and deploys your Amplify site in minutes and shows you progress.

image.png

After the implementation is complete, you can visit our website to view sample materials.

image.png

The following screenshot shows an example website.

image.png

You can now update the text string on the home page and commit and publish this change.

  • In the AWS Cloud9 IDE, return to your browser and place your cursor in the bottom terminal window of the IDE.

  • In the navigation pane, select ~/environment/amplify-website/workshop/content/_index.en.md,

image.png

The contents of the file will open in a new tab in the top panel.

image.png

  • In AWS Cloud9, run the following command in the lower terminal window to make the changes.
git add *; git commit -am "homepage update"; git push origin main

enter fullscreen mode

exit fullscreen mode

  • Return to the Amplify console to see how it automatically detects changes.

image.png

Amplify walks you through the steps to make changes to your website.

  • After this update is complete, visit the website URL to see if the home page title has changed.

image.png

You can repeat this process to make automatic, source-based changes to your website.

By adding a custom domain to your Amplify setup, your customers can easily access your content. You can register new domains through Amazon Route 53 Or if you have domains registered outside of AWS, you can integrate with Route 53 and Amplify.

For our use, the domain www.makeendran.study A domain name is registered by a third party registrar. Route 53 allows you to manage DNS configuration for domains registered outside of AWS.

Start by setting up a public area on Route 53.

  • In the Route 53 console, select Hosted Zone.

  • to select create hosted zone,

  • enter makendran.study as domain name.

  • Enter a suitable description.

  • Under Type, select public hosted area,

image.png

image.png

  • In a different browser, access the DNS registrar console.

  • Configure custom DNS name server settings in the Remote Domain Name Registration console. This configuration points to the Route 53 destination name server as the authoritative DNS for your custom domain. For this purpose, this change notice may take up to 48 hours.

image.png

  • Use https://who.is to verify that your AWS nameservers are listed correctly for your custom Internet client domains.

Now you can set up custom domain in Amplify.

Amplify allows you to configure DNS and configure SSL for any custom domain you want.

  • In the Amplify console, under app settings Choose domain management,

image.png

image.png

image.png

  • For subdomains, set www and choose to exclude custom domain root.

image.png

image.png

Amplify starts the SSL certificate creation process. After a while, you will be taken to your SSL configuration and will see a domain verification in progress.

image.png

The host verifies domain ownership by creating an instance CNAME record in the zone file. Once ownership is verified, your domain is deployed to Amazon CloudFront distributions managed by Amplify and domain activation is complete.

image.png

Customers can now access website with custom domain name www.makeendran.study,

image.png

To align with CodeCommit’s development code branch, Amplify creates a development website so you can test changes before they go into production.

  • Go to AWS Cloud9 IDE and type the following command to create a development branch using terminal.
git checkout -b development
git branch
git remote -v

enter fullscreen mode

exit fullscreen mode

  • Modify the content to push the changes to codecommit using the current content from the master branch.
git add *; git commit -am "first development commit";
git push -u origin development

enter fullscreen mode

exit fullscreen mode

  • open and edit file ~/environment/amplify-website/workshop/content/_index.en.md And change the update path for the website to something else.

image.png

  • Capture and push changes with the following code.
git add *; git commit -am "second development commit"; git push -u origin development

enter fullscreen mode

exit fullscreen mode

image.png

  • For Branch, select the development branch you just created.

image.png

  • Select and click Next save and deploy,

image.png

Amplify will create another website based on the content of the Development Branch. In the Amplify console, you can see instances of your website that belong to the development code tree.

19090412.png

  • In Amplify, access domain management Menu item to add a custom subdomain.

  • Edit the domain and add a subdomain entry with the desired name.

image.png

19090442.png

New content is hosted on the development site, so you can restrict access.

  1. In the Amplify console, select Application,

  2. to select access control,

19090444.png

  1. Under Access Control Settings, select the desired settings. You have the option to restrict access globally or per site.

image.png

image.png

  1. Select and select the application you just created in the Amplify console delete app From the Actions drop-down menu.

  2. In the CodeCommit Dashboard, select the repository you have created and select delete,

  3. Select and select the IDE you created in the AWS Cloud9 Dashboard delete,

Please watch the video below to see the full demo.


Hugo is a powerful tool for quickly distributing content in a variety of formats, including image portfolios, online resume presentations, blogs, and technical articles. Amplify Console provides a convenient, easy-to-use static web hosting service that dramatically speeds up the delivery of static content. With features like an easy-to-use URL, code-level experience, and encryption (SSL), Hugo and Amplify consoles work together to quickly deploy a website in minutes.

  1. Welcome to AWS Amplify Hosting
  2. Hugo
  3. How do I create and activate a new AWS account?
  4. Amazon Route 53
  5. Hosting a Static Website Using Amazon S3
  6. NGINX Plus on AWS
  7. AWS CloudFormation
  8. mkdox
  9. AWS Cloud9
  10. aws code commit
  11. Amazon S3
  12. Agile Website Delivery with Hugo and AWS Amplify

Leave a Comment