Customize theme for Personal Blog - with Hugo

Having a personal blog is something that's very interesting because you can create your own preferable design and share different categories of contents. Speaking of the theme or design of the blog, you can either use the free Drag and Drop online tools or you can pay for a professional designer to customize for you. As a programmer, of course we can design the entire blog from scratch easily. I did created my personal website from scratch without using any online themes -> [My Website].

However, I am not a professional frontend designer so my sense of design is not that strong. Hence, using free online themes is a better option for me. Recently I've created a blog with my partner to share articles about non-technical related stuffs such as our life, food, health, fitness, reviews and additional knowledges using Hugo theme -> [Our Blog]. The theme template has saved our time from designing from scratch and writing articles with HTML and CSS.

The biggest customization that we did is that we had changed the default language from English to Chinese because we prefer to share more articles written in Chinese. In order to do such customization, we must understand the folder structure of the chosen theme and how to modify the default configuration file.

The following points and some sample codes show some customization and implementation of the chosen Hugo theme [Hugo Future Imperfect Slim Theme].

1. Customize Language - English to Chinese
2. Customize list of Social Network Platforms
3. Customize Social Share of each Blog Post
4. Implementation of Staticman for Comments section.

Customize Language - English to Chinese

In config.toml, under the [Languages] section, change the first sub-section to Chinese, because the first sub-section means the default language. You can remove other unwanted languages which have been provided by default.

[Languages.zh-cn]
    LanguageCode        = "zh-cn"
    LanguageName        = "中文"
    weight              = 1

In config.toml, under the [menu] section, change the default English menu to Chinese version. For example:

[[menu.main]]
    name              = "主页"
    identifier        = "home"
    url               = "/home"
    pre               = "<i class='fa fa-home'></i>"
    weight            = 1

In config.toml, under the [Languages] section, add the menu of English version below the [Languages.en]. All the menu of the non-default languages can be found in [Languages] section under sub-section of respective language.

[[Languages.en.menu.main]]
      name              = "Home"
      identifier        = "home"
      url               = "/home"
      pre               = "<i class='fa fa-home'></i>"
      weight            = 1

In /themes folder, you would be able to see /i18n folder. You can do the translation for every language here by creating a .toml file for each of your customized languages using language codes such as zh-cn.toml for Chinese.

[recent_posts]
  other = "最新文章"
[see_more]
  other = "查看更多"
[learn_more]
  other = "了解更多"

For your blog posts to be categorized according to the selected languages, you have to name your file name ended with '[language_code].md' such as 'fitness.zh-cn.md' for Chinese and 'food.en.md' for English. Blog posts are created under /content/blog.

Note: the language codes 'zh-cn' for Chinese and 'en' for English are very important, the codes will be used anywhere in the configuration file and also as the file names. Hence, the language code must be fixed to avoid errors.

Customize list of Social Network Platforms

For the chosen theme, there are social network options on the left side bar. The customization that you could do is:

1. Add/remove based on your preference by modifying socnet- icon.html file in /themes/layouts/partials.

2. Add another set of social networks list by adding another html file in partials folder and include that file in site-intro.html under the same folder.

Customize Social Share of each Blog Post

The default social share are Twitter, Facebook, Reddit, LinkedIn, Pinterest and Email. You can add/remove based on your preference in config.toml under [params] section.

socialShare           = ["twitter", "facebook", "linkedin", "email"]

Implementation of Staticman for Comments section.

In order for people to comment on your blog post, you can use the recommended library which is Staticman. You have to add a staticman.yml in root folder and update [params.staticman] sub-section in config.toml. Refer the provided documentation [Staticman].

That's all for my sharing regarding customization and implementation of Hugo theme. There are lots of clean, simple and creative design Hugo themes which are easy to be customized and implemented. Feel free to give it a try! :)

Feel free to leave a comment as well if any idea :D

Reference: Hugo | Future Imperfect Slim Theme