Hugo config management

Configuration

When you create a new Hugo site, you might have noticed config.toml file created by default at the root level. It contains following configuration,

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

Site variable

You can configure several site level variable in the config.toml file that you can use across your site.

Check the hugo site variable link for all the default variables.

Page variable

Page level variables as name suggest if at the page level, for eg individual page level title or description. You will configure them in front matter (markdown aka .md files.).

Check the hugo page variable link for all the default variables.

How do you access Site Params?

In your shortcode or partial or layout html , you can access the site variable like below,

   <h1>My Site Name : {{.Site.Title}}</h1>
   <h2>{{.Site.Description}} </h1>

Page Params

For example from the front-matter in markdown file under content folder

Sample Markdown

---
Title: Pixobe Blog
Description: For Technical articles, Reviews and News.
Weight: 1
---

You access above page level title in layout or shortcode or partials like this,

    <h1>This page name : {{.Page.Title}}</h1>

User defined

Some times we may need to define our own variables, for eg a caption for a site or a page.

For site level caption, add it to config.toml

/*config.toml*/
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
caption = 'My awesome hugo tutorial'

You can then access it in your html like below

 <p> {{.Site.Params.caption}} </p>

Similarly whatever defined in front-matter (remember its markdown under content),

 <p> My Page Caption  {{.Page.Params.caption}} </p>

How about a variable on the page?

For example you want to do some manipulation to string or number, you can define a variable in code block,

   {{ $title := or  ( .Page.Title  .Site.Title)  }}

    <meta property="og:title" content="{{$title}}" />

So in the above code if page level title is present it will be set otherwise site title to the variable $title

Hands On

Checkout the variables-params branch from the git repo hugo-tutorial,

  git checkout variables-params

If you do not have the git clone locally the do the following

git clone -b variables-params [email protected]/pixobe/hugo-tutorial.git

Link to repo https://github.com/pixobe/hugo-tutorial/tree/variables-params