Introduction

I used to be a wordpress fan. I had a lot of plugins to do a lot of things (that I thought I needed). However Static Web Sites (SWA) has made me a convert. Its simple, I can write from my fav IDE or for that matter any device and version control my posts and website configuration. I think the freedom it gives in not being dependent on 3rd party plugins - is a game changer for me personally. There are a few flavours to choose from, however today I am with Hugo. I wanted to share my experience for the past month a bit that I have spent getting it to work on Azure.

I have split this into two posts / parts.

Part 1 - Building your Hugo Website Locally

Part 2 - Publishing to Github and Azure SWA

Hugo Build Locally

Linux Deployment

  • Installation of Hugo on your development box can be completed in the following manner

     https://github.com/gohugoio/hugo/releases \\ get the latest version of hugo
 wget https://github.com/gohugoio/hugo/releases/download/v0.122.0/hugo_0.122.0_linux-amd64.deb
 sudo dpkg - i hugo_0.122.0_linux-amd64.deb

Windows Deployment

  • Installation of Hugo on your development box can be completed in the following manner
\\ Using Winget
winget install Hugo.Hugo.Extended
\\ Using Chocolate
choco install hugo-extended

Website Deployment

  • Post installation choose the location for hosting your files.

      hugo new site MyFreshWebsite --format yaml
  # replace MyFreshWebsite with name of your website
  cd MyFreshWebsite
  git init
  git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
  git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)
  git submodule update --remote --merge

alt text

  • Now that you’ve got the hugo platform build within the folder, browse into it and let’s start tweaking by opening hugo.yaml on your fav editor.

      baseURL: https://example.org/
  languageCode: en-us
  title: My New Hugo Site
  theme: ["PaperMod"]

  • You can now choose to run the following commands to get a feel for the website

    hugo -D \\ if you have any drafts in the content - it would build those as well
hugo serve \\ will server the website using localhost and a port

alt text alt text

  • Yay ! You have a working Hugo Website. There are plenty of Themes to choose from. Based on your requirements try a few and see which one appeals to you.

First Blog Post

  • Let’s now get cracking with creating your first post. So posts are stored under the content folder within your hugo website.

alt text

  • To create your first post, using the default post template (look inside archetypes to make new ones)
hugo new posts/NameOfTheNewPost.md

alt text

  • The new post (Markdown file) will now show up within the content folder.

alt text

  • Edit your blog post from your fav IDE

alt text

  • Some small tweaks to add some navigation to our website
    • Edit hugo.yaml with the following code. This is engine of your website. There is so much to tweak and get the best out of hugo from here. This is just a base config to get you going.
---
baseURL: https://example.org/
languageCode: en-us
title: My New Hugo Site
theme: ["PaperMod"]
paginate: 4
defaultContentLanguage: en

enableRobotsTXT: true
buildDrafts: true # 

minify:
  disableXML: true
  minifyOutput: true

outputs:
  home:
    - HTML
    - RSS
    - JSON # necessary for search

menu:
  main:
    - identifier: home
      name: home
      url: /
      weight: 1
    - identifier: posts
      name: posts
      url: /posts/
      weight: 3
  • Let’s get a preview of our website locally, before we are ready to publish this to the world!

alt text

Part 2 - Publishing to Github and Azure SWA