Introduction

Hugo

Hugo is a popular open-source static site generator that allows you to create fast and flexible websites. It is built with performance in mind and uses Go templates to generate static HTML files from templates and content files.

One of the key benefits of using Hugo is its simplicity and ease of use. It has a minimal learning curve and allows you to quickly create and publish content using simple markdown files. It also has a large number of customizable themes and options, allowing you to tailor the appearance and functionality of your website to your specific needs.

In addition to its speed and flexibility, Hugo is also highly extensible, with a variety of plugins and integrations available to further customize and enhance your website.

Hugo is a powerful and user-friendly tool that is well-suited for a wide range of websites, from personal blogs to corporate websites. I’m loving it so far for my personal blog!

Azure static web app

Azure Static Web Apps is a fully managed service that allows you to host static web applications on the Azure platform. It is designed to make it easy to deploy and host static websites, web APIs, and serverless functions, and provides a variety of features and options to customize and enhance your web applications.

Some of the key benefits of using Azure Static Web Apps include:

• Simplicity: Azure Static Web Apps is easy to use and requires minimal setup and maintenance. You can deploy your static web application by simply pushing your code to a connected Git repository, and Azure Static Web Apps will automatically build and deploy your application.

• Scalability: Azure Static Web Apps is highly scalable and can handle a large amount of traffic without requiring any additional configuration. It also integrates with Azure’s Content Delivery Network (CDN) to further enhance performance and availability.

• Security: Azure Static Web Apps uses Azure’s security infrastructure to protect your web applications from threats and vulnerabilities. It also supports HTTPS out of the box and provides options for customizing your application’s security settings.

• Integration: Azure Static Web Apps integrates with a variety of Azure services, such as Azure Functions, Azure Storage, and Azure CDN, allowing you to enhance the functionality and performance of your static web applications.

Azure Static Web Apps is a useful and cost-effective solution for hosting static web applications on the Azure platform.

Getting started

Installation

This guide will be based around linux, but the same commands will work with both Windows, Linux or macos. I use arch btw :P so lets do that.

1. Install the Hugo package: First, you’ll need to install the Hugo package using pacman (or your packagemanager of choice). Open a terminal and run the following command:

   Arch Linux 

   1	sudo pacman -S hugo

   Debian 

   1	sudo apt install hugo

   Fedora 

   1	sudo dnf install hugo

This will install the latest stable release of Hugo on your system.

Creating the site

Create a new Hugo site:

Next, you’ll need to create a new Hugo site. You can do this by running the following command:

1

hugo new site my-site

This will create a new directory called "my-site" with the basic files and directories needed for a Hugo site.

Install a Hugo theme:

Hugo sites use themes to define their appearance and layout. You can browse and install themes from the Hugo Themes website. To install a theme, you can clone the theme’s repository into the themes directory of your Hugo site or add a git submodule. For example:

1
2

cd my-site
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Configure your site:

You’ll need to configure your site by editing the config.toml file in the root directory of your Hugo site. You can set the title, baseURL, and other options for your site in this file. This will vary depending on your chosen theme, a good reference for configuring the theme is the themes github site.

• You can also customize the appearance and layout of your site by modifying the templates and static files in the themes/ananke directory.

Create content:

You can create content for your Hugo site by adding Markdown files to the content directory. You can use the hugo new command to create new content, or you can create files manually.

Build and serve your site locally:

Once you have created some content, you can build your site by running the hugo command. This will generate the HTML and other static files for your site. You can then serve your site locally by running the hugo server command. This will start a local web server that you can access at http://localhost:1313.

• As a side note, if you are running Hugo from a remote machine or a server within your local network you will need to bind the Hugo server to your local ip with the --bind <ip> flag. You will need to do the same for --baseURL. Custom port is also available through the --port <port> flag.

  1	hugo server --bind 192.168.1.5 --baseURL http://192.168.1.5 --port 8080

Publishing to github

Once you are happy with your code and it is ready for the next step of publishing it to the internet, you need to publish it to a private or public GitHub repository. A private repository allows you to keep your code and project information secure and confidential, while still taking advantage of the benefits of version control and collaboration provided by GitHub.

To publish your code to a private GitHub repository, you’ll need to do the following:

Create a private repository:

First, you’ll need to create a new private repository on GitHub. You can do this by logging into your GitHub account, clicking the “+” icon in the top right corner, and selecting “New repository”. Give your repository a name and select “Private” as the visibility level.

Initialize your local repository:

Next, you’ll need to initialize a local Git repository for your code. If your code is already tracked by Git, you can skip this step. Otherwise, you can initialize a new repository by running the following commands:

1
2
3
4

cd my-project
git init
git add .
git commit -m "Initial commit"

Add the remote repository:

You’ll need to add the remote repository as a remote for your local repository. You can do this by running the following command, replacing with the URL of your repository:

1

git remote add origin <repository-url>

Push your code to the repository:

Finally, you can push your code to the repository by running the git push command. This will upload your code to the repository, making it available for the next step.

Azure static web app

To publish a Hugo site to Azure Static Web Apps, you can follow these steps:

Create an Azure Static Web Apps resource:

1. You’ll need to create an Azure Static Web Apps resource in your Azure account. You can do this by: logging into the Azure portal, clicking the ‘+’ icon in the top left corner.

   

2. Searching for “Static Web Apps”. Click “Create” to create a new resource.

   

Connect your repository:

You can do this by following the prompts in the Azure portal, or by using the Azure Static Web Apps CLI. You’ll need to provide the URL of your repository, as well as your authentication details.

Configure your build and deployment settings:

You’ll need to configure your build and deployment settings in your Azure Static Web Apps resource. This includes specifying the build command (e.g. hugo), the base directory for your site (e.g. public), and any environment variables that your site requires. You can also set up automatic deployment triggers, such as when new commits are pushed to your repository.

Build and deploy your site: Once you have configured your build and deployment settings, you can build and deploy your site by committing and pushing changes to your repository. Azure Static Web Apps will automatically build and deploy your site based on your configuration.

Test and verify your deployment: Once your deployment is complete, you can test and verify your site by visiting the URL provided by Azure Static Web Apps. You can also use the Azure Static Web Apps CLI or the Azure portal to view the build and deployment logs and troubleshoot any issues.

Custom domain

To add a custom domain to your new blog you will need to do a few more steps. A few of these steps are dependant on your domain regristrar, but in short you will need a “CNAME” record to point to the domain provided by azure.

Steps

1. Configure your static web app to use your custom domain. In the Azure portal, go to the “Custom domains” blade for your static web app and select “Add custom domain”. Enter your domain name and select “Validate”. Azure will verify that you own the domain and provide you with DNS records to add to your domain’s DNS settings.

   

2. Update your domain’s DNS settings to point to your static web app. Go to your domain name registrar’s website and navigate to the DNS settings for your domain. Add the DNS records provided by Azure to your domain’s DNS settings. This will allow traffic to your domain to be routed to your static web app.

   

3. Enter the custom domain in the “Domain name” field.

   

4. Choose “CNAME” as Hostname record type, copy the calue from value field below and put this into your domain registrar’s dns settings.. Click Add

   

Wait for the DNS changes to propagate. It may take some time for the DNS changes to take effect. You can check the status of your custom domain in the Azure portal by going to the “Custom domains” blade for your static web app and selecting “Refresh status”.

Once the DNS changes have propagated and your custom domain has been configured correctly, traffic to your domain will be routed to your static web app.