Customize the static website with Hugo.

In the previous blog post, I shared how I built my website. Hugo makes everything easier, to edit the website, I can simply alter the configuration file config.toml, and the markdown files in the content folder. For more advanced users, you may also edit the html files in the layouts folder directly.
Here I will show a few examples of how to customize the website.

Table of Contents

Posts vs pages

The difference between posts and pages is that blog posts are dated and indexed, while pages are not. To write a page, first create a page directory in the content folder:

cd content
mkdir page
cd page

Then start a new markdown file with the following front-matter settings:

---
title: "Title"
comments:       false
showMeta:       false
showActions:    false
---

Customize sidebar

The sidebar allow users to navigate through the website easily. Edit settings under “Menu Configuration” in the config.toml file to alter sidebar items and add Font Awesome icons.
Index page:

# Menu Configuration
[[menu.main]]
  weight = 1
  identifier = "home"
  name = "Home"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-home\"></i>"
  url = "/"

About page:

[[menu.main]]
  weight = 2
  identifier = "about"
  name = "About"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-smile-o\"></i>"
  url = "/page/about"

Index all the blog posts in Chinese:

[[menu.main]]
  weight = 7
  identifier = "chinese"
  name = "中文"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-language\"></i>"
  url = "/tags/Chinese/"

Add links to social media:

[[menu.links]]
  weight = 1
  identifier = "google"
  name = "Google Scholar"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-graduation-cap\"></i>"
  url = "https://scholar.google.com/citations?user=UoI3bSQAAAAJ&hl=en"

Customize cover image

Upload the large image file to the “cloud” (imgur, Google Photo, etc.) and obtain a URL. Then insert the link to the config.toml file, the website will load faster this way:

 coverImage = "https://i.imgur.com/CgrW7fU.jpg"

Customize favicon

First, go to the Favicon Generator website, upload your preferred favicon image, download the zip package generated by this website, and extract the package to your static folder.
To update the favicon for the website, you will need to edit the head.html file in the layouts/partials/ directory.

In the following line of code, change /favicon.png to /favicon.ico.

<link rel="icon" href="{{ with .Site.Params.favicon }}{{ . }}{{ else }}/favicon.png{{ end }}">

Then insert the html code provided by the Favicon Generator below this line.

<link rel="icon" href="{{ with .Site.Params.favicon }}{{ . }}{{ else }}/favicon.ico{{ end }}">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Once your website is deployed, you can use the Favicon Checker to see if the favicon displayed properly on all platforms (desktop computers, mac, tablets, etc.).

Pinned welcome message

I like the style of the home page provided by the theme. However, I wanted to “pin” a welcome message at the top. I think the correct method is to edit the layout. But I haven’t figured out how to do that…
So I simply created a post that dates in the future. Since the blog previews are ordered by time, this post will always be on top. :)

---
title: "Welcome! 欢迎"
date: 2028-04-23
comments:       false
showMeta:       false
showActions:    false
---

The disadvantage of doing this is the welcome post will be indexed and will show up in archives and categories.


Update 09/03:
I figured out how to hard code a welcome message into the webpage. :)
In the layouts/index.html file, insert a new section before the article sections:

...
<!-- Line above -->
<div id="main" data-behavior="{{ .Scratch.Get "sidebarBehavior" }}"
        class="{{ with .Params.coverimage }}hasCover{{ end }}
               {{ if eq .Params.covermeta "out" }}hasCoverMetaOut{{ else }}hasCoverMetaIn{{ end }}
               {{ with .Params.coverCaption }}hasCoverCaption{{ end }}">
<!-- Welcome message section starts here -->
<section class="postShorten-group main-content-wrap">
    <div class="postShorten-wrap">
      <div class="postShorten-header">
        <h1 class="postShorten-title" itemprop="headline">Welcome! 欢迎</h1>
      </div>
      <div class="postShorten-excerpt" itemprop="articleBody">
        <p>Welcome to my personal blog.<br>欢迎访问我的博客。<br>
        <a href="/page/about/"><i class="fa fa-smile-o"></i> About me</a>&emsp;&emsp;
        <a href="/page/projects/"><i class="fa fa-tasks"></i> My projects</a></p>   
      </div>
    </div> 
</section>
<!-- Followed by article sections -->
<section class="postShorten-group main-content-wrap">
    {{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}
...

The “emsp” adds white spaces before texts. In html, “nbsp” adds a single space, “ensp” adds 2 spaces, “emsp” adds 4 spaces. And to get a tab, use “nbsp” four times.
I also inserted a few Font Awesome icons, just for fun.