How to Build a Website With Hugo and Amp Tutorial

Intro to how to build a website with Hugo and amp tutorial

Today we will focus on how to build a website with Hugo and amp, next we will host it on S3.

Last episode about performance you can find here:

React.js performance tutorial

Last days we noticed our blog is growing a lot in size, and performance is going down.

As max on slow 3g, we had even 7s to LCP that punished our SEO, and visits decreased three times.

We had to find out the way how to improve our performance and make our blog blazing fast.

And we’ve got some ideas on the static pages generator and AMP framework.

Now the blog is loading below 1s, and we have the lighting icon.

As a hosting, we’ve decided to go into the AWS S3 and Cloudflare as CDN.

I will share a separate article with a tutorial on how to set up AWS S3 and Cloudflare to use it as a very fast, secure, and cheap website hosting.

In the next sections of today’s article, I will show you step by step how we achieved that, and how to do it.

Let’s start!

And here is a step by step video, how I did all of that:

1.How to migrate from WordPress to Hugo

As the first step, we need to export our posts into the markdown format.

To do that, we need to download wordpress-to-hugo-exporter and unpack in yourpage/wp-content/plugins.

Here is the link to the GitHub repo:

https://github.com/SchumacherFM/wordpress-to-hugo-exporter

Next, we should run the exporter.

To do that you need to go into wp-content/plugins and type:

php hugo-export-cli.php

You need to remember to use PHP that you started your WordPress.

Next, create a directory related to the project and move your exported articles into this folder.

As the last step you should unpack archive that you’ve created.

We will use this archive after creating a project with Hugo.

2.How to install hugo

On Mac OS and Linux we can just use brew like:

brew install hugo

On windows we can use chocolatey or scoop:

Chocolatey:

choco install hugo -confirm

Scoop:

scoop install hugo

3.How to create a new project with Hugo

Creating a project with Hugo is very easy. You just need to open terminal and type:

hugo new site fastpage

Go into the directory:

cd fastpage

Start hugo:

hugo server -D

There is nothing yet, but it will be after we implement a template and post.

Sometimes you’ll need to restart the server when add or modify files.

4.How to select and install hugo template

To go with AMP, I will go with the theme amperage, it looks very nice, and you can easily modify that template.

Next, we need to go into our themes directory: /yourblog/themes

In the directory, we need to clone the template:

git clone https://github.com/asurbernardo/amperage.git

5.How to configure Hugo template

To start the project, we do not need to do so much.

Of course, in your project, you will need to set up stuff like URL, site name, or logo in config.toml.

But now we can just take whole stuff from the /yourblog/themes/exampleSite and copy it in our blog directory.

You need to remember about replacing the “config.toml” file.

Config.toml file is a file where you specify all the global info about your blog/website. You can specify a name, description, or your social media.

It’s good to spend some time there and add all of your info.

6.Add and configure content

You need to move two things into the new blog.

First, you need to take your posts from the exporter and move into the yourblog/content/posts directory.

The second one is to take your photos from wp-content and move into two places.

The main images should be in yourblog/assets, and photos from articles in the yourblog/static directory.

Now, we can go into the content.

The content from the exporter is mainly fine, but this one template requires small changes.

The first one is to introduce “image” as an object with a “url” prop.

To do that we need to open visual studio code and replace “featured_image:” with:

img:
 url:

The next one that we need to do is to change the author’s form, from “author:” to:

author:
 name:

That should be enough for a start, but if you have content like images or iframes, you should specify that as AMP elements.

As an SEO boost, it can be useful to add the description prop for the meta description as well.

7.How to build static pages

Building the Hugo is very easy. You can just open terminal and type:

hugo -D

That will create built content in the directory yourblog/public.

Take a look at these files, and especially images that are created in many sizes.

That will help AMP render the correct one, that depends on the device size, it’s perfect for the performance.

Don’t forget to rebuild the public always after changes.

8.Deploy to S3

In the next episode, I’ll show you step by step how to configure AWS S3 and Cloudflare to make high-speed, secure, and cheap web hosting.

Today I will tell you how to upload the built website or blog into the AWS S3.

To do that, you need to take all the files from the yourblog/public directory and push them into the S3 bucket that is configured as the hosting.

Remember to give the public read access to all the files that you upload to make it visible.

Otherwise, your website will not be accessible to other users, and Google will not see it as well.

Conclusion of how to build a website with Hugo and amp tutorial

Congratulations, your new blazing-fast blog is ready!

You can reindex all of these pages in Google and see how they’re starting indexing as AMP with the lighting icon.

AMP is handy for mobile, and pages can show as much better positions in search results.

In the next web performance tutorial, we will discuss how to host a static website on AWS S3 with Cloudflare.

I cannot wait to show you those exciting things!

And now, let us know how much your performance improved after these operations. I’m very curious about that, and I hope your blog or website benefits a lot!

Thanks for reading, Radek from Duomly

Twitter LinkedIn Pinterest