In the previous post, I covered how to build your first Hugo site using the Hugo Future Imperfect Slim theme. I also walked through the process to create the first blog post for your new site. In this post, I'm going to walk through different customization options for the theme. The customizations aren't exhaustive but are good enough for you to get started and possibly expand on. Let's get started.
config.toml file, located at the root directory of your site, is where most of the site customization is done. Picking up where we left off in part 2, let's review the very beginning of the file. It should look similar to the following text snippet:
baseurl = "https://example.com/" DefaultContentLanguage = "en" title = "Learning Hugo" theme = "hugo-future-imperfect-slim" preserveTaxonomyNames = true paginate = 3 disqusShortname = "" googleAnalytics = "" pluralizeListTitles = false disableLanguages = [""]
baseurl line sets the URL of where your site will ultimately be published. For now, we are going to skip this line and the
googleAnalytics line. I'll cover these in parts 4 and 5 of the series.
In addition to English, the Hugo Future Imperfect Slim theme supports multiple languages such as Spanish, German, French, and a few others. For now, leave the
DefaultContentLanguage line as it is. If you know how to write/speak other languages, then I'll leave it to you to translate anything we do in English to one or more of the languages you understand and get the multi-language support to work correctly.
title line is just what you think it is. It is where you set the title for the site. Change the text in the parentheses to your preference. As you probably noticed, I used “Learning Hugo” as the title for the example site I'm using in this series. This is the same text that appears in the title bar of the web browser if you aren't using a tabbed interface. If you have enabled tabs then this will appear in the name of the tab as you can see in the image below:
theme line is the name of the Hugo Theme in use. We set this in the previous post. So, you can skip this line.
You can ignore the
preserveTaxonomyNames line. There is no need to change it unless you feel the need to create a custom taxonomy. What is a taxonomy? In Hugo-speak, a taxonomy is a way to classify content and define the relationships between the content. I suggest reading more about the subject on the Hugo taxonomy page.
paginate line determines the number of posts that appear on the home page of your blog site. For now, keep this at the default. You can change the default if you would like to see how it changes the look of the site homepage.
We will skip over the remaining lines in this section of the config.toml file. As I mentioned previously, we'll cover the
googleAnalytics line in part 4 of the series. The
disqusShortname line enables comments and discussion for posts on your site. I won't be covering that in this series. But, if I do enable it on my site in the future, then I will write a post about it.
The Params section is essential to how your site appears to readers. It also has several sub-sections. I will go over all sub-sections except for the
The main section of your Params section should look similar to the text snippet below:
You can leave all of the “option lines” at their default. But, the last line,
socialShare, is the one you should modify. This line determines which social network link appear with your post and make it easy for your readers to share your blog posts.
Here is an example of a blog post with all of the
socialShare icons at the beginning of the post.
The Params.meta sub-section contains items that can be picked up by search engines. Your Params.meta sub-section should look similar to the text snippet below:
[params.meta] # Sets the meta tag description description = "An example blog site built on Hugo, the fastest statice website engine and skinned with the Hugo Future Imperfect Slim theme by HTML5 UP and ported by Julio Pescador. Slimmed and enhanced by Patrick Collins. Multilingual by StatnMap." # Sets the meta tag author author = "Whoever is working on this blog site" # If you would like to add more comprehensive favicon support past the root # directory favicon.ico, utilize this function. It is recommended to use # https://realfavicongenerator.net to generate your icons as that is the basis # for the theme's naming. favicon = false svg = true faviconVersion = "1" msColor = "#ffffff" # Copy from the https://realfavicongenerator.net iOSColor = "#ffffff" # Copy from the https://realfavicongenerator.net
My recommendation is to update the
author lines to reflect you better. I'll leave it to you to create a favicon for your site. I haven't done this yet. But, when I do, I'll post about it.
This sub-section is where you will set the text shown in the web browser title bar or the tab in which users are viewing your site. It will also dynamically change the text based on the section of your site a user is viewing. For now, all you need to do is update the
If you have no intention of supporting multiple languages on your site, then make sure you update the
languageMenu line to false.
The text snippet below is what the params.header sub-section looks like after I made the changes I suggested:
[params.header] # Sets the navbarTitle that appears in the top left of the navigation bar navbarTitle = "Example Learning Hugo Site navBar Title" # Sets navbarTitle to match the section of the website dynamicTitles = true searchMenu = true shareMenu = true languageMenu = false
You can see the navbarTitle hightlighted in green text in this image:
This sub-section is where you will set the text that appears under the header image in the left sidebar of the site.
The only lines that need to be updated in this sub-section are:
header line is the text directly under the header image in the sidebar.
paragraph line is the text located between the
header text and the social media accounts that appear in the sidebar.
You can ignore the last two lines in this sub-section. Here is a snippet of the params.intro sub-section after making the changes I mentioned:
# These are optional params related to the sidebar. They are recommended, but not # required for proper functionality. HTML is supported within the params. [params.intro] header = "Learning Hugo header text" paragraph = "This text is beneath the header text. </br>You can also put links in the text. </br><a href='http://someURL.com'>Your Blog</a>." rssIntro = true socialIntro = true
This sub-section is a sub-section of the params.intro sub-section. It is pretty easy to understand what is in this section, a logo that represents you and your blog site. On my blog site, I used a headshot of myself. But, you may want to get a little more creative and create or choose something more appealing to your style.
Make sure that any image you create or choose is no more than 100 pixels (px) wide and no more than 100px in height. Once you have determined the image you are going to use then store the image in the following directory of your site:
<site root directory>\static\img\main\
If you decide to name the image logo.jpg, then the
src line would appear as: “/img/main/logo.jpg”
Next, you need to pick the shape of the image mask for the site logo. I went with a circle on my site. Other options are: triangle, diamond, or a hexagon. The
shape line is where you set this option.
Optionally, you can set the width of the image on the
width line. I left this line at the default.
alt line, I put a simple description of the logo image. The browser uses this text as the image is downloaded. I also believe it is used by sight-impaired folks who use special reading software to view websites.
The following image shows where the
params.intro text and
params.intro.pic image are displayed on the home page.
This sub-section controls the about text in the sidebar, the number of recent posts shown in the sidebar, whether or not the blog categories are displayed, and the order they appear.
about line with a short description explaining your blog site. This text is displayed just below the blog categories in the sidebar.
postAmount line sets the number of recent posts that are displayed in the sidebar. Update this setting to what suits you.
categories line determines if the blog categories are displayed in the sidebar. The categories appear after the most recent posts.
categoriesByCount line determines if the categories are sorted alphabetically or by the number of posts in each category.
This image shows what these options could look like:
This section appears just under the
params.intro text and at the very bottom of the sidebar. It displays all of the ways readers can contact you via different social networks. There are a bunch of them. So, determine which ways you want your readers to contact you or follow you on the social networks you use and update the section accordingly.
Phewww! This post turned out to be longer than I expected. If you want to see all of the updates I suggested to make to the config.toml file go to my GitHub repositories listing and look for the exampleSite repository.
Be sure to come back to read the rest of the posts in the series or review posts I have already written.
Series Table of Contents
Here are links to the rest of the series:
- Part 1: A quick introduction to GitHub Pages and Hugo
- Part 2: Creating your first Hugo site
- Part 3: Customizing your theme/site
- Part 4: Configuring Google Analytics
- Part 5: Publishing your site
If there is something you think I'm missing and feel should be added, please let me know.