Manage AMP with Bissetii in Hugo

Bissetii supports AMP styling seamlessly from the get-go. However, due to the AMP diet restrictions and many of its self-inventing AMPHTML syntax, careful configurations are needed. This page guides you on how to manage AMP properly with Bissetii in Hugo interface.

Starting from version v1.12.0, Accelerated Mobile Pages (AMP) is supported and enabled by default. This means that Bissetii shall generate both Vanilla HTML5 and AMPHTML simultenously using Hugo’s multiple output format feature.

How Bissetii Process AMP

To keep the output files organized and sane, Bissetii opted to use .amp.html file extension in a separate file for AMPHTML next to the Vanilla HTML5 file with .html file extension. The end result will be something as such:

/my-path/
	index.html
	index.amp.html

Then as instructed by AMP specification, both pages are linked canonically.

Enable/Disable AMP

Bissetii enabled the AMP by default. To disable it, you need to edit your site directory’s outputs.toml configuration file. The pathing is as shown:

pattern : <engine>/config/_default/outputs.toml
local   :          config/_default/outputs.toml
repo-doc:   .sites/config/_default/outputs.toml

To enable, simply add "AMP" into the list:

home = [ "HTML", "AMP" ]
page = [ "HTML", "AMP" ]
section = [ "HTML", "AMP" ]
taxonomy = [ "HTML", "AMP" ]
term = [ "HTML", "AMP" ]

To disable, simply remove the "AMP" from the list:

home = [ "HTML" ]
page = [ "HTML" ]
section = [ "HTML" ]
taxonomy = [ "HTML" ]
term = [ "HTML" ]

Alters AMP File Extension

Bissetii setup amp.html as AMP default file extension. To alters the file extension, simply edit the suffixes value inside mediaTypes.toml config file. The location of the file is as follows:

pattern : <engine>/config/_default/mediaTypes.toml
local   :          config/_default/mediaTypes.toml
repo-doc:   .sites/config/_default/mediaTypes.toml

Look for the suffixes field:

1
2

["text/amphtml"]
suffixes = [ "amp.html" ]

Adding AMP Javascript Extension Module

Funny enough, for certain components, you will need to add the AMP Javascript extension module. Fortunately, for maintenance sake, Bissetii generates and includes these modules seamlessly as you use Bissetii’s components as per their documentations.

Hence, you DO NOT need to manually supply these modules when using Bissetii in your Hugo deployment.

The list of supported modules are listed inside data/bissetii/extensions.toml data file.

Include Module Globally

Bissetii allows you to include certain modules globally across every pages. To do that, simply includes the modules into your data/bissetii/amp.toml file.

Example, to permanently include amp-sidebar module, the data/bissetii/amp.toml file has the following:

1
2
3

modules = [                               #--> include AMP Javascript Module
	"sidebar"
]

Include Module Specifically

Bissetii facilitates you to include page-specific modules via the Hugo’s front matter list. The front matter also has a module table where you can include in. Example, to include amp-form, (by reading the Form Component documentation,) the page’s front matter should have the following code snippets:

1
2
3
4
5
6
7
8

+++
...
[modules]
extensions = [
	"form",
]
...
+++

Bissetii will then compile the list of page-specific modules with the global modules list, sort out the duplicates, and then include them into the page accordingly and seamlessly.

Wrapping Up

That is all for managing AMP with Bissetii in Hugo. If you have any question to ask us directly, please feel free to raise it at our GitLab Issues Section. We will be happy to assist you.