Usually, when looking at how to build a blog using Jekyll or Hugo, config.yml or config.toml will be explained. Jekyll even mentions how to use ruby on the official website, so it’s a situation where the belly button is bigger than the belly button. config.toml is an important and essential file that contains various settings related to the blog, but I have not seen a single line of documentation explaining config.yml. It is enough to touch it whenever necessary while building the blog, and you will find it interesting to see how the blog is improved. So, let’s try to apply the theme right away.

Choose a theme

The page below displays the themes from Hugo. Just choose the theme you like. Even if you are not here, there are sites that offer a variety of themes compatible with Hugo or Jekyll, so you may want to use them. However, this blog used the theme called PaperMod, which is the second theme hanging on the site below.

https://themes.gohugo.io/

The themes of the above site, including this theme, are highly recommended because of their high level of perfection. What is completeness? Taking the PaperMod theme as an example, the theme itself is implemented as a Responsive Web Design, and it also supports the Multilingual Mode provided by Hugo. In addition, it can be easily linked with Google Search Console, Bing Web Master, and Google Analytics (GA), and search engine optimization (SEO: Search Engine Optimization) using Open Graph ) is made easy. In order to use these external services, including Google Adsense, you must select a theme and apply it directly. Therefore, it would be good to select a theme with high perfection like me and tune it to the desired configuration.

Download themes

If you created a blog using Hugo in the previous post, you can check the directories below.

quickstart $ tree
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

6 directories, 2 files

6 directories and 2 files. It is a very simple structure. No matter what path you download from here, put the theme in any folder under the themes folder and you’re done. The PaperMod theme saved in Github can be downloaded under the themes/PapperMod directory with the following shell command.

$ git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

Apply Theme

To apply the downloaded theme, write “theme: PaperMod” in config.toml as shown below. It literally means to use the theme located in “theme/PaperMod”. In this case, baseURL is the address of the website, and the title can be changed to the name of the website.

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = "PaperMod"

Test your blog

Don’t you want to check the applied theme right away? The shell command below creates a blog and starts a web server at the same time. If you connect to “localhost:1313” on a web browser, you can test my blog provided by the web server.

// Serve the site on "http://localhost:1313"
$ hugo server -D

writing

Perhaps the theme has been applied, but since there is no text, it will be difficult to test various functions. Let’s write the famous lorem ipsum article. Posts are saved in the newly created post folder under the content folder. The file name may be whatever, but it should be “loremipsum.md”, and the text should be written in Markdown format. Write the following. If you have not shut down the previously executed web server, the moment you save the file, Hugo will build a new blog and open it, and the high web browser will be refreshed so you can see the modifications immediately.

---
layout: post
title: false
date:   2022-06-20 22:00:00
draft: false
categories: [lorem]
tags: [lorem, ipsum]
comments: true
---

## 제목 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Edit config.toml

I mentioned earlier that it is good to modify config.toml while making a blog, rather than learning and applying it separately. However, since the theme itself refers to config.toml, it is also necessary to properly set config.toml to know the true nature of the theme. Since the PaperMod theme provides a sample of config.toml, it is recommended to take it and use it, and then remove or modify it one by one.

Publish blog

If revisions and revisions are repeated, this is the finished blog….

$ hugo -D

To our readers

To summarize what we’ve done so far, it’s actually intuitive. It downloads the theme you want to apply, edits config.toml, and gives the theme application and various settings such as blog name. If you have done this up to this point, at least you have created a viable blog.

For readers who enjoyed this article…

For readers who enjoyed reading this article, we recommend that you create your own blog by deleting or modifying various settings in config.toml to see how the blog changes.

For readers who are more greedy for the design of the theme…

For readers who are knowledgeable in HTML (Hyper-Text Markup Language), JavaScript, and Cascading Style Sheet (CSS), or who have a lot of time? I also recommend However, I just want to convey the fact that there is no need to modify the original theme of theme/PaperMod in this case. Hugo supports theme overriding, so you just need to place a copy of the file you want to edit in the layouts folder.

Suppose you want to edit the top navigation part of your blog. This part is in charge of header.html in themes/PaperMod/layouts/partials folder. Oh, then you can edit that file! Of course it does. However, the original is damaged and it is difficult to know which part has been modified later. Therefore, make a copy of the file in the layouts/partials folder and modify the copy. When this happens, Hugo builds the blog using the copy instead of the original.

Theme overriding is great for keeping the originals and keeping track of changes. In other words, there is no need to modify the original.I use a theme, but I am not interested in the implementation content This means that I can manage only the code that is applied to my blog, excluding the theme, and save the code on github If you are doing this, you can try applying a function called a submodule. This will be covered in more detail in the next post.

Closing

It is very simple to create a blog and apply a theme using Hugo, except for modifying the config.toml left by the readers and giving various settings. However, if you are considering modifying the theme or even maintaining your blog, there are definitely things to think about in advance. In a later post, I will post about blog management using Hugo and GitHub.