Configure media types

Configure media types.

A media type (formerly known as a MIME type) is a two-part identifier for file formats and transmitted content. For example, the media type for JSON data is application/json.

Configured media types serve multiple purposes in Hugo, including the definition of output formats. This is the default media type configuration in tabular form:

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/asciidoc	[adoc asciidoc ad]
text/calendar	[ics]
text/css	[css]
text/csv	[csv]
text/html	[html htm]
text/javascript	[js jsm mjs]
text/jsx	[jsx]
text/markdown	[md mdown markdown]
text/org	[org]
text/pandoc	[pandoc pdc]
text/plain	[txt]
text/rst	[rst]
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]

The suffixes column in the table above shows the suffixes associated with each media type. For example, Hugo associates .html and .htm files with the text/html media type.

The first suffix is the primary suffix. Use the primary suffix when naming template files. For example, when creating a template for an RSS feed, use the xml suffix.

Default configuration

The following is the default configuration that matches the table above:

mediaTypes:
  application/json:
    delimiter: .
    suffixes:
    - json
  application/manifest+json:
    delimiter: .
    suffixes:
    - webmanifest
  application/octet-stream:
    delimiter: .
  application/pdf:
    delimiter: .
    suffixes:
    - pdf
  application/rss+xml:
    delimiter: .
    suffixes:
    - xml
    - rss
  application/toml:
    delimiter: .
    suffixes:
    - toml
  application/wasm:
    delimiter: .
    suffixes:
    - wasm
  application/xml:
    delimiter: .
    suffixes:
    - xml
  application/yaml:
    delimiter: .
    suffixes:
    - yaml
    - yml
  font/otf:
    delimiter: .
    suffixes:
    - otf
  font/ttf:
    delimiter: .
    suffixes:
    - ttf
  image/bmp:
    delimiter: .
    suffixes:
    - bmp
  image/gif:
    delimiter: .
    suffixes:
    - gif
  image/jpeg:
    delimiter: .
    suffixes:
    - jpg
    - jpeg
    - jpe
    - jif
    - jfif
  image/png:
    delimiter: .
    suffixes:
    - png
  image/svg+xml:
    delimiter: .
    suffixes:
    - svg
  image/tiff:
    delimiter: .
    suffixes:
    - tif
    - tiff
  image/webp:
    delimiter: .
    suffixes:
    - webp
  text/asciidoc:
    delimiter: .
    suffixes:
    - adoc
    - asciidoc
    - ad
  text/calendar:
    delimiter: .
    suffixes:
    - ics
  text/css:
    delimiter: .
    suffixes:
    - css
  text/csv:
    delimiter: .
    suffixes:
    - csv
  text/html:
    delimiter: .
    suffixes:
    - html
    - htm
  text/javascript:
    delimiter: .
    suffixes:
    - js
    - jsm
    - mjs
  text/jsx:
    delimiter: .
    suffixes:
    - jsx
  text/markdown:
    delimiter: .
    suffixes:
    - md
    - mdown
    - markdown
  text/org:
    delimiter: .
    suffixes:
    - org
  text/pandoc:
    delimiter: .
    suffixes:
    - pandoc
    - pdc
  text/plain:
    delimiter: .
    suffixes:
    - txt
  text/rst:
    delimiter: .
    suffixes:
    - rst
  text/tsx:
    delimiter: .
    suffixes:
    - tsx
  text/typescript:
    delimiter: .
    suffixes:
    - ts
  text/x-sass:
    delimiter: .
    suffixes:
    - sass
  text/x-scss:
    delimiter: .
    suffixes:
    - scss
  video/3gpp:
    delimiter: .
    suffixes:
    - 3gpp
    - 3gp
  video/mp4:
    delimiter: .
    suffixes:
    - mp4
  video/mpeg:
    delimiter: .
    suffixes:
    - mpg
    - mpeg
  video/ogg:
    delimiter: .
    suffixes:
    - ogv
  video/webm:
    delimiter: .
    suffixes:
    - webm
  video/x-msvideo:
    delimiter: .
    suffixes:
    - avi

