Adding an About page

Reading time: about 3 min

For the finishing touch, let’s add an “About” page to talk a bit about your webcomic.

Once again, this will be a page under the content/ folder.

What is and is not a comic page

Hugo knows the type of a page by looking at the first folder after content/. For example, content/comic/E01P01/ is a comic page.

The type can be anything, so content/animal/insect/ant/ would be of type animal. But Silicate doesn’t not know what to do with that type, so it will a “normal” or “default” page.

So, simply put: anything under content/comic/ will be a comic page, and everything outside will be a “normal” page.

Creating the About page

Here’s the twist: since we don’t care about type for the “about” page, we don’t need a folder.

Just like index.md, create a content/about.md text file.

Then, you just need to add a front matter and some content! In the case of the Pepper & Carrot demo:

+++
title = 'About'
+++

### Silicate Pepper & Carrot demo

This website is a demo for Silicate using [Pepper & Carrot webcomic](https://www.peppercarrot.com/)
comic pages as an example.

### Browse the source

You can see the source used to create this website here :
<https://silicate.aribaud.net/demos-sources/pepper-carrot>

### Check out Silicate

You can learn more about Silicate on its main website:
<https://silicate.aribaud.net/>

Now, your website’s files should look like this:

my_webcomic/
    hugo.toml
    content/
        about.md
        comic/
            _index.md
            E01P01/
                index.md
                transcript.md
                strips/
                    E01P01.jpg

You can navigate to https://localhost:1313/about/ and you should see the about page:

Unlike the comic pages, we have no folder with a index.md file, directly a .md file because we need no other resources. This is what Hugo calls a “regular page”, as opposed to a “page bundle” like before.

Adding the About page to the header navigation bar

Right now the header navigation bar only shows “Home” and “Archive”; we want to add our new “About” page to it.

The header is configured through hugo.toml. Since nothing is set yet for the main menu, it uses defaults values from themes/silicate/hugo.toml.

First, let’s open themes/silicate/hugo.toml and copy-paste the whole [menus] table into our own hugo.toml.

We should have something like this now:

title = 'Silicate Pepper & Carrot Demo'
baseURL = 'https://silicate.aribaud.net/demos/pepper-carrot/'
theme = 'silicate'
copyright = 'Demo based on Pepper & Carrot - CC-By www.peppercarrot.com'

[menus]
  [[menus.main]]
    name = 'Home'
    pageRef = '/'
    weight = 10

  [[menus.main]]
    name = 'Archive'
    pageRef = '/comic'
    weight = 20

[params]
  [params.author]
    email = 'jdoe@example.org'
    name = 'John Doe'

Now, we can add our own About page entry inside the [menus] table:

[[menus.main]]
  name = 'About'
  pageRef = '/about'
  weight = 30

• name is what is displayed in the nav
• pageRef is what page should be displayed, relative to the content/ folder
• weight is for sorting the menu entries just like we saw for pages

Be careful, we need [[menus.main]] and not [menus.main].

Now, if we look at the home page, we should have a working About link leading to the corresponding page!: