Creating AMP Equivalents

support
1

I have a production website up and running, and I thought I would play around with Hugo’s AMP support. I added this to my config.toml:

[outputs]
  home = ["HTML", "AMP"]
  page = ["HTML", "AMP"]
  blog = ["HTML", "AMP"]
  course = ["HTML", "AMP"]
  tutorial = ["HTML", "AMP"]

Where the latter two are custom archetypes.

When I run the server, I go to /amp (i.e. what I educated guessed from the documentation is the AMP equivalent of the home page), and I see my home page. But this home page does not have any AMP markup. Meanwhile, I am unable to find any AMP pages for my other content, and I have tried putting /amp/ pretty much everywhere along the paths.

Clearly I am missing something in my configuration. The documentation is very clear on how to add new formats and customize existing formats, but I am lost on simply seeing what I have out of the box for AMP support.

Any guidance is appreciated.

2

So, Hugo supports multiple output formats, but the templates must be provided by you or the theme. That you see non-amp-markup on homepage means that it has html as a fallback layout. Try to put a layout in /layouts/index.amp.html.

Also, your outputs definition is partly wrong. It should be one definition per Page kind (see the doc).

3

Initially I assumed that there might be some function that takes generated conventional HTML and produces an AMPed-up HTML equivalent. After I observed what happened, I started to figure that I need an AMP layout. Thanks for confirming.

I’m a bit confused on your second point and by the doc regarding “one definition per Page kind.” It’s a matter of semantics. I assumed “page kind” in my example would be tutorial or blog or home. Given that, there is only one definition per page kind–i.e. one array albeit with multiple elements. The doc has this example: home = ["HTML", "AMP", "RSS"].

Obviously, my mental model is wrong. Please clarify when you get a chance. Thanks.

4

See the docs at output formats for pages:

The output definition is per Page Kind (i.e, page, home, section, taxonomy, or taxonomyTerm).

So your config would look more like:

[outputs]
  home = ["HTML", "AMP"]
  page = ["HTML", "AMP"]

You could add taxonomy there, if for instance that is what a “course” is. Also, I’d consider adding RSS to those; feeds are super friendly to web folks. :slight_smile:

5

Isn’t that declarative syntax exactly what I did?

I had already read the documentation, but as I said earlier, the disconnect is in my interpretation of what it says vs the intent.

Anyway, I have AMP equivalents of my pages deployed live now. Thanks for the help.

6

No, it isn’t. Compare yours and his version and you will find that they are note exactly the same.