HUGO

  • News
  • Docs
  • Themes
  • Community
  • GitHub
Star

What's on this Page

    • Media Types
    • Output Formats
      • Configure Output Formats
    • Output Formats for Pages
    • Link to Output Formats
    • Templates for Your Output Formats
TEMPLATES

Custom Output Formats

Hugo can output content in multiple formats, including calendar events, e-book formats, Google AMP, and JSON search indexes, or any custom text format.

This page describes how to properly configure your site with the media types and output formats, as well as where to create your templates for your custom outputs.

Media Types

A media type (also known as MIME type and content type) is a two-part identifier for file formats and format contents transmitted on the Internet.

This is the full set of built-in media types in Hugo:

type suffix
application/javascript js
application/json json
application/rss xml
application/xml xml
text/calendar ics
text/css css
text/csv csv
text/html html
text/plain txt

Note:

  • It is possible to add custom media types or change the defaults; e.g., if you want to change the suffix for text/html to asp.
  • The Suffix is the value that will be used for URLs and filenames for that media type in Hugo.
  • The Type is the identifier that must be used when defining new/custom Output Formats (see below).
  • The full set of media types will be registered in Hugo’s built-in development server to make sure they are recognized by the browser.

To add or modify a media type, define it in a mediaTypes section in your site configuration, either for all sites or for a given language.

Example in config.toml:

[mediaTypes]
  [mediaTypes."text/enriched"]
  suffix = "enr"
  [mediaTypes."text/html"]
  suffix = "asp"

The above example adds one new media type, text/enriched, and changes the suffix for the built-in text/html media type.

Output Formats

Given a media type and some additional configuration, you get an Output Format:

This is the full set of Hugo’s built-in output formats:

name mediaType path baseName rel protocol isPlainText isHTML noUgly
AMP map[string:text/html+html mainType:text subType:html suffix:html delimiter:. type:text/html] amp index amphtml false true false
CSS map[delimiter:. type:text/css string:text/css+css mainType:text subType:css suffix:css] styles stylesheet true false false
CSV map[suffix:csv delimiter:. type:text/csv string:text/csv+csv mainType:text subType:csv] index alternate true false false
Calendar map[type:text/calendar string:text/calendar+ics mainType:text subType:calendar suffix:ics delimiter:.] index alternate webcal:// true false false
HTML map[suffix:html delimiter:. type:text/html string:text/html+html mainType:text subType:html] index canonical false true false
JSON map[mainType:application subType:json suffix:json delimiter:. type:application/json string:application/json+json] index alternate true false false
RSS map[delimiter:. type:application/rss string:application/rss+xml mainType:application subType:rss suffix:xml] index alternate false false true
  • A page can be output in as many output formats as you want, and you can have an infinite amount of output formats defined as long as they resolve to a unique path on the file system. In the above table, the best example of this is AMP vs. HTML. AMP has the value amp for Path so it doesn’t overwrite the HTML version; e.g. we can now have both /index.html and /amp/index.html.
  • The MediaType must match the Type of an already defined media type.
  • You can define new output formats or redefine built-in output formats; e.g., if you want to put AMP pages in a different path.

To add or modify an output format, define it in an outputFormats section in your site’s configuration file, either for all sites or for a given language.

[outputFormats.MyEnrichedFormat]
mediaType = "text/enriched"
baseName = "myindex"
isPlainText = true
protocol = "bep://"

The above example is fictional, but if used for the homepage on a site with baseURL https://example.org, it will produce a plain text homepage with the URL bep://example.org/myindex.enr.

Configure Output Formats

The following is the full list of configuration options for output formats and their default values:

name
the output format identifier. This is used to define what output format(s) you want for your pages.
mediaType
this must match the Type of a defined media type.
path
sub path to save the output files.
baseName
the base filename for the list filenames (homepage, etc.). Default: index.
rel
can be used to create rel values in link tags. Default: alternate.
protocol
will replace the “http://” or “https://” in your baseURL for this output format.
isPlainText
use Go’s plain text templates parser for the templates. Default: false.
isHTML
used in situations only relevant for HTML-type formats; e.g., page aliases.
noUgly
used to turn off ugly URLs If uglyURLs is set to true in your site. Default: false.
notAlternative
enable if it doesn’t make sense to include this format in an AlternativeOutputFormats format listing on Page (e.g., with CSS). Note that we use the term alternative and not alternate here, as it does not necessarily replace the other format. Default: false.

Output Formats for Pages

A Page in Hugo can be rendered to multiple representations on the file system. By default, all pages will render as HTML with some of them also as RSS (homepage, sections, etc.).

This can be changed by defining an outputs list of output formats in either the Page front matter or in the site configuration (either for all sites or per language).

Example from site config.toml:

[outputs]
  home = ["HTML", "AMP", "RSS"]
  page = ["HTML"]

Example from site config.yml:

outputs:
  home: ["HTML", "AMP", "RSS"]
  page: ["HTML"]
  • The output definition is per Page Kind (i.e, page, home, section, taxonomy, or taxonomyTerm).
  • The names used must match the Name of a defined Output Format.
  • Any Kind without a definition will default to HTML.
  • These can be overridden per Page in the front matter of content files.
  • Output formats are case insensitive.

The following is an example of YAML front matter in a content file that defines output formats for the rendered Page:

---
date: "2016-03-19"
outputs:
- html
- amp
- json
---

Link to Output Formats

Each Page has both an .OutputFormats (all formats, including the current) and an .AlternativeOutputFormats variable, the latter of which is useful for creating a link rel list in your site’s <head>:

{{ range .AlternativeOutputFormats -}}
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
{{ end -}}

Note that .Permalink and .RelPermalink on Page will return the first output format defined for that page (usually HTML if nothing else is defined).

This is how you link to a given output format:

{{ with  .OutputFormats.Get "json" -}}
<a href="{{ .Permalink }}">{{ .Name }}</a>
{{- end }}

From content files, you can use the ref or relref shortcodes:

[Neat]({{< ref "blog/neat.md" "amp" >}})
[Who]({{< relref "about.md#who" "amp" >}})

Templates for Your Output Formats

A new output format needs a corresponding template in order to render anything useful.

The key distinction for Hugo versions 0.20 and newer is that Hugo looks at an output format’s Name and MediaType’s Suffix when choosing the template used to render a given Page.

The following table shows examples of different output formats, the suffix used, and Hugo’s respective template lookup order. All of the examples in the table can:

  • Use a base template.
  • Include partial templates
Example OutputFormat Suffix Template Lookup Order
AMP home, with theme "demoTheme". AMP html [layouts/index.amp.html layouts/index.html layouts/_default/list.amp.html layouts/_default/list.html demoTheme/layouts/index.amp.html demoTheme/layouts/index.html demoTheme/layouts/_default/list.amp.html demoTheme/layouts/_default/list.html]
AMP home, French language". AMP html [layouts/index.fr.amp.html layouts/index.amp.html layouts/index.fr.html layouts/index.html layouts/_default/list.fr.amp.html layouts/_default/list.amp.html layouts/_default/list.fr.html layouts/_default/list.html]
RSS home, no theme. RSS xml [layouts/rss.xml layouts/_default/rss.xml layouts/_internal/_default/rss.xml]
JSON home, no theme. JSON json [layouts/index.json.json layouts/index.json layouts/_default/list.json.json layouts/_default/list.json]
CSV regular, "layout: demolayout" in front matter. CSV csv [layouts/_default/demolayout.csv.csv layouts/_default/demolayout.csv]
JSON regular, "type: demotype" in front matter. JSON json [layouts/demotype/single.json.json layouts/demotype/single.json layouts/_default/single.json.json layouts/_default/single.json]
HTML regular. HTML html [layouts/_default/single.html.html layouts/_default/single.html]
AMP regular. AMP html [layouts/_default/single.amp.html layouts/_default/single.html]
Calendar blog section. Calendar ics [layouts/section/blog.calendar.ics layouts/section/blog.ics layouts/blog/list.calendar.ics layouts/blog/list.ics layouts/_default/section.calendar.ics layouts/_default/section.ics layouts/_default/list.calendar.ics layouts/_default/list.ics]
Calendar taxonomy list. Calendar ics [layouts/taxonomy/tag.calendar.ics layouts/taxonomy/tag.ics layouts/_default/taxonomy.calendar.ics layouts/_default/taxonomy.ics layouts/_default/list.calendar.ics layouts/_default/list.ics]
Calendar taxonomy term. Calendar ics [layouts/taxonomy/tag.terms.calendar.ics layouts/taxonomy/tag.terms.ics layouts/_default/terms.calendar.ics layouts/_default/terms.ics]

Hugo will now also detect the media type and output format of partials, if possible, and use that information to decide if the partial should be parsed as a plain text template or not.

Hugo will look for the name given, so you can name it whatever you want. But if you want it treated as plain text, you should use the file suffix and, if needed, the name of the Output Format. The pattern is as follows:

[partial name].[OutputFormat].[suffix]

The partial below is a plain text template (Outpuf Format is CSV, and since this is the only output format with the suffix csv, we don’t need to include the Output Format’s Name):

