Part 2 - Creating a blog with Hugo, Github and Azure Static Web Apps

Posted by pen on Sunday, June 19, 2022
Reading Time: 7 mins

This post in the second of the series where I run through the process I used to create this blog and host if for free, using VS Code, Hugo, Github and Azure Static Websites.

What you will need:

The objective of this post is to create our blog that looks somehing like this

Finished Blog

Step 1 - Setup important folders.

Open your website folder in VS Code, if you followed the previous post your folder structure should look as follows:

Folder Structure

Content folder

This is where we will store our blog posts and pages.

Create the folder content in the root directory if it doesnt exist and add the following sub folders:

  1. post - we will store our blog posts in this folder
  2. top - we will create some pages that will be linked from the top menu.

Static folder

The static folder is where we store assets for the site, to get stated create a new sub-folder called img we will add our graphics to this folder. We can also store custom css and other artifacts in the static folder, and in Part 4 we will add some custom CSS.

Step 2 - Configure basic settings in the config.toml file.

Open the config.toml from the root directory, lets step through this line by line:

The baseurl is the URL you will want to readers to access your blog, we will configure the DNS for this in part 3.

baseurl = ""

The title is the name of your blog, and is used in the template to display the site name.

title = "Statto Fantasy Football Blog"

Next is theme, I am using the hugo-theme-cleanwhite, if you are using a different theme add that here.

theme = "hugo-theme-cleanwhite"

The default language I have set in en-us english.

languageCode = "en-us"

Disqus is used for comments on posts and pages, you can set a free account and you will need the disqusShortcode to add to the following line

disqusShortname = "statto-fantasy"

Disqus comments will display at the bottom of posts and pages like this:

Disqus Comments

The theme supports Google Analytics, add your “G-” tracking code here.

googleAnalytics = ""

Leave the following line as true.

preserveTaxonomyNames = true

The paginate settings sets how many articles on the home page are shown before paging is applied, I set this to 5.

paginate = 5 #frontpage pagination

If your default language is CJK format set this to true, I don’t so set it to false.

hasCJKLanguage = false

Save the file, if we run the local server now using hugo server our site should look like this: Basic Settings

Step 3 - Configure basic Params.

The next section of the config.toml is the outputs, leave this as it is, these are the outputs Hugo creates when compiling the site.

  • The HTML output creates the sites html.
  • The RSS output creates an RSS feed of your posts.
  • The Algolia for search output, more about this in Part 4
home = ["HTML", "RSS", "Algolia"]

The next section is the [params] section, configure the following settings in the this section. We will come back to this section.

  header_image = "img/background.jpg"
  SEOTitle = "Statto Fantasy Football "
  description = "Power Platform Premier League Fantasy football game."
  keyword = ""
  slogan = "It's just a game."

  image_404 = "img/404-bg.jpg"
  title_404 = "Oh no something went wrong :("
  omit_categories = false

  # Sidebar settings if you want the sidebar to show information about you set it here
  sidebar_about_description = "About Me"
  sidebar_avatar = "img/avatar.jpg" 
  # Show featured tags and how many articles needed for a tag to display
  featured_tags = true 
  featured_condition_size = 3 

   disqus_site =  "[disqus site name]"

   friends = true
   bookmarks = false
   about_me = true

Step 4 - Add a header image

Choose an image you would like to use as the header for your blog, and copy it to the static/img folder.

Replace the header_image filename with your image filename.

Now if you left the Hugo server running your local site will update when ever there is a save.

Add Header Image

  rss            = true 
  email          = ""
  #facebook      = "full profile url in facebook"
  #googleplus    = "full profile url in googleplus"
  #twitter       = "full profile url in twitter"
  linkedin       = ""
  stackoverflow  = ""
  #instagram     = "full profile url in instagram"
  github         = ""
  #wechat         = "your wechat qr code image"
  #medium        = "full profile url in medium"
  #slack         = "full workspace url in slack"
  #pinterest     = "full profile url in pinterest"
  #reddit        = "full profile url in reddit"
  #gitlab        = "full profile url in gitlab"
  #mastodon      = "full profile url in mastodon"
  #keybase       = "full profile url in keybase"
  #xing          = ""
  #git           = "full profile url for git user"

Add your social urls to the list, in part 4 we create a new social link for Mixcloud.

Friend links show in the sidebar and are configured as follows:

  title = "Matthew Davenay"
  href =  ""

  title = "Pen Warner"
  href =  ""

Book Links are configured as follows:

  title =  "Power Platform Admin"
  href =  ""
  title = "Premier League"
  href =  ""
  title =  "BOOKS"
  href =  "/top/books/"
  title =  "ARCHIVE"
  href =  "/top/archive/"
  title =  "ABOUT"
  href =  "/top/about/"

The top menu link to pages, in our example we will delete the BOOKs menu item, and will create content pages for archive and about.

Save the file. Our site should now look like this: Menus

Step 9 - Create the About Me and Archive pages.

If you haven’t done so already install the VS Code extension Frontmatter, it’s a headless CMS (static website) content manager and is by far my favorite extension.

Once installed, click on the Fronmatter Icon on the rail, and click Initialise Project Frontmatter

Next click on the Open Dashboard Link.


Under Framework Presets select Hugo

Next we will add folders content/top and content/post as our content folders, click bback to the file list.

Register content folder

Now click on Open Dashboard


Click on Create Content and select top Frontmatter

Name the file archive and click enter. archive This will create our file with the following content.

title: archive
description: ""
date: 2022-06-20T05:58:07.833Z
preview: ""
draft: ""
tags: ""
categories: ""

Replace with the following, these headers will automatically create the posts archive display, nothing else needs to be added to this file.

title: "Posts Archive"
layout: archive
type: archive
description: Archive of historical posts.

Save the file and close the file.

The Frontmatter dashboard will now show our new file.

new file

Click on Create Content and select top Frontmatter

Name the file about and click enter.

Now we can create our About Me page.

title: About Me
description: "This page is all about me."
date: 2022-06-20T06:09:15.536Z
image: "/img/about-me-header.jpg"
draft: ""
    - Blog
    - About Me
    - Blog

## About Me

Add some more content here in __Markdown__

Click save, now if we navigate to the About Me top link it will show our page.

About Me page

Step 10 - Create the first Hello World Post.

For the final step in this post we will create our first post.

In the Frontmatter dashboard click on Create Content, but this time choose post as the location.

Name the post Hello World.

Update the content of the file to:

title: Hello World
description: This is our first hello world post.
date: 2022-06-20T06:35:42.348Z
preview: ""
draft: false
    - Hello World
    - First Post
    - Blog

## Hello world and welcome to my blog

Hope you enjoy your visit.

Save the file and commit the changes to the repository.

Now our finished basic site should look like this:

Home Page

Finished Basic site

About Page


Archive Page


That’s it for this time, next up we will create the Azure Static Website and publish to the web…

comments powered by Disqus