Azure is constantly evolving to deliver us an extensive set of services that will make our lifes easier, including IT professionals, Business owners and much more.

Context

Recently i decided to create this personal site, so i could share with the community some lessons learned and relevant technical topics, and at same time keep notes of important information to myself for future reference.

So, since multiple times i had people coming to me asking which options they should use to create their personal site or blog or even a business site, i just decided to share what was the experience to create this site, and how easy and cheap it was to create and provision it.

Step 1: Build the Website

First, let’s start by the framework that allowed me to easily create my site - Hugo. Hugo allows us to build websites, taking into consideration its simplicity and performance. Hugo provides you templates based on Go programming language. Go was designed at Google by Robert Griesemer, Rob Pike, and Ken Thompson, and is a compiled programming language, syntactically typed and similar to C, but with important characteristics such as memory safety, garbage collection, structural typing, and CSP-style concurrency.

Also, Hugo provides you an extensive set of themes, some built by their team, and some built by the community, that allows you to easily customize your website, without the need for develop a theme from the scratch, or even to do any changes at all. In my case, instead of creating my theme from the scratch, i decided to leverage the LoveIt theme, that i consider an amazing desing and work, and then i just customized according to my ideas for this website.

Once you create, configure and start to run your website/blog, on your day a day basis, in case you need to change content in your website, Hugo uses Markdown and this is a simple and easy-to-use markup language that allows you to create and format your content to be hosted in your website. So, if you do not have a technical background at all, you are still able to manage your website’s content without the need to do any programming.

Last, but not least, Hugo provides a feature of static website generator, so you can translate all your templates, modules and Markdown pages to HTML pages that will be performant and work in most of - if not all - the devices nowadays.

So, to install Hugo in my Windows machine, i just used a Package Manager called Chocolatey. It allows you to easily installing Hugo in your machine by just running the following command:

choco install -y hugo

Hugo’s official website provides you an excellent article - Hugo’s Quick Start - that allows you to easily start using Hugo and creating your website.

Step 2: Hosting Your Website

Ok, so we have our website created using Hugo. Now it is time to talk about hosting options. So, i just decided to use a cost-effective option to avoid big investments at this stage with this website. Surprisingly, Azure provides an extensive set of cost-effective services that uses Serverless model, that gives you an abstraction of the environment running your applications, and really useful features like auto scalability, high availability and more. This hosting model uses a Pay-as-you-Go pricing model, so you end-up paying only for what you consume, and this is amazing in case you are worried with the costs or if you have a limited budget.

So, looking to the different Serverless options, i decided to use Azure Storage Static Website to host my website, and then to ensure a high performant solution and also to be able to use custom domain (hugobarona.com) and HTTPS, i included Azure CDN. This hosting option can host your website, depending on the context, for less that 5$ per month (😮).

I just created my resources using the Azure Portal, which is really amazing after all the layout changes that suffered recently, since it is a one-time job, so i did not see the need to automate the provision of these resources (e.g. using ARM templates).

Step 3: Publishing Your Website

Once your Azure resources are available, you can easily use Azure Storage Explorer tool, since it allows us to easily manage the content in our Storage account and upload all the files related to our website.

Note: Do not forget to generate the static HTML pages for your website, by running the command below via command-line and in the root folder of your project, so it will create a folder called public and it will create there all the required files to run your website.

hugo -D

In case you want to avoid to manually publish your website for future updates, you can always consider to leverage Azure Devops, since it allows you to host your website source code, using Azure Devops Repos, and build pipelines, using Azure Devops Pipelines, to implement your Continuous Deployment process. So, anytime you change your website you just commit the changes to your repository, and then the pipeline will trigger automatically and will deploy the new version of the website to your Storage Account and then update the CDN endpoint’s edges with the new version of the website’s files.

Step 4: Custom Domain and HTTPS

In case you are planning to configure your custom domain, you need to contact a Domain Name Registrar to buy the ownership of your custom domain, in case it is available. In my case, I end-up using Namecheap, since it is a cost-effective and reliable option. In terms of configuring the HTTPS, since you are using Azure CDN, if you select the CDN managed option in the Certificate Management Type, then Azure will provide the certificate for you with no additional cost (👍).

So, now you have your website hosted in your Azure Storage Account, being served by Azure CDN, so it can serve your website to any worldwide visitor, since it is the Azure CDN edges located globally that are serving your website, and now with your custom domain and using HTTPS and SSL to ensure secure communications between the visitors and your website.

Summary

After this long text, I hope I provided you enough details to allow you to create your website using the options mentioned above. As my first time using Hugo framework, I am really enjoying how easy it is to configure it and manage your context using Markdown and then comes Azure with its amazing services that allows us to build a high-performance and cost-effective solution to host our website at low cost.