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
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
file extension in a separate file for AMPHTML next to the Vanilla HTML5 file
.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.
Bissetii enabled the AMP by default. To disable it, you need to edit your
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
amp.html as AMP default file extension. To alters the file
extension, simply edit the
suffixes value inside
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
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
Include Module Globally
Bissetii allows you to include certain modules globally across every pages. To
do that, simply includes the modules into your
Example, to permanently include
amp-sidebar module, the
data/bissetii/amp.toml file has the following:
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:
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.
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.