{{ partial "mytextpartial.csv" . }}

See Also

  • Lists of Content in Hugo
  • RSS Templates
  • About Hugo
    • Overview
    • Hugo Features
    • The Benefits of Static
    • Roadmap
    • License
  • Getting Started
    • Get Started Overview
    • Quick Start
    • Install Hugo
    • Basic Usage
    • Directory Structure
    • Configuration
  • Themes
    • Themes Overview
    • Install and Use Themes
    • Customize a Theme
    • Create a Theme
  • Content Management
    • Content Management Overview
    • Organization
    • Supported Content Formats
    • Front Matter
    • Shortcodes
    • Related Content
    • Sections
    • Types
    • Archetypes
    • Taxonomies
    • Summaries
    • Links and Cross References
    • URL Management
    • Menus
    • Table of Contents
    • Comments
    • Multilingual and i18n
    • Syntax Highlighting
  • Templates
    • Templates Overview
    • Introduction
    • Template Lookup Order
    • Custom Output Formats
    • Base Templates and Blocks
    • List Page Templates
    • Homepage Template
    • Section Templates
    • Taxonomy Templates
    • Single Page Templates
    • Content View Templates
    • Data Templates
    • Partial Templates
    • Shortcode Templates
    • Local File Templates
    • 404 Page
    • Menu Templates
    • Pagination
    • RSS Templates
    • Sitemap Template
    • Robots.txt
    • Internal Templates
    • Alternative Templating
    • Template Debugging
  • Functions
    • Functions Quick Reference
    • .AddDate
    • .Format
    • .Get
    • .GetPage
    • .Param
    • .Scratch
    • .Unix
    • Math
    • absLangURL
    • absURL
    • after
    • apply
    • base64
    • chomp
    • countrunes
    • countwords
    • dateFormat
    • default
    • delimit
    • dict
    • echoParam
    • emojify
    • eq
    • findRE
    • first
    • ge
    • getenv
    • gt
    • hasPrefix
    • highlight
    • htmlEscape
    • htmlUnescape
    • humanize
    • i18n
    • imageConfig
    • in
    • index
    • int
    • intersect
    • isset
    • jsonify
    • lang.NumFmt
    • last
    • le
    • lower
    • lt
    • markdownify
    • md5
    • ne
    • now
    • partialCached
    • plainify
    • pluralize
    • print
    • printf
    • println
    • querify
    • range
    • readDir
    • readFile
    • ref
    • relLangURL
    • relURL
    • relref
    • render
    • replace
    • replaceRE
    • safeCSS
    • safeHTML
    • safeHTMLAttr
    • safeJS
    • safeURL
    • seq
    • sha
    • shuffle
    • singularize
    • slice
    • slicestr
    • sort
    • split
    • string
    • strings.TrimLeft
    • strings.TrimPrefix
    • strings.TrimRight
    • strings.TrimSuffix
    • substr
    • time
    • title
    • trim
    • truncate
    • union
    • uniq
    • upper
    • urlize
    • urls.Parse
    • where
    • with
  • Variables
    • Variables Overview
    • Site Variables
    • Page Variables
    • Shortcode Variables
    • Taxonomy Variables
    • File Variables
    • Menu Variables
    • Hugo Variables
    • Git Variables
    • Sitemap Variables
  • CLI
  • Troubleshooting
    • Troubleshoot
    • Accented Characters in URLs
    • Build Performance
    • EOF Error
  • Tools
    • Developer Tools Overview
    • Migrations
    • Starter Kits
    • Frontends
    • Editor Plug-ins
    • Search
    • Other Projects
  • Hosting & Deployment
    • Hosting & Deployment Overview
    • Host-Agnostic Deploys with Nanobox
    • Host on Netlify
    • Host on Firebase
    • Host on GitHub
    • Host on GitLab
    • Host on Bitbucket
    • Deployment with Wercker
    • Deployment with Rsync
  • Contribute
    • Contribute to Hugo
    • Development
    • Documentation
    • Themes
“Custom Output Formats” was last updated: October 13, 2017: Initial commit (a48229f)
Improve this page
By the Hugo Authors

The Hugo logos are copyright © Steve Francia 2013–2017.

The Hugo Gopher is based on an original work by Renée French.

  • File an Issue
  • Get Help
  • Discuss the Source Code
  • @GoHugoIO
  • @spf13
  • @bepsays
  • News
  • Docs
  • Themes
  • Community
  • GitHub
  • About Hugo
  • Getting Started
  • Themes
  • Content Management
  • Templates
  • Functions
  • Variables
  • CLI
  • Troubleshooting
  • Tools
  • Hosting & Deployment
  • Contribute