Gopher
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 suffixes
application/javascript [js]
application/json [json]
application/octet-stream
application/rss+xml [xml]
application/toml [toml]
application/typescript [ts]
application/xml [xml]
application/yaml [yaml yml]
image/jpeg [jpg jpeg]
image/png [png]
image/svg+xml [svg]
text/calendar [ics]
text/css [css]
text/csv [csv]
text/html [html]
text/jsx [jsx]
text/plain [txt]
text/tsx [tsx]
text/x-sass [sass]
text/x-scss [scss]
video/3gpp [3gpp 3gp]
video/mp4 [mp4]
video/mpeg [mpg mpeg]
video/ogg [ogv]
video/webm [webm]
video/x-msvideo [avi]

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.
  • Suffixes are the values 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.

mediaTypes:
  text/enriched:
    suffixes:
    - enr
  text/html:
    suffixes:
    - asp
[mediaTypes]
  [mediaTypes.'text/enriched']
    suffixes = ['enr']

  [mediaTypes.'text/html']
    suffixes = ['asp']


{
   "mediaTypes": {
      "text/enriched": {
         "suffixes": [
            "enr"
         ]
      },
      "text/html": {
         "suffixes": [
            "asp"
         ]
      }
   }
}

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

Note: these media types are configured for your output formats. If you want to redefine one of Hugo’s default output formats (e.g. HTML), you also need to redefine the media type. So, if you want to change the suffix of the HTML output format from html (default) to htm:

[mediaTypes]
[mediaTypes."text/html"]
suffixes = ["htm"]

# Redefine HTML to update its media type.
[outputFormats]
[outputFormats.HTML]
mediaType = "text/html"

Note that for the above to work, you also need to add an outputs definition in your site config.

Output Format Definitions  

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 permalinkable
HTML map[delimiter:. mainType:text string:text/html subType:html suffixes:[html] type:text/html] index canonical false true false true
AMP map[delimiter:. mainType:text string:text/html subType:html suffixes:[html] type:text/html] amp index amphtml false true false true
CSS map[delimiter:. mainType:text string:text/css subType:css suffixes:[css] type:text/css] styles stylesheet true false false false
CSV map[delimiter:. mainType:text string:text/csv subType:csv suffixes:[csv] type:text/csv] index alternate true false false false
Calendar map[delimiter:. mainType:text string:text/calendar subType:calendar suffixes:[ics] type:text/calendar] index alternate webcal:// true false false false
JSON map[delimiter:. mainType:application string:application/json subType:json suffixes:[json] type:application/json] index alternate true false false false
ROBOTS map[delimiter:. mainType:text string:text/plain subType:plain suffixes:[txt] type:text/plain] robots alternate true false false false
RSS map[delimiter:. mainType:application string:application/rss+xml subType:rss suffixes:[xml] type:application/rss+xml] index alternate false false true false
Sitemap map[delimiter:. mainType:application string:application/xml subType:xml suffixes:[xml] type:application/xml] sitemap sitemap false false true false
  • 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:
    baseName: myindex
    isPlainText: true
    mediaType: text/enriched
    protocol: bep://
[outputFormats]
  [outputFormats.MyEnrichedFormat]
    baseName = 'myindex'
    isPlainText = true
    mediaType = 'text/enriched'
    protocol = 'bep://'


