Creating a Static Website using AWS Amplify

Creating a static webiste has never been easier. No need to learn HTML or CSS to create the perfect website. We have tools like hugo that takes in a simple Markdown file and converts it into a super easy and well-polished blog. But of course, creating the blog is only the first step. We need to be able to host it so that others can view our blog. That is where we can use both AWS Amplify and AWS Route53 to help us push our static website and host our static website. First, we’re going to take a look into hugo and see how exactly can we use it for our static website pages. Next, we’re going to create an amplify.yml file for AWS Amplify to use in order to build the website. Finally, we’re going to take a domain from Route53 and tie to our AWS Amplify job.

Pre-requisites Link to heading

  • Amazon Web Services Account
  • Github Account and basic git commands

Because we are using AWS as our platform, you will be billed for the domain name as well as usage. It should be around $20 for this project.

Hugo Link to heading

Hugo is an opensource framework for building static websites. It takes markdown files and converts it to a static website. This means we don’t have to write any HTML or CSS code. Hugo provides a directory structure for content as well as themes to create the website. Let’s take a look at installing hugo.

Go to the hugo installation site. Choose your operating system and go through the installation process. I’m going to be using the Command Line for the hugo commands to test the website.

Once you’ve installed hugo, we need to create a repo in Github so that we can perform version control on our markdown files and have AWS Amplify point to the master branch.

Click on the button to create a new repository and follow the prompt to create the repository.

Once you have created a new repository for our project, we are going to clone the project to our local machine. Type git clone <GIT URL> to clone the repository.

Now that we have our repository, we need to create a branch to do our work in. On the top of the repository, we can create our new branch as follows:

On our local machine, we use the git switch command followed by our branch name to switch our new branch.

We are now ready to begin creating our directory structure in hugo and to do that, we can install the blowfish-theme.

Blowfish-Theme Link to heading

When creating a hugo website, we can use pre-made themes. One of the easiest themes to use is blowfish. The main reason for this it installs via npm and it can be used to create a whole directory structure in hugo. Plus, if you don’t like blowfish, you can still use blowfish-tools to add new sections or pages.

To install the blowfish theme, we need to use npm. Once, we have npm installed, type the command npm i -g blowfish-tools. If you installed it properly, type blowfish-tools and you should see a picture of a blowfish.

Looking at the options, we need to create our directory structure. Change your directory to where you git repo is and run the blowfish-tools command. Select the first option to setup a new website.

Creating Section Header and Page Link to heading

Now that we have our directory structure created, we need to create three components:

  • Menu Header
  • Section
  • Article

The Menu Header is for the section traversal. This allows the user to click on the particular section and see a list of articles within that section. Sections are used to separate your articles depending on your grouping.

Let’s start up blowfish again by typing blowfish-tools. You should see that the options have changed to the following:

We need to create our Menu Header first. Select the Configure menus option. From the options, select Create new menu. Give a name to your new menu. Remember what this name is because we will use it for our section. Select Go Back to go back to the main menu.

Now we are going to create a section. Select the option to Generate a new site section. Give it the same name of your menu header. Finally, we are going to create our article. Go back to the to the main menu and select the option Generate a new article. Choose the section you created and give the article a name.

Whoo hoo! We now created our first article! We can edit this article by going into the content directory and finding our section. Inside the section directory should be our article which contains an index.md file. This is the file you edit. Since its a markdown file, you can use markdown specific language.

Testing and Merging Link to heading

To test out our new website, we can use the hugo server -D command to create a local website on localhost:1313. This website will show up with our new menu header. When we click on it we should be taken to our section which should contain our article.

Just a heads up! If port 1313 is already in use, hugo will find the next available port to use.

Once we are satisifed with the way our website looks and functions, we can push our code to our branch and create a Merge Request into our main branch. DO NOT push the public directory into your branch. This gets auto generated everytime you perform a hugo server command.

AWS Resources Link to heading

We have our local website created. The next thing is to host it in the cloud. I’m using Amazon Web Services (AWS) as my cloud provider of choice. AWS has this “AWSome” service called AWS Amplify. It takes away the complexity of creating individual resources in the cloud. Amplify can also create an environment for building (if any) executables inside of a docker container via the amplify.yml file. Amplify also takes care of your TLS/SSL certificates by creating one from Amazon Certificate Manager (ACM). The only thing Amplify requires is a git branch to use to build the artifacts. We will be using our main branch for Amplify to use.

