Hugo Configuration TOML to JSON

Convert Hugo static site generator's TOML configuration to JSON. Covers site metadata, menu definitions, parameters, and theme settings with practical examples.

Real-World Configs

Detailed Explanation

Hugo, the popular static site generator, traditionally uses TOML as its primary configuration format (though YAML and JSON are also supported). Understanding the JSON equivalent helps when migrating configurations or building Hugo site generators programmatically.

A Hugo config.toml:

baseURL = "https://example.com/"
languageCode = "en-us"
title = "My Tech Blog"
theme = "PaperMod"
paginate = 10

[params]
  env = "production"
  description = "A blog about technology"
  author = "Alice"
  defaultTheme = "auto"
  ShowReadingTime = true
  ShowShareButtons = true

[params.homeInfoParams]
  Title = "Welcome"
  Content = "A blog about software engineering and tech"

[[params.socialIcons]]
  name = "github"
  url = "https://github.com/alice"

[[params.socialIcons]]
  name = "twitter"
  url = "https://twitter.com/alice"

[[menu.main]]
  identifier = "posts"
  name = "Posts"
  url = "/posts/"
  weight = 10

[[menu.main]]
  identifier = "about"
  name = "About"
  url = "/about/"
  weight = 20

[markup.goldmark.renderer]
  unsafe = true

Converts to JSON:

{
  "baseURL": "https://example.com/",
  "languageCode": "en-us",
  "title": "My Tech Blog",
  "theme": "PaperMod",
  "paginate": 10,
  "params": {
    "env": "production",
    "description": "A blog about technology",
    "author": "Alice",
    "defaultTheme": "auto",
    "ShowReadingTime": true,
    "ShowShareButtons": true,
    "homeInfoParams": {
      "Title": "Welcome",
      "Content": "A blog about software engineering and tech"
    },
    "socialIcons": [
      {"name": "github", "url": "https://github.com/alice"},
      {"name": "twitter", "url": "https://twitter.com/alice"}
    ]
  },
  "menu": {
    "main": [
      {"identifier": "posts", "name": "Posts", "url": "/posts/", "weight": 10},
      {"identifier": "about", "name": "About", "url": "/about/", "weight": 20}
    ]
  },
  "markup": {
    "goldmark": {
      "renderer": {
        "unsafe": true
      }
    }
  }
}

Notable conversion details:

[[params.socialIcons]] and [[menu.main]] use array of tables syntax, producing JSON arrays of objects.
Deeply nested tables like [markup.goldmark.renderer] produce 3-level deep JSON nesting.
Indented keys under [params] are a stylistic choice in TOML -- indentation has no semantic meaning, but improves readability.
Case-sensitive keys like ShowReadingTime preserve their casing in JSON.

Use Case

Building a Hugo site scaffolding tool that generates configuration programmatically from JSON templates, then converts to TOML for Hugo to consume, or migrating Hugo configs between TOML, YAML, and JSON formats.

Try It — TOML ↔ JSON Converter

Open full tool →

Hugo Configuration TOML to JSON

Detailed Explanation

Use Case

Try It — TOML ↔ JSON Converter

Related Topics