In the previous part, we looked at how to create a blog and apply a theme using Hugo. In this part, I summarized the results of thinking about how to efficiently manage source code with a function called Submodule, assuming that GitHub is being used.

Source code structure built with Hugo

If you had previously built your blog with Hugo, the directory structure below would have been created. Rather than explaining everything, let’s look at a few necessary folders.

.
├── archetypes
├── config.yml
├── content
├── data
├── layouts
├── public
├── resources
├── static
└── themes

8 directories, 1 file

themes folder

Themes folder is where the themes you want to apply to your blog are located. Since I downloaded and applied the theme called PaperMod here in the previous part, the directory structure will be as follows.

$ tree themes -L 2
themes
└── PaperMod
    ├── LICENSE
    ├── README.md
    ├── assets
    ├── go.mod
    ├── i18n
    ├── images
    ├── layouts
    └── theme.toml

5 directories, 4 files

content folder

As the name suggests, the content folder is where content such as posts and pictures to be included in the blog is located. You can see that the article called lorem ipsum written in markdown format in the previous part is saved.

$ tree content
content
└── post
    └── loremipsum.md

1 directory, 1 file

public folder

The public folder is where the static website Hugo builds, i.e. the final product, resides. By looking at the index.html at the root, you can see that this is a complete website by itself. By uploading the entire content to GitHub Pages or other web hosting server in use, anyone can access the website via the Internet.

$ hugo -D
$ tree public -L 2
public/
├── 404.html
├── assets
│   ├── css
│   └── js
├── categories
│   ├── index.html
│   ├── index.xml
│   └── lorem
├── index.html
├── index.xml
├── page
│   └── 1
├── post
│   ├── index.html
│   ├── index.xml
│   ├── loremipsum
│   └── page
├── robots.txt
├── sitemap.xml
└── tags
    ├── index.html
    ├── index.xml
    ├── ipsum
    └── lorem

13 directories, 11 files

Splitting the source code!!!

What I want to say in this post is that themes folder, content folder, and public folder have different characteristics in the entire source code, so it would be good to separate them.

First, the public folder, unlike other folders, must be uploaded to the server alone. Taking github as an example, you need to create a repository called “baek9.github.io” and upload the contents of the public folder in it so that you can check the final result when connecting to baek9.github.io.

In the case of the content folder, it is a collection of various texts and pictures to fill the web site, so it corresponds to data, not source code. As long as the data is segregated, you can change themes at any time. To take one more extreme example, if the source code and data are in an unrecoverable state with ransomware, if only the data is backed up in a safe place, you can create a new blog.

I think it is not necessary to separate the themes folder. Except for the themes folder, the only source code that can be called is config.yml. However, since it is an externally imported theme rather than a theme I wrote myself, I decided that it would be better to separate it and keep the layouts folder, which is the content I tuned.

In the end, it was decided to manage the content folder, themes/PaperMod folder, and public folder as separate submodules.

Creating submodules

Do you agree with what I call project splitting? If you are a GitHub user, you can try splitting the project into a function called submodules. Submodules are an option that can be used when you need to use another project within a project. That is, the content folder and the public folder are separated as separate projects, and these two projects and the already external project, PaperMod, are imported in the form of submodules.

That is, the entire source code is located in the repository called https://github.com/baek9/hugoblog , but the content folder is in the https://github.com/baek9/hbcontent repository, and the public folder is https://github.com/ It is located in the baek9/baek9.github.io repository. Themes/PaperMod folder is located in the external repository, https://github.com/adityatelange/hugo-PaperMod. That is, when the original theme is upgraded, my blog can be easily updated, and the source code and data can be separated.

// Module Hierachy
https://github.com/baek9/hugoblog
├── archetypes
├── config.yml
├── content -> https://github.com/baek9/hbcontent
├── data
├── layouts
├── public ->  https://github.com/baek9/baek9.github.io
├── resources
├── static
└── themes
    └── PaperMod -> https://github.com/adityatelange/hugo-PaperMod