[mediaTypes]
  [mediaTypes.'application/json']
    delimiter = '.'
    suffixes = ['json']
  [mediaTypes.'application/manifest+json']
    delimiter = '.'
    suffixes = ['webmanifest']
  [mediaTypes.'application/octet-stream']
    delimiter = '.'
  [mediaTypes.'application/pdf']
    delimiter = '.'
    suffixes = ['pdf']
  [mediaTypes.'application/rss+xml']
    delimiter = '.'
    suffixes = ['xml', 'rss']
  [mediaTypes.'application/toml']
    delimiter = '.'
    suffixes = ['toml']
  [mediaTypes.'application/wasm']
    delimiter = '.'
    suffixes = ['wasm']
  [mediaTypes.'application/xml']
    delimiter = '.'
    suffixes = ['xml']
  [mediaTypes.'application/yaml']
    delimiter = '.'
    suffixes = ['yaml', 'yml']
  [mediaTypes.'font/otf']
    delimiter = '.'
    suffixes = ['otf']
  [mediaTypes.'font/ttf']
    delimiter = '.'
    suffixes = ['ttf']
  [mediaTypes.'image/bmp']
    delimiter = '.'
    suffixes = ['bmp']
  [mediaTypes.'image/gif']
    delimiter = '.'
    suffixes = ['gif']
  [mediaTypes.'image/jpeg']
    delimiter = '.'
    suffixes = ['jpg', 'jpeg', 'jpe', 'jif', 'jfif']
  [mediaTypes.'image/png']
    delimiter = '.'
    suffixes = ['png']
  [mediaTypes.'image/svg+xml']
    delimiter = '.'
    suffixes = ['svg']
  [mediaTypes.'image/tiff']
    delimiter = '.'
    suffixes = ['tif', 'tiff']
  [mediaTypes.'image/webp']
    delimiter = '.'
    suffixes = ['webp']
  [mediaTypes.'text/asciidoc']
    delimiter = '.'
    suffixes = ['adoc', 'asciidoc', 'ad']
  [mediaTypes.'text/calendar']
    delimiter = '.'
    suffixes = ['ics']
  [mediaTypes.'text/css']
    delimiter = '.'
    suffixes = ['css']
  [mediaTypes.'text/csv']
    delimiter = '.'
    suffixes = ['csv']
  [mediaTypes.'text/html']
    delimiter = '.'
    suffixes = ['html', 'htm']
  [mediaTypes.'text/javascript']
    delimiter = '.'
    suffixes = ['js', 'jsm', 'mjs']
  [mediaTypes.'text/jsx']
    delimiter = '.'
    suffixes = ['jsx']
  [mediaTypes.'text/markdown']
    delimiter = '.'
    suffixes = ['md', 'mdown', 'markdown']
  [mediaTypes.'text/org']
    delimiter = '.'
    suffixes = ['org']
  [mediaTypes.'text/pandoc']
    delimiter = '.'
    suffixes = ['pandoc', 'pdc']
  [mediaTypes.'text/plain']
    delimiter = '.'
    suffixes = ['txt']
  [mediaTypes.'text/rst']
    delimiter = '.'
    suffixes = ['rst']
  [mediaTypes.'text/tsx']
    delimiter = '.'
    suffixes = ['tsx']
  [mediaTypes.'text/typescript']
    delimiter = '.'
    suffixes = ['ts']
  [mediaTypes.'text/x-sass']
    delimiter = '.'
    suffixes = ['sass']
  [mediaTypes.'text/x-scss']
    delimiter = '.'
    suffixes = ['scss']
  [mediaTypes.'video/3gpp']
    delimiter = '.'
    suffixes = ['3gpp', '3gp']
  [mediaTypes.'video/mp4']
    delimiter = '.'
    suffixes = ['mp4']
  [mediaTypes.'video/mpeg']
    delimiter = '.'
    suffixes = ['mpg', 'mpeg']
  [mediaTypes.'video/ogg']
    delimiter = '.'
    suffixes = ['ogv']
  [mediaTypes.'video/webm']
    delimiter = '.'
    suffixes = ['webm']
  [mediaTypes.'video/x-msvideo']
    delimiter = '.'
    suffixes = ['avi']

