1. Tutorials
  2. Hugo

Hugo baseof.html Template Boilerplate Configuration

September 10, 2017
Setup Title, RSS, Language, Meta, etc.

Edit layouts/_default/baseof.html. Below is a sample of the template file.

<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}">
  <head>
    <meta charset="utf-8">
    {{ .Hugo.Generator }}
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{{ block "title" . }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
    {{ if .RSSLink }}
    <link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ if .Title }}{{ .Title }} - {{ end }}{{ .Site.Title }}" />
    {{ end }}

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link href="/css/local.css" rel="stylesheet">

    <meta property="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />

    {{- partial "site-opengraph.html" . -}}
    {{- partial "site-twittercard.html" . -}}
    {{- partial "site-schema.html" . -}}
    {{- partial "site-analytics.html" . -}}
  </head>
  <body>
    {{ block "nav" . }}{{ partial "site-nav.html" . }}{{ end }}
    {{ block "header" . }}{{ end }}
    <main role="main" class="container">
      {{ block "test" . }}{{ end }}
      {{ block "main" . }}{{ end }}
    </main>

    {{ block "footer" . }}{{ partial "site-footer.html" . }}{{ end }}
    {{ block "scripts" . }}{{- partial "site-scripts.html" . -}}{{ end }}
    {{ block "deferscripts" . }}{{ end }}
  </body>
</html>

Language

Template for language.

<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en{{ end }}">
  ...
</html>

Language configuration in config.toml.

languageCode = "en"

Title

Template for title. It will show page title followed by site title, e.g. Hugo baseof.html Template Boilerplate Configuration | Lua Software Code.

<html lang="en">
  <head>
    <title>{{ block "title" . }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}</title>
    ...
  <head>
  ...
</html>

Title configuration in config.toml.

title = "Lua Software Code"

You can set home page’s title at content/_index.md.

---
title: "HOWTO for Programmer"
---

Site RSS

Template for RSS link.

<html lang="en">
  <head>
    ...
    {{ if .RSSLink }}
    <link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ if .Title }}{{ .Title }} - {{ end }}{{ .Site.Title }}" />
    {{ end }}
    ...
  </head>
...
</html>

Language, copyright and author configuration in config.toml.

languageCode = "en"
copyright = "This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License."

[author]
  name = "Desmond Lua"

RSS is automatically generated for Site, Section and Taxanomy (Tags and Categories). Refer to the RSS Template code used by Hugo.

<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
    <link>{{ .Permalink }}</link>
    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
    {{ with .OutputFormats.Get "RSS" }}
  {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
    {{ end }}
    {{ range .Data.Pages }}
    <item>
      <title>{{ .Title }}</title>
      <link>{{ .Permalink }}</link>
      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
      <guid>{{ .Permalink }}</guid>
      <description>{{ .Summary | html }}</description>
    </item>
    {{ end }}
  </channel>
</rss>`

You can overwrite RSS templates at the following locations.

Main RSS

  • /layouts/rss.xml
  • /layouts/_default/rss.xml

Section RSS

  • /layouts/section/
    .rss.xml
  • /layouts/_default/rss.xml

Taxonomy RSS

  • /layouts/taxonomy/.rss.xml
  • /layouts/_default/rss.xml

Meta Description

Template for meta description. It use the description from the following sources and priority.

  • .Desceiption (page’s description)
  • .Summary (summary generated from page’s content)
  • .Site.Params.description (site’s description)
<html lang="en">
  <head>
    ...
    <meta property="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}" />
    ...
  </head>
...
</html>

Description configuration in config.toml.

[params]
  description = "Tutorials and snippets for programming languages, frameworks, tools, etc."

References

❤️ Is this article helpful?
Buy me a coffee☕ or support my work via PayPal to keep this space ad-free.
👶 Some of the Apps I built
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now
👨‍💻 Is your company hiring?
I am a full stack engineer (Python, Flask, JavaScript, Vue.js, Kotlin, Android) open to remote or relocation job opportunity. Check out my portfolio.
By Desmond Lua
A dream boy who enjoys programming and travelling, maker of Travelopy. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.