Hugo - Theme Plugin

Now that we have all the critical components ready, it's time to move up to one of the Hugo's unique selling point: theme module. Hugo from architectural point of view, learn from the cons of its competitor, develops a method to allow user to apply styles, settings etc. in modular manner. This way, user can switch between design easily without interfering with current configurations, posts and contents.

Based on specification, you can modularize a list of items:

archetypes
layouts
static
i18n
data
config.toml
and anything else (with instruction given)

What you need to do is to move the modular items into the corresponding theme folder and Hugo will look for it automatically. How Hugo seeks files is by this sequence:

Search local directory for the file
If #1 is not found, Search the specified theme directory

We can now see that files, sharing the same directory pattern as the local version, acts as a secondary module. If you want customization, you can change it in your local directory. Let's test this out!

Objectives

Create a vanilla theme and move all files that can be templates into the theme module.

Create the Theme Directory

To create the theme module, Hugo actually packs with a single command to create the necessary to create the theme. Let's create our vanilla theme.

$ hugo new theme vanilla

Transfer Layout to Themes

Now, let's move the layouts into the themes. Layouts and static files are template designs components that can be used across different Hugo contents across repositories. You can do it by:

$ cp -r layouts/* themes/vanilla/layouts/.

$ rm -rf layouts/*

Tip: use ls to check before performing rm -rf.

Activate Theme

If you restart your server, you'll realize that your existing pages are not longer available. This is because we haven't instruct Hugo to use a theme. To do so, let's edit our local config.toml and add the following configuration

theme = ["vanilla"]

Also, you must remove the index.html from the vanilla theme since we're using content/_index.md as home page.

$ rm themes/vanilla/layouts/index.html

Once you're done, restart your server and you should see your contents should not change. Congratulations, you had successfully shifted the layouts to your theme module.

NOTE: the keyword inside the "theme" array MUST match the directory name in the themes directory. Example: vanilla for themes/vanilla. Otherwise, Hugo can't find the correct theme module.

NOTE: you can use multiple non-conflicting theme modules at a time.

Continue to Design Your Themes

You can continue to shift template files from your local repository to the theme modules. Once you're happy with it, create a git repository inside the vanilla theme directory. Moving forward, you can now reuse vanilla theme in any other Hugo repository. Just git clone it inside the themes directory, configure it to use the theme and you're all set!

Congratulations! You had completed the basic of Hugo!

Page updated

Google Sites

Report abuse