How do you use baseof.html correctly?

support
1

I’m super new to Hugo and I’m trying to turn a sketch I did using pure html / css to create a Hugo theme.

I’ve hit a roadblock. I don’t understand how do you correctly use baseof.html file. Every theme I look at has it. I decided to create one myself - as I thought it would be a “base” for every generated html. But it does not seem to be applied at all.
Removing it changes nothing - as it seems that only list.html and single.html are used.
What’s the correct structure and a way to use it?

2

structure

layouts//
└── _default/
    ├── baseof.html
    ├── list.html
    └── single.html

layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="{{ or .Site.LanguageCode .Site.Language.Lang }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0">
  <title>{{ with .Title }}{{ printf "%s | " . }}{{ end }}{{ site.Title }}</title>
</head>
<body>
{{ block "main" . }}

{{ end }}
</body>
</html>

layouts/_default/list.html

{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  {{ end }}
{{ end }}

layouts/_default/single.html

{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
{{ end }}

https://gohugo.io/templates/base/

3

A good example would be to create Hugo site with the command line, then create new theme, and then check how the theme’s baseof.html file is structured. At least that’s how I learnt to use it.

While you can override the base template and other blocks within it, basically, it includes the code which all your templates (might) share while the {{ block "main" . }}{{ end }} part is where content begins to differ between templates.

Using the example above of baseof.html.

Summary 
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ block "title" . }}
      <!-- Blocks may include default content. -->
      {{ .Site.Title }}
    {{ end }}</title>
  </head>
  <body>
    <!-- Code that all your templates share, like a header -->
    {{ block "main" . }}
      <!-- The part of the page that begins to differ between templates -->
    {{ end }}
    {{ block "footer" . }}
    <!-- More shared code, perhaps a footer but that can be overridden if need be in  -->
    {{ end }}
  </body>
</html>

You could now define a single.html file as follows

{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}
4

thank you both! I don’t entirely get it, but I will play with this basic structure.

I’m trying to create my own theme from scratch, but it seems to be the chicken and egg problem for a start - you need to create your own theme, but to create a new theme you had to have knowledge gained from creating a theme :wink: …

Atm I have semi working theme without “baseof” file, just with list , single and custom index. And I’m trying to get a hang of it. Now I’m playing with ranges and looping over them… and getting images to work :wink: .
Will try to rebuild it with baseof as well . Will see how it goes - it’s a bit challenging but Hugo seems to be better documented than other generators I’ve tried.

5

Yo can share your theme so far for pointers.

6

You might want to read

If you want to try building a site without using a theme. You still have to create layouts of course, but this approach might make things easier to begin.

1 Like