Host your own website with Hugo, Github and Azure

Has your hosting provider also recently increased its prices substantially, or is it just mine? This year, the annual cost for hosting my website, which I need as a freelancer, increased from €37 to €85; thats more than a 100% increase. Apart from this being a lot of money, the way in which these cost increases were communicated set me off a bit and made me look at other options.

The readily available option; Azure and Hugo

As I have a strong focus on Azure as a developer, moving my website to this cloud platform seemed a logical move. I have a subscription in place, and am very proficient with Azure in general. Looking at my options for creating the website itself I came across some youtube videos relating to the use of the Hugo website framework. This framework appealed to me because:

1. It generates a static website, ensuring good performance.
2. It uses markdown for the content.
3. It integrates well with Github and Azure (using a static web app)

Creating the website

Creating a new website is very easy with Hugo and basically consists of:

1. Installing Hugo and Git
2. Choosing and installing a theme
3. Editing the config file to your liking
4. Adding content, which, in its most basic form, means creating a few markdown files.

Of course, there is the option of making the website more personalized by changing the theme or creating new content types. All of these options are documented on the Hugo website. Personally, I first started of with creating a website using the Coder theme which I still quite like, but ended up with the theme you currently see, which is the Tella theme. This process worked well for me, after first creating the initial website (and abandoning it, as I couldn’t quite get the look I was going for), I knew exactly what I wanted. Thus, the second attempt was ready in a few hours. However, your process might differ, maybe you can succeed in your first attempt.

Publishing the website

Github Here comes the fun (and quite easy) part; getting the website working in Azure. As mentioned above, the setup of Hugo also includes installing Git. Moreover, if you follow the quick-start, your new website is already within its own Git repository. The next step now is to push this Git repo to a Github repository, do this by creating a new repository (create an account if you don’t have one). Afterwards add the new Github repository URL to your local Git repo as a remote by typing: git remote add origin url_of_github_repository And now push you code to the new repository by typing: git push –set-upstream origin name_of_your_branch_here

Your code is now pushed to your new repository and is ready to use, you should be able to check and see the code in the Github portal.

Azure Now, we are going in the Azure Portal, again create a new account if you don’t have one, and we are going to add a new static web app. This page explains the involved steps quite thoroughly, it basically boils down to:

1. Create Static Web App
2. Link it to the Github created previously
3. Set it build preset Hugo
4. Wait for your website as it is being prepared
5. (optional) Change the DNS for your domain-name to forward to your new website.

And that’s basically all that it takes, you might have to change some settings, but your website should work now. Quick tip, if you find that some images or css are not coming through, check the BaseURL in your config, it should reflect the URL of you Static Web App.

Cost benefit

If you followed the guide above, you might have noticed that the Hugo website runs well on the free tier of Azure Static Web App, this means that I will be saving €85 every year. This is important as this move was motivated largely by the cost increase of my existing / previous hosting provider. Apart from this benefit, I also find the technical implementation using Hugo, Git and Azure much easier to use, this is therefore a successful move both technically but also financially.