Custom output formats
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 (formerly known as a MIME 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/json | [json] |
application/manifest+json | [webmanifest] |
application/octet-stream | [webmanifest] |
application/pdf | [pdf] |
application/rss+xml | [xml rss] |
application/toml | [toml] |
application/wasm | [wasm] |
application/xml | [xml] |
application/yaml | [yaml yml] |
font/otf | [otf] |
font/ttf | [ttf] |
image/bmp | [bmp] |
image/gif | [gif] |
image/jpeg | [jpg jpeg jpe jif jfif] |
image/png | [png] |
image/svg+xml | [svg] |
image/tiff | [tif tiff] |
image/webp | [webp] |
text/calendar | [ics] |
text/css | [css] |
text/csv | [csv] |
text/html | [html] |
text/javascript | [js jsm mjs] |
text/jsx | [jsx] |
text/markdown | [md markdown] |
text/plain | [txt] |
text/tsx | [tsx] |
text/typescript | [ts] |
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
toasp
. Suffixes
are the values that will be used for URLs and file names for that media type in Hugo.- The
Type
is the identifier that must be used when defining new/customOutput 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:
text/html:
suffixes:
- htm
outputFormats:
html:
mediaType: text/html
[mediaTypes]
[mediaTypes.'text/html']
suffixes = ['htm']
[outputFormats]
[outputFormats.html]
mediaType = 'text/html'
{
"mediaTypes": {
"text/html": {
"suffixes": [
"htm"
]
}
},
"outputFormats": {
"html": {
"mediaType": "text/html"
}
}
}
Note that for the above to work, you also need to add an outputs
definition in your site configuration.
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 |
---|---|---|---|---|---|---|---|---|---|
amp | text/html | amp | index | amphtml | false | true | false | true | |
calendar | text/calendar | index | alternate | webcal:// | true | false | false | false | |
css | text/css | styles | stylesheet | true | false | false | false | ||
csv | text/csv | index | alternate | true | false | false | false | ||
html | text/html | index | canonical | false | true | false | true | ||
json | application/json | index | alternate | true | false | false | false | ||
markdown | text/markdown | index | alternate | true | false | false | false | ||
robots | text/plain | robots | alternate | true | false | false | false | ||
rss | application/rss+xml | index | alternate | false | false | true | false | ||
sitemap | application/xml | sitemap | sitemap | false | false | true | false | ||
webappmanifest | application/manifest+json | manifest | manifest | true | false | false | 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 valueamp
forpath
so it doesn’t overwrite thehtml
version; e.g. we can now have both/index.html
and/amp/index.html
. - The
mediaType
must match a 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 file name for the list file names (homepage, etc.). Default:
index
. rel
- can be used to create
rel
values inlink
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. Default:false
. noUgly
- used to turn off ugly URLs If
uglyURLs
is set totrue
in your site. Default:false
. notAlternative
- enable if it doesn’t make sense to include this format in an
AlternativeOutputFormats
format listing onPage
(e.g., withCSS
). 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 forHTML
andAMP
. Default:false
. weight
- Setting this to a non-zero value will be used as the first sort criteria.
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.
outputs:
home:
- html
- rss
page:
- html
rss:
- rss
section:
- html
- rss
taxonomy:
- html
- rss
term:
- html
- rss
[outputs]
home = ['html', 'rss']
page = ['html']
rss = ['rss']
section = ['html', 'rss']
taxonomy = ['html', 'rss']
term = ['html', 'rss']
{
"outputs": {
"home": [
"html",
"rss"
],
"page": [
"html"
],
"rss": [
"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 configuration 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']
.
- The
outputs
definition is per pageKind
. - The names (e.g.
html
,amp
) must match thename
of a defined output format, and can be overridden per page in front matter.
The following is an example of front matter in a content file that defines output formats for the rendered Page
:
---
outputs:
- html
- amp
- json
title: Example
---
+++
outputs = ['html', 'amp', 'json']
title = 'Example'
+++
{
"outputs": [
"html",
"amp",
"json"
],
"title": "Example"
}
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
Each output format requires a corresponding template conforming to the template lookup order. Hugo considers both output format and suffix when selecting a template.
For example, to generate a JSON file for the home page, the template with highest specificity is layouts/index.json.json
.
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 . The 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 name
):
{{ partial "mytextpartial.csv" . }}