{
   "outputFormats": {
      "MyEnrichedFormat": {
         "baseName": "myindex",
         "isPlainText": true,
         "mediaType": "text/enriched",
         "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.
permalinkable
make .Permalink and .RelPermalink return the rendering Output Format rather than main ( see below ). This is enabled by default for HTML and AMP. Default: false.

Output Formats for Pages  

A Page in Hugo can be rendered to multiple output formats on the file system.

Default Output Formats  

Every Page has a Kind attribute, and the default Output Formats are set based on that.

Kind Default Output Formats
page HTML
home HTML, RSS
section HTML, RSS
taxonomy HTML, RSS
term HTML, RSS

Customizing Output Formats  

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 file:

outputs:
  home:
  - HTML
  - AMP
  - RSS
  page:
  - HTML
[outputs]
  home = ['HTML', 'AMP', 'RSS']
  page = ['HTML']

{
   "outputs": {
      "home": [
         "HTML",
         "AMP",
         "RSS"
      ],
      "page": [
         "HTML"
      ]
   }
}

Note that in the above examples, the output formats for section, taxonomy and term will stay at their default value ["HTML", "RSS"].

New in v0.73.0 We have fixed the before confusing page kinds used for taxonomies (see the listing below) to be in line with the terms used when we talk about taxonomies. We have been careful to avoid site breakage, and you should get an ERROR in the console if you need to adjust your outputs section.

Kind Description Example
home The landing page for the home page /index.html
page The landing page for a given page my-post page (/posts/my-post/index.html)
section The landing page of a given section posts section (/posts/index.html)
taxonomy The landing page for a taxonomy tags taxonomy (/tags/index.html)
term The landing page for one taxonomy’s term term awesome in tags taxonomy (/tags/awesome/index.html)
  • The outputs definition is per Page Kind (page, home, section, taxonomy, or term).
  • The names (e.g. HTML, AMP) used must match the Name of a defined Output Format.
    • These names are case insensitive.
  • These can be overridden per Page in the front matter of content files.

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
---

List 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 -}}

Link to Output Formats  

.Permalink and .RelPermalink on Page will return the first output format defined for that page (usually HTML if nothing else is defined). This is regardless of the template file they are being called from.

from single.json.json:

{{ .RelPermalink }} > /that-page/
{{ with  .OutputFormats.Get "json" -}}
{{ .RelPermalink }} > /that-page/index.json
{{- end }}

In order for them to return the output format of the current template file instead, the given output format should have its permalinkable setting set to true.

Same template file as above with json output format’s permalinkable set to true:

{{ .RelPermalink }} > /that-page/index.json
{{ with  .OutputFormats.Get "html" -}}
{{ .RelPermalink }} > /that-page/
{{- 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 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:

Example OutputFormat Suffix Template Lookup Order
Single page in "posts" section HTML html [layouts/posts/single.html.html layouts/posts/single.html layouts/_default/single.html.html layouts/_default/single.html]
Base template for single page in "posts" section HTML html [layouts/posts/single-baseof.html.html layouts/posts/baseof.html.html layouts/posts/single-baseof.html layouts/posts/baseof.html layouts/_default/single-baseof.html.html layouts/_default/baseof.html.html layouts/_default/single-baseof.html layouts/_default/baseof.html]
Single page in "posts" section with layout set HTML html [layouts/posts/demolayout.html.html layouts/posts/single.html.html layouts/posts/demolayout.html layouts/posts/single.html layouts/_default/demolayout.html.html layouts/_default/single.html.html layouts/_default/demolayout.html layouts/_default/single.html]
Base template for single page in "posts" section with layout set HTML html [layouts/posts/demolayout-baseof.html.html layouts/posts/single-baseof.html.html layouts/posts/baseof.html.html layouts/posts/demolayout-baseof.html layouts/posts/single-baseof.html layouts/posts/baseof.html layouts/_default/demolayout-baseof.html.html layouts/_default/single-baseof.html.html layouts/_default/baseof.html.html layouts/_default/demolayout-baseof.html layouts/_default/single-baseof.html layouts/_default/baseof.html]
AMP single page AMP html [layouts/posts/single.amp.html layouts/posts/single.html layouts/_default/single.amp.html layouts/_default/single.html]
AMP single page, French language AMP html [layouts/posts/single.fr.amp.html layouts/posts/single.amp.html layouts/posts/single.fr.html layouts/posts/single.html layouts/_default/single.fr.amp.html layouts/_default/single.amp.html layouts/_default/single.fr.html layouts/_default/single.html]
Home page HTML html [layouts/index.html.html layouts/home.html.html layouts/list.html.html layouts/index.html layouts/home.html layouts/list.html layouts/_default/index.html.html layouts/_default/home.html.html layouts/_default/list.html.html layouts/_default/index.html layouts/_default/home.html layouts/_default/list.html]
Base template for home page HTML html [layouts/index-baseof.html.html layouts/home-baseof.html.html layouts/list-baseof.html.html layouts/baseof.html.html layouts/index-baseof.html layouts/home-baseof.html layouts/list-baseof.html layouts/baseof.html layouts/_default/index-baseof.html.html layouts/_default/home-baseof.html.html layouts/_default/list-baseof.html.html layouts/_default/baseof.html.html layouts/_default/index-baseof.html layouts/_default/home-baseof.html layouts/_default/list-baseof.html layouts/_default/baseof.html]
Home page with type set HTML html [layouts/demotype/index.html.html layouts/demotype/home.html.html layouts/demotype/list.html.html layouts/demotype/index.html layouts/demotype/home.html layouts/demotype/list.html layouts/index.html.html layouts/home.html.html layouts/list.html.html layouts/index.html layouts/home.html layouts/list.html layouts/_default/index.html.html layouts/_default/home.html.html layouts/_default/list.html.html layouts/_default/index.html layouts/_default/home.html layouts/_default/list.html]
Base template for home page with type set HTML html [layouts/demotype/index-baseof.html.html layouts/demotype/home-baseof.html.html layouts/demotype/list-baseof.html.html layouts/demotype/baseof.html.html layouts/demotype/index-baseof.html layouts/demotype/home-baseof.html layouts/demotype/list-baseof.html layouts/demotype/baseof.html layouts/index-baseof.html.html layouts/home-baseof.html.html layouts/list-baseof.html.html layouts/baseof.html.html layouts/index-baseof.html layouts/home-baseof.html layouts/list-baseof.html layouts/baseof.html layouts/_default/index-baseof.html.html layouts/_default/home-baseof.html.html layouts/_default/list-baseof.html.html layouts/_default/baseof.html.html layouts/_default/index-baseof.html layouts/_default/home-baseof.html layouts/_default/list-baseof.html layouts/_default/baseof.html]
Home page with layout set HTML html [layouts/demolayout.html.html layouts/index.html.html layouts/home.html.html layouts/list.html.html layouts/demolayout.html layouts/index.html layouts/home.html layouts/list.html layouts/_default/demolayout.html.html layouts/_default/index.html.html layouts/_default/home.html.html layouts/_default/list.html.html layouts/_default/demolayout.html layouts/_default/index.html layouts/_default/home.html layouts/_default/list.html]
AMP home, French language" AMP html [layouts/index.fr.amp.html layouts/home.fr.amp.html layouts/list.fr.amp.html layouts/index.amp.html layouts/home.amp.html layouts/list.amp.html layouts/index.fr.html layouts/home.fr.html layouts/list.fr.html layouts/index.html layouts/home.html layouts/list.html layouts/_default/index.fr.amp.html layouts/_default/home.fr.amp.html layouts/_default/list.fr.amp.html layouts/_default/index.amp.html layouts/_default/home.amp.html layouts/_default/list.amp.html layouts/_default/index.fr.html layouts/_default/home.fr.html layouts/_default/list.fr.html layouts/_default/index.html layouts/_default/home.html layouts/_default/list.html]
JSON home JSON json [layouts/index.json.json layouts/home.json.json layouts/list.json.json layouts/index.json layouts/home.json layouts/list.json layouts/_default/index.json.json layouts/_default/home.json.json layouts/_default/list.json.json layouts/_default/index.json layouts/_default/home.json layouts/_default/list.json]
RSS home RSS xml [layouts/index.rss.xml layouts/home.rss.xml layouts/rss.xml layouts/list.rss.xml layouts/index.xml layouts/home.xml layouts/list.xml layouts/_default/index.rss.xml layouts/_default/home.rss.xml layouts/_default/rss.xml layouts/_default/list.rss.xml layouts/_default/index.xml layouts/_default/home.xml layouts/_default/list.xml layouts/_internal/_default/rss.xml]
RSS section posts RSS xml [layouts/posts/section.rss.xml layouts/posts/rss.xml layouts/posts/list.rss.xml layouts/posts/section.xml layouts/posts/list.xml layouts/section/section.rss.xml layouts/section/rss.xml layouts/section/list.rss.xml layouts/section/section.xml layouts/section/list.xml layouts/_default/section.rss.xml layouts/_default/rss.xml layouts/_default/list.rss.xml layouts/_default/section.xml layouts/_default/list.xml layouts/_internal/_default/rss.xml]
Taxonomy in categories RSS xml [layouts/categories/category.terms.rss.xml layouts/categories/terms.rss.xml layouts/categories/taxonomy.rss.xml layouts/categories/rss.xml layouts/categories/list.rss.xml layouts/categories/category.terms.xml layouts/categories/terms.xml layouts/categories/taxonomy.xml layouts/categories/list.xml layouts/category/category.terms.rss.xml layouts/category/terms.rss.xml layouts/category/taxonomy.rss.xml layouts/category/rss.xml layouts/category/list.rss.xml layouts/category/category.terms.xml layouts/category/terms.xml layouts/category/taxonomy.xml layouts/category/list.xml layouts/taxonomy/category.terms.rss.xml layouts/taxonomy/terms.rss.xml layouts/taxonomy/taxonomy.rss.xml layouts/taxonomy/rss.xml layouts/taxonomy/list.rss.xml layouts/taxonomy/category.terms.xml layouts/taxonomy/terms.xml layouts/taxonomy/taxonomy.xml layouts/taxonomy/list.xml layouts/_default/category.terms.rss.xml layouts/_default/terms.rss.xml layouts/_default/taxonomy.rss.xml layouts/_default/rss.xml layouts/_default/list.rss.xml layouts/_default/category.terms.xml layouts/_default/terms.xml layouts/_default/taxonomy.xml layouts/_default/list.xml layouts/_internal/_default/rss.xml]
Term in categories RSS xml [layouts/categories/term.rss.xml layouts/categories/category.rss.xml layouts/categories/taxonomy.rss.xml layouts/categories/rss.xml layouts/categories/list.rss.xml layouts/categories/term.xml layouts/categories/category.xml layouts/categories/taxonomy.xml layouts/categories/list.xml layouts/term/term.rss.xml layouts/term/category.rss.xml layouts/term/taxonomy.rss.xml layouts/term/rss.xml layouts/term/list.rss.xml layouts/term/term.xml layouts/term/category.xml layouts/term/taxonomy.xml layouts/term/list.xml layouts/taxonomy/term.rss.xml layouts/taxonomy/category.rss.xml layouts/taxonomy/taxonomy.rss.xml layouts/taxonomy/rss.xml layouts/taxonomy/list.rss.xml layouts/taxonomy/term.xml layouts/taxonomy/category.xml layouts/taxonomy/taxonomy.xml layouts/taxonomy/list.xml layouts/category/term.rss.xml layouts/category/category.rss.xml layouts/category/taxonomy.rss.xml layouts/category/rss.xml layouts/category/list.rss.xml layouts/category/term.xml layouts/category/category.xml layouts/category/taxonomy.xml layouts/category/list.xml layouts/_default/term.rss.xml layouts/_default/category.rss.xml layouts/_default/taxonomy.rss.xml layouts/_default/rss.xml layouts/_default/list.rss.xml layouts/_default/term.xml layouts/_default/category.xml layouts/_default/taxonomy.xml layouts/_default/list.xml layouts/_internal/_default/rss.xml]
Section list for "posts" section HTML html [layouts/posts/posts.html.html layouts/posts/section.html.html layouts/posts/list.html.html layouts/posts/posts.html layouts/posts/section.html layouts/posts/list.html layouts/section/posts.html.html layouts/section/section.html.html layouts/section/list.html.html layouts/section/posts.html layouts/section/section.html layouts/section/list.html layouts/_default/posts.html.html layouts/_default/section.html.html layouts/_default/list.html.html layouts/_default/posts.html layouts/_default/section.html layouts/_default/list.html]
Section list for "posts" section with type set to "blog" HTML html [layouts/blog/posts.html.html layouts/blog/section.html.html layouts/blog/list.html.html layouts/blog/posts.html layouts/blog/section.html layouts/blog/list.html layouts/posts/posts.html.html layouts/posts/section.html.html layouts/posts/list.html.html layouts/posts/posts.html layouts/posts/section.html layouts/posts/list.html layouts/section/posts.html.html layouts/section/section.html.html layouts/section/list.html.html layouts/section/posts.html layouts/section/section.html layouts/section/list.html layouts/_default/posts.html.html layouts/_default/section.html.html layouts/_default/list.html.html layouts/_default/posts.html layouts/_default/section.html layouts/_default/list.html]
Section list for "posts" section with layout set to "demoLayout" HTML html [layouts/posts/demolayout.html.html layouts/posts/posts.html.html layouts/posts/section.html.html layouts/posts/list.html.html layouts/posts/demolayout.html layouts/posts/posts.html layouts/posts/section.html layouts/posts/list.html layouts/section/demolayout.html.html layouts/section/posts.html.html layouts/section/section.html.html layouts/section/list.html.html layouts/section/demolayout.html layouts/section/posts.html layouts/section/section.html layouts/section/list.html layouts/_default/demolayout.html.html layouts/_default/posts.html.html layouts/_default/section.html.html layouts/_default/list.html.html layouts/_default/demolayout.html layouts/_default/posts.html layouts/_default/section.html layouts/_default/list.html]
Taxonomy list in categories HTML html [layouts/categories/category.terms.html.html layouts/categories/terms.html.html layouts/categories/taxonomy.html.html layouts/categories/list.html.html layouts/categories/category.terms.html layouts/categories/terms.html layouts/categories/taxonomy.html layouts/categories/list.html layouts/category/category.terms.html.html layouts/category/terms.html.html layouts/category/taxonomy.html.html layouts/category/list.html.html layouts/category/category.terms.html layouts/category/terms.html layouts/category/taxonomy.html layouts/category/list.html layouts/taxonomy/category.terms.html.html layouts/taxonomy/terms.html.html layouts/taxonomy/taxonomy.html.html layouts/taxonomy/list.html.html layouts/taxonomy/category.terms.html layouts/taxonomy/terms.html layouts/taxonomy/taxonomy.html layouts/taxonomy/list.html layouts/_default/category.terms.html.html layouts/_default/terms.html.html layouts/_default/taxonomy.html.html layouts/_default/list.html.html layouts/_default/category.terms.html layouts/_default/terms.html layouts/_default/taxonomy.html layouts/_default/list.html]
Taxonomy term in categories HTML html [layouts/categories/term.html.html layouts/categories/category.html.html layouts/categories/taxonomy.html.html layouts/categories/list.html.html layouts/categories/term.html layouts/categories/category.html layouts/categories/taxonomy.html layouts/categories/list.html layouts/term/term.html.html layouts/term/category.html.html layouts/term/taxonomy.html.html layouts/term/list.html.html layouts/term/term.html layouts/term/category.html layouts/term/taxonomy.html layouts/term/list.html layouts/taxonomy/term.html.html layouts/taxonomy/category.html.html layouts/taxonomy/taxonomy.html.html layouts/taxonomy/list.html.html layouts/taxonomy/term.html layouts/taxonomy/category.html layouts/taxonomy/taxonomy.html layouts/taxonomy/list.html layouts/category/term.html.html layouts/category/category.html.html layouts/category/taxonomy.html.html layouts/category/list.html.html layouts/category/term.html layouts/category/category.html layouts/category/taxonomy.html layouts/category/list.html layouts/_default/term.html.html layouts/_default/category.html.html layouts/_default/taxonomy.html.html layouts/_default/list.html.html layouts/_default/term.html layouts/_default/category.html layouts/_default/taxonomy.html layouts/_default/list.html]

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 (Output 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" . }}