Hugo Blog on Azure

Summary

I decided to give blogging a try. I setup the most cost-effective solution I could come up with; static-html hosting on cloud blob-storage.

Initially I tried using Jekyll to generate my static pages, but due to the clunky tooling available (especially on Windows) I looked for other solutions. That is when I found Hugo. They have great documentation, modern CLI and great tooling, regardless of your OS preference.

Since I already have a Microsoft Azure account, I decided to host my static files there. Here is how I set-up my blog, from Hugo installation on Windows to publishing to the cloud.

Install Hugo on Windows

The easiest way to install Hugo is through a package manager called Chocolatey.

Once chocolatey is installed, run the following at command line/Powershell:

choco install hugo -confirm

Voila! Installation is complete.

Setup a basic blog

• Create an easy to find folder for your blogs, let’s say C:/blogs
• Run the below command, this will create a blog in the folder hugo_blog

hugo new site hugo_blog

• Now you need to get a theme for your blog, https://themes.gohugo.io/ has some solid options. Each theme has a github page with instructions on how to install.
• Once, your theme files are in your hugo_blog/themes/… and your config.toml has been updated, time to create your first post by going to your hugo_blog directory and running the command

hugo new posts/my-first-cool-post.md Be sure to have the extension, otherwise you will have problems rendering that page. If you forgot go to …hugo_blog\content\posts and delete the generated file here and try again. Do not try to rename the file and adding the extension, as this will not work.

• You can now edit my-first-cool-post.md if you like. To test run your generated blog, go to your blog root hugo_blog and run the command

hugo server -D If you did everything correctly you should now be able to view your blog locally by going to: http://localhost:1313/

Setup Azure Storage

• After signing up for Microsoft Azure, search for storage account if you haven’t set it up already and click Add.

- Fill out the configuration with your desired names, and with these settings.

- After creating the storage account, open it and navigate to **Static Website*** under Settings. **Primary endpoint** is how you will access your published blog (for now). Make sure to add **index.html** to your **index document name** field, to establish your website's entry point.

Publish to Azure using VS Code + Azure Storage Extension

• To get a compiled, release version of your blog, run the simple command below. This will generate a static html version of your blog into the public folder at the root of your blog

hugo

• I use Visual Studio Code daily, as it is one of the cleanest IDEs for Front-end development. But if you do not yet use it, you can download it here.
• Once installed, click on Extensions (lowest icon on the left), search for Azure Storage, hit install and restart VS Code

- Now you have a cool new Azure icon below the extensions one. Click on it, select login and follow the instructions. Once you put in the code, you should be able to see your storage account through VS Code. - Open the folder ...hugo_blog/public in VS Code - In VS Code Explorer (top icon on the left), assumming your are at root level of your blog, right click and select **Deploy to Static Website**.

At this point you will be prompted to select your subscription and azure storage account

You should get a success message in a few seconds

You are good to go! Keep adding pages and deploying in the same way :)