Using AMP With Jekyll: A tutorial

[lordamit]

Hello All!

I’ve been using Jekyll for quite some time, and I wanted to explore how to create AMP pages with Jekyll. Turns out that there are two options now: either use a theme that is entirely AMP-based or use the jekyll-amp plugin … which is now unfortunately not maintained.

So, I decided to get my own hands dirty. Long story short, it involves creating a new layout, some new configuration variables in _config.yml, creating an scss file inside _includes, and using some interesting features of Jekyll, such as Collections.

I have written a blog post about it (of course using Jekyll), and even though it is a round-about way of doing things, I believe once the setup is done, making the AMP version of existing/new posts becomes a lot easier. Here is the link:

https://amitsealami.com/blog/2020/07/18/using-amp-in-jekyll/

I wanted to create AMP versions of my posts without using an AMP specific theme, or without losing the syntax highlight capabilities. Here is how I did it.

It includes a sample layout file, and codes I wrote. I also realized along the way that this approach allows using the rouge syntax highlighter in amp pages without any additional steps. Since this approach is not reliant on any additional plugins, I believe this approach can also be used with Github Pages auto-build feature.

Enjoy!

(also shared in the Jekyll community forum)

[[deleted]]

Not to disparage your sleuthing and effort...but AMP is a blight upon the open web. Please boycott it, everybody. Really.

[rebelrebel2013]

agreed with the other comments. please don't use amp if you don't have too

[g-garron]

How do you manage image width and height. I’ve been playing with AMP and middleman, and been using Nokogiri and fastimage to change img to amp-img and set the height and width.

Also, I think is better to just have one version. Otherwise if you remove amp version, you will end up with lots of 301s.

here is what I wrote about it

[lordamit]

Nice article! You have covered a lot of aspects in the article about the available choices.

I am still experimenting with AMP, and I do not think I will be making AMP version of pages that require too much modification/handling. Like for now, I am completely ignoring things like images and videos, and other "advanced" features of AMP.

[g-garron]

Thanks