Creating This Page

As my first post, I think it is appropriate to have a post about how to build a site like this. This “guide” is not a complete tutorial but gives you a good idea of how it can be done. I am skipping over some of the steps here, but you will get the basics.

What you need

  • Hugo framework
    • A theme to use with Hugo.
  • A GitHub account for version control.
  • A Azure account to deploy a Static Web App.

Prerequisite to install Hugo:

  • Git
  • Go (If you get an error that says that gcc is missing, use this command to install it: apt install build-essential)

Optional:

Setup your Hugo framework

I did set up a virtual machine with Ubuntu Desktop 20.04.4 LTS as my development environment. It is not necessary to use Ubuntu or a virtual machine. It is up to you, and there should be no problems using other operating systems. I did choose to have a virtual machine with Ubuntu, so I could have my development environment divided from my “normal” system.

After you have decided and/or created your development environment, go ahead and install Git and Go. Check if installed correctly using the command below in Ubuntu:

git version && go version

Then go ahead and install Hugo to your system. I did follow the guide from gohugo.io and installed it from GitHub. After Hugo is installed, set up git to use your account if it doesn’t already. Karl Broman has a good guide to use for this.

The next step is to install a theme. Choose a theme and install it. The recommended method is to use the GitHub submodule.

git submodule add https://github.com/<github_username>/<theme_name> themes/<theme_name>

# Add theme to config.toml
echo theme = \"<theme_name>\" >> config.toml

Before starting to edit your site, I recommend that you install Visual Studio Code or another editor of your choice.

The first page

Use the command below to create your first page:

hugo new posts/my-first-post.md

Open the file in your chosen editor and use standard markdown when writing the page.

To view the result you can start Hugo on your localhost and view the page.

hugo server -D

Or use Hugo to generate the page:

hugo -D

There is a lot of different configuration that can be done to the page, but I will not go further into that at this moment.

Push the site to a repository on your GitHub.

Azure Static Web App

If you don’t have an account on Azure, make it and enable the free trial tier. Create an Azure Static Web App and provide the information it asks for.

Subscription = <The subscription that was created after you enabled the free trial tier, or a previous subscription you have>

Resource Group = <Create a new one for the static site>

Name = <Give it a name>

Plan type = <Choose the free one>

Region = <Choose your region>

Deployment details = <choose GitHub>

Click on "Sign in with GitHub"

Organisation = <Your private GitHub account>

Repository = <The repository your site is on GitHub>

Branch = <What branch you want to use>

Build Preset = <Choose "Hugo">

App location = <"/">

Api Location = <Leave blank>

Output location = <Folder where the created site lives in your repository. In this case "public">

Click Review + create.

Click Create.

Wait for the job to finish, and click Go to resource in the upper right corner. Now it is possible to view the page via the URL found in the overview page in the Static Web App.

Optional - Custom Domain

As you now have access to your page using the URL that Azure gives you. That URL is not an address that is easy to remember, so the next step is to create a custom domain. Go to Custom domains on the left side in Azure when you are in your Static Web App. Use the domain you have bought, and follow the guide to edit the configuration on your admin page where you bought your domain. After some time your domain should work.

hugogoubuntugithubazureStatic Web AppCNAMEDNS