{
   "mediaTypes": {
      "application/json": {
         "delimiter": ".",
         "suffixes": [
            "json"
         ]
      },
      "application/manifest+json": {
         "delimiter": ".",
         "suffixes": [
            "webmanifest"
         ]
      },
      "application/octet-stream": {
         "delimiter": "."
      },
      "application/pdf": {
         "delimiter": ".",
         "suffixes": [
            "pdf"
         ]
      },
      "application/rss+xml": {
         "delimiter": ".",
         "suffixes": [
            "xml",
            "rss"
         ]
      },
      "application/toml": {
         "delimiter": ".",
         "suffixes": [
            "toml"
         ]
      },
      "application/wasm": {
         "delimiter": ".",
         "suffixes": [
            "wasm"
         ]
      },
      "application/xml": {
         "delimiter": ".",
         "suffixes": [
            "xml"
         ]
      },
      "application/yaml": {
         "delimiter": ".",
         "suffixes": [
            "yaml",
            "yml"
         ]
      },
      "font/otf": {
         "delimiter": ".",
         "suffixes": [
            "otf"
         ]
      },
      "font/ttf": {
         "delimiter": ".",
         "suffixes": [
            "ttf"
         ]
      },
      "image/bmp": {
         "delimiter": ".",
         "suffixes": [
            "bmp"
         ]
      },
      "image/gif": {
         "delimiter": ".",
         "suffixes": [
            "gif"
         ]
      },
      "image/jpeg": {
         "delimiter": ".",
         "suffixes": [
            "jpg",
            "jpeg",
            "jpe",
            "jif",
            "jfif"
         ]
      },
      "image/png": {
         "delimiter": ".",
         "suffixes": [
            "png"
         ]
      },
      "image/svg+xml": {
         "delimiter": ".",
         "suffixes": [
            "svg"
         ]
      },
      "image/tiff": {
         "delimiter": ".",
         "suffixes": [
            "tif",
            "tiff"
         ]
      },
      "image/webp": {
         "delimiter": ".",
         "suffixes": [
            "webp"
         ]
      },
      "text/asciidoc": {
         "delimiter": ".",
         "suffixes": [
            "adoc",
            "asciidoc",
            "ad"
         ]
      },
      "text/calendar": {
         "delimiter": ".",
         "suffixes": [
            "ics"
         ]
      },
      "text/css": {
         "delimiter": ".",
         "suffixes": [
            "css"
         ]
      },
      "text/csv": {
         "delimiter": ".",
         "suffixes": [
            "csv"
         ]
      },
      "text/html": {
         "delimiter": ".",
         "suffixes": [
            "html",
            "htm"
         ]
      },
      "text/javascript": {
         "delimiter": ".",
         "suffixes": [
            "js",
            "jsm",
            "mjs"
         ]
      },
      "text/jsx": {
         "delimiter": ".",
         "suffixes": [
            "jsx"
         ]
      },
      "text/markdown": {
         "delimiter": ".",
         "suffixes": [
            "md",
            "mdown",
            "markdown"
         ]
      },
      "text/org": {
         "delimiter": ".",
         "suffixes": [
            "org"
         ]
      },
      "text/pandoc": {
         "delimiter": ".",
         "suffixes": [
            "pandoc",
            "pdc"
         ]
      },
      "text/plain": {
         "delimiter": ".",
         "suffixes": [
            "txt"
         ]
      },
      "text/rst": {
         "delimiter": ".",
         "suffixes": [
            "rst"
         ]
      },
      "text/tsx": {
         "delimiter": ".",
         "suffixes": [
            "tsx"
         ]
      },
      "text/typescript": {
         "delimiter": ".",
         "suffixes": [
            "ts"
         ]
      },
      "text/x-sass": {
         "delimiter": ".",
         "suffixes": [
            "sass"
         ]
      },
      "text/x-scss": {
         "delimiter": ".",
         "suffixes": [
            "scss"
         ]
      },
      "video/3gpp": {
         "delimiter": ".",
         "suffixes": [
            "3gpp",
            "3gp"
         ]
      },
      "video/mp4": {
         "delimiter": ".",
         "suffixes": [
            "mp4"
         ]
      },
      "video/mpeg": {
         "delimiter": ".",
         "suffixes": [
            "mpg",
            "mpeg"
         ]
      },
      "video/ogg": {
         "delimiter": ".",
         "suffixes": [
            "ogv"
         ]
      },
      "video/webm": {
         "delimiter": ".",
         "suffixes": [
            "webm"
         ]
      },
      "video/x-msvideo": {
         "delimiter": ".",
         "suffixes": [
            "avi"
         ]
      }
   }
}

