In this third article of the series, we continue enhancing the website that we created earlier. This time I will demonstrate to git you how to generate a favicon image set and integrate it with a website implemented with Hugo.
A favicon is a 16x16 pixel-sized image that usually associated with a particular website. In a web browser, favicons most often displayed next to the webpage’s title on the tab or the webpage’s name in the bookmarks’ list. When creating a blog, many underestimate the importance of having a favicon, but it plays an essential role in your website branding and identity around the web.
As for adding a favicon to a Hugo-based website, it all depends on how the Hugo theme of your choice was implemented. Any well-implemented theme should have the
favicon.html file that used to define what favicon images to use. This file should be present in the
layouts/partials folder in your site’s root directory:
The Bilberry theme has such a file, and it contains straightforward instructions on how to add favicon images:
<!-- Insert your favicon definitions here and put the icons in your `/static` folder Check https://realfavicongenerator.net/ for generating your personal favicon Remove this comment. -->
Merely following these instructions will do.
But the presence of the
favicon.html file in a Hugo theme is not always the case. Therefore, in your theme, you should look for the
layouts/partials/head.html file like that one, for instance. Once located, copy it into the
layouts/partials folder in your site’s root directory and replace the favicon’s
link tags with the HTML code provided by a favicon generator. Then place all generated favicon images into the
But why, you might ask, favicons should be placed into this particular directory? Here what the Hugo documentation says:
We proceed in two steps in this tutorial:
There are no prerequisites here. You can go right to Step 2 if you already have a base favicon image. If you do not have one and want to create a text-based favicon, you should start at Step 1. In my case, without pretending to be original, I will use my initials in Russian
ИБ to create a text-based favicon.
Add Favicon Using favicon.io
In your browser, navigate to https://favicon.io/ and click on the
Generate From Text button:
Enter the letters you want in the
Text field and, if needed, customize the background and font parameters:
Scroll down to the section
Installation and copy generated link tags and paste them into the
favicon.html file; click on the
Unzip the downloaded favicon package and copy all extracted files into the
static folder in the site’s root:
Restart your local Hugo web server if it’s running and verify in the browser that the favicon is correctly displayed next to the webpage’s title on the tab:
Commit and push changes to GitHub. Consequently, this update should trigger a new build and deploy on Netlify. Please wait until it completes and navigate to your website URL in the browser. Check if your custom favicon replaced the default favicon image.
So, it looks like we accomplished our goal, but let’s proceed with the next step.
Add Favicon Using realfavicongenerator.net
Navigate to https://realfavicongenerator.net/ in the browser; enter your website URL in the
Check your favicon field and click on the
Check favicon button:
The check reveals that there are no issues with iOS Safari, Android Chrome and classic/desktop browsers. However, our favicon did not pass the test for Windows 8/10 and Mac OS X EI Capitan Safari:
To add missing favicon images and definitions, we can generate a new favicon package using the previously generated
android-chrome-512x512.png favicon as a base image. Therefore, return to the main page and click on the
Select your Favicon image button, then proceed with uploading the base image from the site’s
Scroll down to the bottom of the page and continue by clicking on the
Generate your Favicons and HTML code button:
Install your favicon page, copy the given HTML code and replace the content of the
favicon.html file with it; download the newly generated favicon package:
Unzip the downloaded favicon package and copy all extracted files into the
static folder in the site’s root:
The new package contains 3 new files when compared with the package from step 1, namely,
safary-pinned-tab.svg. Also, the HTML code has three more tags:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff">
Then again, commit and push changes to GitHub. Please wait until the deployment on Netlify completes and navigate to your website URL in the browser. Check if the favicon is correctly displayed. Now, if you run the favicon check on the
realfavicongenerator.net again, it will pass all the tests.
Now, the task is complete!
In this article, you saw what it takes to add a custom favicon to a Hugo-based website. First, we discussed what files in your Hugo theme should be updated with favicon definitions and where to place favicon images. Second, I showed you how to generate a text-based favicon package using the
favicon.io website. Then with the help of the
realfavicongenerator.net website, I demonstrated to you how to check if your website’s favicon is valid and correctly displayed in different browsers and on different platforms. To fix favicon issues, we generated a new favicon package and added it to the theme.
In the previous post, I showed you how to create a Hugo-based website and deploy it on Netlify. It’s time to make some improvements, namely, configure DNS records, set up a custom domain and enable HTTPS.
When you deploy for the first time on Netlify, a Netlify subdomain will be assigned to your site, for example,
awesome-mclean-11186c.netlify.app. Then you can change the randomly generated part in the subdomain to the site name you want, like adjusting
kiroule.netlify.app, and continue as is. But it’s evident that for your personal website, you should use a custom domain, which helps a lot in promoting yourself as a brand and improving credibility. Also, owning a domain comes with the option of having personalized email addresses, for instance,
firstname.lastname@example.org, which I put on my About page.
As for HTTPS, even if it’s your blog where you do not collect any sensitive information, having a secure connection gives the perception of you as a trusted source. Other than that, it also can slightly improve your Google search engine rankings.
This tutorial has the following tasks to complete:
The only prerequisite here is that you take care to purchase a domain name in advance. There are a few domain registrars where you can buy it (e.g., Bluehost, GoDaddy or Namecheap). As for Netlify, they also sell and register domain names:
Configure DNS Records
DNS (Domain Name System) records are rules that define how domain name servers handle traffic to domains and subdomains. Updating DNS records is a necessary step, once you obtain your custom domain. In our case, this will allow you to connect the domain to Netlify hosting. Since I bought
kiroule.com domain name from Namecheap, it’s shown here how to do that in my Namecheap account, but the same configuration procedure can be done with most of the domain registrars.
After signing in to Namecheap, select
Domain List from the left sidebar and click on the
Details view, choose the
Advanced DNS tab:
Host Records section, add
A Record and
A Record is an address record, which maps host names to their IPv4 addresses. To configure it, use the following settings:
Type: A Record Host: @ Value: 184.108.40.206 TTL: 30 min
220.127.116.11 value is Netlify’s load balancer IP address.
ALIAS Record is a virtual host record, which allows pointing one domain name to another one. To configure it, use the settings below:
Type: ALIAS Record Host: www Value: [name-of-your-site].netlify.app TTL: 5 min
TTL (Time to live) is a propagation time, which defines how fast a DNS record update is pushed to DNS servers around the world.
Set up Custom Domain
Sign in to Netlify and navigate to the site in question:
Set up a custom domain in the
Enter your custom domain value and click on the
Then confirm that you own the domain name by clicking on the
Yes, add domain button:
To verify that the custom domain has been correctly configured, open the
Settings tab and select the
Domain management from the left sidebar. The
Custom domains subsection should contain three domains: Netlify’s default subdomain, your domain and your domain prefixed with
Netlify hosting comes with free HTTPS for all sites, including the automatic creation and renewal of TLS-based certificates. These certificates are provided through Let’s Encrypt, a nonprofit Certification Authority.
Domain management, scroll down to the
SSL/TLS certificate subsection, then click on the
Verify DNS configuration button:
Upon successful DNS verification, continue by clicking on the
Provision certificate button:
Confirm once again the provisioning of Let’s Encrypt certificate:
If the provisioning of the certificate were successful, the
SSL/TLS certificate subsection would contain
Your site has HTTPS enabled message as it’s shown below:
Update Base URL
Before testing the blog with new primary domains, it’s necessary to update the
baseUrl setting in your site’s
config.toml file accordingly. Otherwise, the website will not be correctly rendered.
baseURL = "https://www.kiroule.com/"
Commit and push the change to GitHub. This update should trigger a new build and deploy in Netlify. So go back to Netlify and verify in the site’s
Overview tab that the site was successfully published.
Now, it’s time to test the new URL:
In this article, I showed you how to enhance the newly created website. First, I demonstrated to you how to add new DNS records in a Namecheap account. Then you saw how to configure a custom domain and enable HTTPS in Netlify. And the final step was updating the
config.toml file to make sure that the blog is displayed without any issues.
By this post, I start a series where I share my experience in how to start a journey as a blogger from a technical perspective. This tutorial will show you how to set up from scratch a blog using Hugo, GitHub and Netlify.
So, you decided to start blogging, and you need to set up a blog. But from where to start? It all depends on your technical skillset. If you are not a geeky person, maybe a better approach would be to use such blogging platforms as WordPress.com or Wix.com. But if you are skilled in software development or any other related field, creating your blog with Hugo, GitHub and Netlify is the way to go. What are the advantages of using the Hugo-GitHub-Netlify combination?
First of all, to create content, you will use Markdown, a lightweight markup language. It offers a simple formatting syntax and cross-platform portability. Also, you can use pure HTML within content written in Markdown.
Secondly, all your website content will be built with Hugo, an open-source static site generator. It provides excellent performance, numerous out-of-the-box features, fast built-in server reloads and plenty of themes to choose from.
Thirdly, using Netlify to deploy and host websites is simple and straightforward. Netlify offers a free tier plan, which is more than enough for any static website implemented with GitHub and Hugo. Netlify’s Continuous Deployment feature, in conjunction with GitHub, substantially helps in automating the content publishing workflow.
But enough talk, let’s get started. The tutorial below consists of the following steps:
- Install Hugo
- Create New Site
- Customize Example Site
- Create About Page
- Push Git Repository to GitHub
- Deploy on Netlify
Basic knowledge of Git with its command-line interface and GitHub/Netlify accounts are the prerequisites for this tutorial. As a host operating system, I will be using Ubuntu 18.04.
As per Hugo official documentation, using
sudo apt-get install hugo command is not recommended because it will not install the latest version of Hugo. Indeed, you will get version
0.40.1 while the newest version at the moment of writing is
0.69.1. Therefore, download a .deb package from the official Hugo releases page and install it using the
$ wget https://github.com/gohugoio/hugo/releases/download/v0.69.1/hugo_0.69.1_Linux-64bit.deb $ sudo dpkg -i hugo_0.69.1_Linux-64bit.deb
Create New Site
To create a new site, execute the
hugo new site command in the site’s root directory, for example:
$ hugo new site kiroule.com
Here, I use
kiroule.com as a site name since I already own this domain name, and I’m planning to set it up as a custom domain for my website. The newly created site has the correct structure but without any content or theme.
Before proceeding any further, you need to choose a Hugo theme. Hugo offers a plethora of themes that suit different tastes and needs. I picked Bilberry Hugo theme because it is suitable for blogging, responsive and multilingual. Also, it offers support for Disqus comments, Algolia search and Google Analytics.
Move to the site’s root directory and initialize a Git repository:
$ cd kiroule.com $ git init
Then move to
themes directory and add the theme in question as a Git submodule:
$ cd themes $ git submodule add https://github.com/Lednerb/bilberry-hugo-theme.git
git submodule add allows cloning of the theme repository to your project and keeping it as a subdirectory of the site repository. Also, it permits Netlify to recursively clone the site repository along with the theme repository when building and deploying the site.
Copy the content of the
themes/bilberry-hugo-theme/exampleSite folder to the site’s root directory, remove the default archetype and move back to the site’s root directory:
$ cp -r bilberry-hugo-theme/exampleSite/* ../ $ rm ../archetypes/default.md $ cd ..
At this point, the site’s root directory structure should look like below, where
content directory contains the content from the example site:
To start the built-in server to build and serve the site, execute the
hugo server command from the site’s root directory:
Access the site in your browser at http://localhost:1313. As you can see, the new site is simply a replica of the example site provided by the theme.
Customize Example Site
After making sure that the site can be built and served, let’s proceed with customizations. To do so, you need to configure settings according to your needs in the
config.toml file, which Hugo uses as the default website configuration file. Please see Hugo documentation for more details on all available configuration settings.
config.toml file should look like this after applying the following adjustments:
- Set new values to the
- Set the
kirouleis the name of the site when deployed on Netlify. When deploying for the first time on Netlify, a random name will be generated automatically, for example,
awesome-mclean-11186c. Then the site name can be updated in the
- Disable Google Analytics, Disqus comments and Algolia search by commenting out corresponding settings and params.
- Switch to English only language by setting
falsevalue and removing the
- Use a custom image instead of a gravatar for the header image. Copy the custom image to the
static/img/directory and set the
customImageparam to the image’s path, for example,
Then, to get rid of the content that came along with the example site, delete everything inside
Create About Page
The next step is to create an empty
About page. Use the
hugo new command, for example:
$ hugo new page/about.md
Make sure you run it from the site’s root directory. Here,
page/about.md is a path relative to the
page part in the
page/about.md path defines a post type that should map to one of the archetypes supported by the theme. The supported archetypes are defined by the theme in the
themes/bilberry-hugo-theme/archetypes folder. Bilberry Hugo theme supports the
video post types.
The content for the
page/about.md file is generated according to the
--- title: "About" date: 2020-04-26T13:13:06-04:00 draft: true excludeFromTopNav: false # set the link if you want to redirect the user. link: "" # set the html target parameter if you want to change default behavior target: "_blank" --- TODO: add content
By default, Hugo’s built-in webserver automatically rebuilds the site if it detects any changes. Then it pushes the latest content to any open browser pages. But since the
page/about.md file contains
draft: true, you should restart the server with the
--buildDrafts flag to include content marked as a draft.
Push Git Repository to GitHub
Create a new repository on GitHub without initializing README, license or .gitignore files.
git remote add and
git push commands from the
...or push an existing repository from the command line section:
Add changes to the staging area and commit them:
$ git add . $ git commit -m "Initial commit"
Then proceed with pushing your local Git repository to GitHub:
$ git remote add origin https://github.com/igor-baiborodine/kiroule.com.git $ git push -u origin master
Deploy on Netlify
After signing in to Netlify, click on the
New site from Git:
Then you will be prompted to choose the Git provider. Continue by clicking on the
The next step is to install Netlify on your personal GitHub account:
Select the site repository and continue with the installation:
Pick the repository that you want to link to your site on Netlify:
Verify deploy settings and continue by clicking on the
As soon as the build completes, you will be presented with the site overview:
Your website will not be correctly displayed if you proceed to the URL shown in the site overview since it does not match the
baseUrl setting value in the
config.toml file. Therefore, click on the
Deploy settings in the site overview. Then select the
Site details under the
General. In the
Site details tab, click on the
Change site name:
Change site name pop-up window, set the new site name and save it:
Now you can access your website at the URL shown in the site overview:
To conclude this tutorial, I want to add that it is my second attempt to start blogging. My first try was in 2016, but it didn’t go any further than creating an empty website. Back then, I used Jekyll and GitHub Pages to build and host the blog. I hope that my second attempt will be successful, and I will have enough time, focus and energy to publish new content regularly.