Amplify Link to heading

Before we open up Amplify on our AWS Console, we need to create our Amplify build specification file called amplify.yml. This file is a collection of build settings and commands that Amplify uses to run our build. This hugo article has a great amplify.yml file we can use. We just need to add a few modifications to that file.

For this build file, we need to create it at the root of our github project. Create the file using the touch command.

touch amplify.yml

The contents of the amplify.yml file is as follows:

version: 1
env:
  variables:
    # Application versions
    DART_SASS_VERSION: 1.81.0
    GO_VERSION: 1.23.3
    HUGO_VERSION: 0.139.3
    # Time zone
    TZ: America/Los_Angeles
    # Cache
    HUGO_CACHEDIR: ${PWD}/.hugo
    NPM_CONFIG_CACHE: ${PWD}/.npm
frontend:
  phases:
    preBuild:
      commands:
        # Install Dart Sass
        - curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
        - sudo tar -C /usr/local/bin -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
        - rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz
        - export PATH=/usr/local/bin/dart-sass:$PATH

        # Install Go
        - curl -LJO https://go.dev/dl/go${GO_VERSION}.linux-amd64.tar.gz
        - sudo tar -C /usr/local -xf go${GO_VERSION}.linux-amd64.tar.gz
        - rm go${GO_VERSION}.linux-amd64.tar.gz
        - export PATH=/usr/local/go/bin:$PATH

        # Install Hugo
        - curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz
        - sudo tar -C /usr/local/bin -xf hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz
        - rm hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz
        - export PATH=/usr/local/bin:$PATH

        # Install blowfish
        - npm install -g blowfish-tools

        # Check installed versions
        - go version
        - hugo version
        - node -v
        - npm -v
        - sass --embedded --version
        - blowfish-tools --version

        # Install Node.JS dependencies
        - "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci --prefer-offline || true"

        # https://github.com/gohugoio/hugo/issues/9810
        - git config --add core.quotepath false

        # Update blowfish
        - blowfish-tools update
    build:
      commands:
        - blowfish-tools generate
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths:
      - ${HUGO_CACHEDIR}/**/*
      - ${NPM_CONFIG_CACHE}/**/*

If you look at the amplify.yml file, I added the blowfish commands to be installed into our amplify environment. I also replaced the hugo --gc --minify command with a blowfish-tools generate command such that our public directory gets built by blowfish instead of hugo.

Once you’ve added that file to the root of the project, push the change to main and you’re ready to start using Amplify. The hugo article on Amplify has a good set of instructions on how to attach your main branch to Amplify. Feel free to follow those steps to get your Amplify environment setup.

Route53 Link to heading

We got our Amplify environment setup with an Amplify URL. But as we all see, the url is not the easiest to remember. That’s where Route53 DNS comes in. Route53 is an AWS service that provides hostnames to AWS infrastructure. Think of it like your GoDaddy but in AWS. I’m going with Route53 because its easier to integrate with AWS Amplify.

  1. Navigate to the AWS Route53 Console and click on Hosted Zones on the left.
  1. Click on the orange button that says Create hosted zone.

  1. Enter in a valid unique hostname. You want to choose something easy to remember. Make sure the type is Public.

  2. Once you’ve entered the hostname, click the button at the bottom to Create hosted zone.

Now that we completed the Route53 part, we need to go back to Amplify and attach our new hostname to our Amplify URL.

  1. Navigate to the AWS Amplify Console and select the Amplify App.

  2. On the left, select Custom domains.

  1. On the right, click the purple button that says Add domain.

  1. Leave everything as default. Setup your redirect by clicking on the checkbox

  2. For the section Custom SSL Certificate, click on Amplify managed certificate. Then click on the purple button at the bottom right to Add domain.

Give it some time for Amplify to create the connection to the Route53 domain and adding the TLS/SSL certificate. Once its setup, go to your created hostname. You should see your new website with the article you created. That’s pretty much it! It’s super simple and easy to do and there is no coding involved. Just make sure you monitor your AWS Bill to make sure your bill is consistent. Look into creating a Bill alarm in case your payment goes above a particular value. And don’t forget to keep sharing your ideas on your website! Happy writing :D