Simple Static Website creating with Hugo and Deploying with Amplify Console

The fastest create /deploy procedure for static website.

Hugo for implementation, Amplify Console for deployment

How do you create static website ? Recently Markdown format became popular and many types of convert/deploy tools were released.

So in this article, introduce one of the simplest and easiest way to create a website from beginning.

1. Create a website with Hugo (from ZERO)
2. Deploy the website with AWS Amplify Console.

TL;DR

https://github.com/kojiisd/web-kojiisd/tree/0.1

1. Create a website with Hugo

1–1. What is Hugo ?

Hugo is “the world’s fastest framework for building websites” as it says.Hugo’s Go-based templating provides just the right amount of logic to build anything from the simple to complex. For more information … see official site.

The world's fastest framework for building websites

1–2. Start to create a website with Hugo

After Hugo install and create a template of website with following command.

$ hugo new site web-kojiisd

In this time, achieve simple website (only top page) as a capture below.

Image of a website

1–3. Modify layouts and prepare each logo images

|--config.toml
|--layouts
|  |--index.html
|  |--partials
|  |  |--site_footer.html
|  |  |--site_head.html
|  |  |--site_header.html
|  |  |--site_main.html
|  |  |--site_option_import.html
|--static
   |--css
   |  |--custom.css
   |--favicon.ico
   |--images
      |--github.png
      |--logo_kojiisd_small.png
      |--maintenance.png
      |--qiita-square.png

Only above files are created / prepared for the website. For each html file, you can see on my github (Since just top page only, no markdown text).

2. Deploy the website with AWS Amplify Console.

Using AWS Amplify Console, we can deploy it easily.

2–1. Register repository to Amplify Console

After registration, Amplify Console can detect your repository structure and put configurations (amplify.yml) as “Hugo” contents. (Same as Netlify)

version: 0.1
frontend:
  phases:
    build:
      commands:
        - hugo
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

2–2. Build and deploy the website

After generating above, you can start build and finish it safely.

Build can be finished safely

2–3. Put custom domain

As website, you can put custom domain. I just got the domain on Freenom.

Custom domain configuration.

Conclusion

As above, it’s very easy and speedy to create/maintain website with Hugo and AWS Amplify Console.