Test Deploy to Prod

2020-06-08 Test Igor Baiborodine
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis, nulla et fringilla varius, leo enim porttitor felis, eu maximus est velit id massa.

Add Favicon to Hugo-Based Website

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:

Site Directory Layout

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 static folder.

But why, you might ask, favicons should be placed into this particular directory? Here what the Hugo documentation says:

By default, the static/ directory in the site project is used 
for all static files (e.g. stylesheets, JavaScript, images). 
The static files are served on the site root path (eg. if you 
have the file static/image.png you can access it using 
http://{server-url}/image.png, to include it in a document you 
can use ![Example image](/image.png) ).

We proceed in two steps in this tutorial:

  1. Add Favicon Using favicon.io
  2. Add Favicon Using realfavicongenerator.net

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:

favicon.io Main View

Enter the letters you want in the Text field and, if needed, customize the background and font parameters:

favicon.io Generate View

Scroll down to the section Installation and copy generated link tags and paste them into the favicon.html file; click on the Download button:

favicon.io Generate View Installation

Unzip the downloaded favicon package and copy all extracted files into the static folder in the site’s root:

favicon.io Zip Extracted Files

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:

Local Dev Display Favicon

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:

realfavicongenerator.net Favicon Check

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:

realfavicongenerator.net Favicon Check Result

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 static folder:

realfavicongenerator.net Generate Select Image

Scroll down to the bottom of the page and continue by clicking on the Generate your Favicons and HTML code button:

realfavicongenerator.net Generate Confirm

In the 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:

realfavicongenerator.net Generate Result

Unzip the downloaded favicon package and copy all extracted files into the static folder in the site’s root:

realfavicongenerator.net Zip Extracted Files

The new package contains 3 new files when compared with the package from step 1, namely, browseconfig.xml, mstile-150x150.png and 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!

realfavicongenerator.net Prod Display Favicon Top Sites

Summary

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.

More articles in this series:
Start Blogging With Hugo, GitHub and Netlify
Configure Custom Domain and HTTPS on Netlify

Configure Custom Domain and HTTPS on Netlify

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 awesome-mclean-11186c.netlify.app to 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, igor@kiroule.com, 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:

  1. Configure DNS Records
  2. Set up Custom Domain
  3. Enable HTTPS
  4. Update Base URL

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:

Namecheap Choose Domain

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 Manage button:

Namecheap Domain List

In the Details view, choose the Advanced DNS tab:

Namecheap Domain View

In the Host Records section, add A Record and ALIAS Recordentries.

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: 104.198.14.52
TTL: 30 min

Here, the 104.198.14.52 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.

Namecheap Domain Advanced DNS

Set up Custom Domain

Sign in to Netlify and navigate to the site in question:

Netlify Sites View

Select Set up a custom domain in the Overview tab:

Netlify Site Getting Started

Enter your custom domain value and click on the Verify button:

Netlify Site Settings Add Custom Domain

Then confirm that you own the domain name by clicking on the Yes, add domain button:

Netlify Site Settings Add Custom Domain Owner Confirm

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 www..

Netlify Site Settings Domain Management

Enable HTTPS

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.

In the Domain management, scroll down to the SSL/TLS certificate subsection, then click on the Verify DNS configuration button:

Netlify Site Settings Domain Management HTTPS

Upon successful DNS verification, continue by clicking on the Provision certificate button:

Netlify Site Settings Domain Management HTTPS Certificate

Confirm once again the provisioning of Let’s Encrypt certificate:

Netlify Site Settings Domain Management HTTPS Certificate Confirm

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:

Netlify Site Settings Domain Management HTTPS Enabled

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.

Netlify Site Deploy Change BaseURL

Now, it’s time to test the new URL:

Website New BaseURL

Summary

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.

More articles in this series:
Start Blogging With Hugo, GitHub and Netlify
Add Favicon to Hugo-Based Website

Start Blogging With Hugo, GitHub and Netlify

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:

  1. Install Hugo
  2. Create New Site
  3. Customize Example Site
  4. Create About Page
  5. Push Git Repository to GitHub
  6. 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.

Install Hugo

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 dpkg utility:

$ 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

Hugo Version Manual Install

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.

Hugo New Site

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

The 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:

Hugo New Site Dir Structure

To start the built-in server to build and serve the site, execute the hugo server command from the site’s root directory:

Hugo New Site Serve

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.

Hugo New Site Browser

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.

The config.toml file should look like this after applying the following adjustments:

  • Set new values to the title setting and author, description, keywords, subtitle, socialMediaLinks, copyrightBy, copyrightUseCurrentYear and copyrightUrl params.
  • Set the baseURL setting to https://kiroule.netlify.app/ where kiroule is 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 Site Details section.
  • Disable Google Analytics, Disqus comments and Algolia search by commenting out corresponding settings and params.
  • Switch to English only language by setting showHeaderLanguageChooser and showFooterLanguageChooser params to false value and removing the [Languages.de] params subsection.
  • Use a custom image instead of a gravatar for the header image. Copy the custom image to the static/img/ directory and set the customImage param to the image’s path, for example, img/avatar.png.

Then, to get rid of the content that came along with the example site, delete everything inside content and resources directories.

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 content folder.

Hugo New Site About Page

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 article, audio, code, gallery, link, page, quote and video post types.

The content for the page/about.md file is generated according to the themes/bilberry-hugo-theme/archetypes/page.md template:

---
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.

Hugo New Site Browser About Page

Push Git Repository to GitHub

Create a new repository on GitHub without initializing README, license or .gitignore files.

GitHub New Repo

Copy git remote add and git push commands from the ...or push an existing repository from the command line section:

GitHub New Repo Instructions

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

GitHub New Repo Instructions

Deploy on Netlify

After signing in to Netlify, click on the New site from Git:

Netlify New Site

Then you will be prompted to choose the Git provider. Continue by clicking on the GitHub button:

Netlify New Site Git Provider

The next step is to install Netlify on your personal GitHub account:

Netlify New Site GitHub Install

Select the site repository and continue with the installation:

Netlify New Site GitHub Install 2

Pick the repository that you want to link to your site on Netlify:

Netlify New Site Pick Repository

Verify deploy settings and continue by clicking on the Deploy site:

Netlify New Site Pick Repository 2

As soon as the build completes, you will be presented with the site overview:

Netlify New Site First Deploy

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:

Netlify New Site Change Site Name

In the Change site name pop-up window, set the new site name and save it:

Netlify New Site Change Site Name 2

Now you can access your website at the URL shown in the site overview:

Netlify New Site Change Site Name 3

Netlify New Site Deploy Browser

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.

More articles in this series:
Configure Custom Domain and HTTPS in Netlify
Add Favicon to Hugo-Based Website