Manage Page with Bissetii in Hugo

Managing a page with Bissetii is a little different from the Hugo's manual. Due to many of Bissetii core features, there are a lot of key setup to be done in order to allow a page operating smoothly.

Languages

Bissetii enabled Hugo’s multi-lingual feature for the sake of removing possibility of creating broken URL (SEO hates it). Hence, the first you need to do is to ensure the languages for your Hugo site configurations are correct.

The most important file would be the .sites/config/_default/languages.toml for each supporting languages. At minimum, you need 2 langauges in order to instruct Hugo to maintain its language code setup.

Bissetii by default setup English and Simplified Chinese as a default configuration. The configuration file is as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

[en]
languageCode = "en"
languageName = "English"
contentDir = "../docs/en"
title = "My New Hugo Site"

[zh-hans]
languageCode = "zh-hans"
languageName = "Chinese (Simplified)"
contentDir = "../docs/zh-hans"
title = "我的Hugo网站"

Please arrange the order where the primary language is always at the top. For obvious reason,

For obvious reason, Bissetii supports directory-level transation from the get-go as it is very practical and easier to distribute among all language translators while the content creators only works on the primary language content.

Selecting Primary Language

To select the primary language from your list of languages, simply update the defaultContentLanguage field with the language ID (the one with [] braces) in your .sites/config/_default/config.toml file. Example:

1
2
3
4
5

...
defaultContentLanguage = "en"
defaultContentLanguageInSubdir = true
hasCJKLanguage = true
...

Redirect Unused Second Language

Due to Hugo’s requirement to maintain a minimum 2 languages in order retain the language code in the URL construction, you can redirect the unused second language page to your primary language landing page. That will ensure visitor will always arrive at the primary language’s landing page.

No Changes with hugo new Command

Bissetii setup the theme not to intefere with hugo new command in order to keep things aligned with Hugo. You can still continue create the content directly using the original pathing. This will always create the content inside the primary language content/ directory. Your list of actions would be something as such:

1
2
3
4

$ cd .sites                                 # enter the .sites directory
$ hugo new path/to/url-pathing-name.md      # create respecting the URI path
...
$ cd ..                                     # exit the .sites directory

Recommended Content Organization

If you notice, each content page has a lot of its associated files like a list of thumbnail images, possible PDF file, and etc. Bissetii recommends the use of directory/_index.md approach, in the same directory, the creators can store all the associated files in it. The file structure would be:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

docs/
   +- en/
   |   +- ...
   |   +- about-us/
   |          +- _index.md                   # main page using _index.md
   |          +- thumbnail-1200x628.png      # thumbnail.0
   |          +- thumbnail-1200x1200.png     # thumbnail.1
   |          +- thumbnail-480x480.png       # thumbnail.2
   |          +- my-portfolio.pdf            # any other associated files
   |          +- ...
   |
   |
   ...

This way, you can calmly, safely, and keeping distribute process simple when working with your translators counterpart without worrying about untangling the dependencies located elsewhere (hint: data/ and static/ directories management nightmare).

Another benefit is when the page is scaling with its child pages, you do not need to perform large scale overhaul just to keep content organization sane.

Page’s Hugo Front Matter

Once a page is created, the extra step you need to do is to fill up or edit the Bissetii generated page’s Hugo front matter template before writing your content. Among notable changes would be:

  1. date - Hugo compatible timestamp to indicate its creation date. Not to confused with modified date which is obtained from your git latest timestamp to the content file.
  2. title - a sensible language specific title that will appear in page title and your first heading (h1).
  3. keywords - sort out your content’s key takeaways' keywords.
  4. description - a 150-300 characters long summary of the page. It is used for advertising the page via search engine display.
  5. creators for page authorships. See Manage Authorship for instructions.
  6. thumbnails for page thumbnail image management. See Manage Social Network for instructions.
  7. menu.main for navigation management. See Manage Menu for instructions.
  8. schema for Schema.org data structure management. See Manage Schema.org

Intensively Using Bissetii’s Components' Shortcodes

Once all the front-matter settings are set, you’re free to create the page contents accordingly.

When using with Bissetii, please stick to using as many Bissetii’s Hugo shortcodes as Bissetii can offer via its components to standardize the content input. The main reason is that Hugo also generates multiple output formats (e.g. Vanilla HTML5 and AMPHTML) simultenously from your single content data file.

Hence, the shortcode apporach is currently the most sane practice in terms of maintenance and scalability so use them whenever available.

Manage Development and Publications

Now that you’re ready to create your web content, you can proceed to setup your hugo server for development and later on, manage your publishers. Visit Manage Publishers to learn more.

Wrapping Up

That is all for managing page with Bissetii in Hugo. If you have any question to ask us directly, please feel free to raise it at our GitLab Issues Section. We will be happy to assist you.