delimiter: (string) The delimiter between the file name and the suffix. The delimiter, in conjunction with the suffix, forms the file extension. Default is ".".
suffixes: ([]string) The suffixes associated with this media type. The first suffix is the primary suffix.

Modify a media type

You can modify any of the default media types. For example, to switch the primary suffix for text/html from html to htm:

mediaTypes:
  text/html:
    suffixes:
    - htm
    - html

[mediaTypes]
  [mediaTypes.'text/html']
    suffixes = ['htm', 'html']

{
   "mediaTypes": {
      "text/html": {
         "suffixes": [
            "htm",
            "html"
         ]
      }
   }
}

If you alter a default media type, you must also explicitly redefine all output formats that utilize that media type. For example, to ensure the changes above affect the html output format, redefine the html output format:

outputFormats:
  html:
    mediaType: text/html

[outputFormats]
  [outputFormats.html]
    mediaType = 'text/html'

{
   "outputFormats": {
      "html": {
         "mediaType": "text/html"
      }
   }
}

Create a media type

You can create new media types as needed. For example, to create a media type for an Atom feed:

mediaTypes:
  application/atom+xml:
    suffixes:
    - atom

[mediaTypes]
  [mediaTypes.'application/atom+xml']
    suffixes = ['atom']

{
   "mediaTypes": {
      "application/atom+xml": {
         "suffixes": [
            "atom"
         ]
      }
   }
}

Media types without suffixes

Occasionally, you may need to create a media type without a suffix or delimiter. For example, Netlify recognizes configuration files named _redirects and _headers, which Hugo can generate using custom output formats.

To support these custom output formats, register a custom media type with no suffix or delimiter:

mediaTypes:
  text/netlify:
    delimiter: ""

[mediaTypes]
  [mediaTypes.'text/netlify']
    delimiter = ''

{
   "mediaTypes": {
      "text/netlify": {
         "delimiter": ""
      }
   }
}

The custom output format definitions would look something like this:

outputFormats:
  headers:
    baseName: _headers
    isPlainText: true
    mediatype: text/netlify
    notAlternative: true
  redir:
    baseName: _redirects
    isPlainText: true
    mediatype: text/netlify

[outputFormats]
  [outputFormats.headers]
    baseName = '_headers'
    isPlainText = true
    mediatype = 'text/netlify'
    notAlternative = true
  [outputFormats.redir]
    baseName = '_redirects'
    isPlainText = true
    mediatype = 'text/netlify'

{
   "outputFormats": {
      "headers": {
         "baseName": "_headers",
         "isPlainText": true,
         "mediatype": "text/netlify",
         "notAlternative": true
      },
      "redir": {
         "baseName": "_redirects",
         "isPlainText": true,
         "mediatype": "text/netlify"
      }
   }
}

Last updated: March 5, 2025 : content: Consolidate configuration documentation (b6cae5cbc)

Improve this page