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:
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!
ps:
err: I broke my website. Please hang tight while I work on fixing it. nothing to do with amp btw.
ps ps: and it is back
Thanks for sharing.
On your post can I suggest turn line number off for the layout? In the amp view I get this and the file starts as expanded.
Or link to a gist instead.
1 Like
Can I suggest a link to the repo where this is applied or even a very simple repo which only demonstrates use of AMP approach?
It’s nice to see working demo / solution
1 Like
Hi!
Thanks for checking it out! Hmm… that’s awkward. I used details and summary HTML tags for the collapsible code snippets, and when expanded it looks like this (or at least supposed to):
Is it possible that due to some other factors (night mode/reader mode?) it is being rendered like that? Putting in a Gist is certainly a great idea.
Your suggestion for a working repo is an excellent idea. I was thinking about how to better provide steps, and this hits the spot.
I will make a minimal example repo and share it here 
I used line numbering and highlight tag in jekyll recently and noticed that minima theme splits the numbers into a block like a column and the content on the right. And with some unsightly borders which I removed with CSS.
So I think it could just be that the line numbering CSS works fine normally but in AMP gets turned funny unless you can correct with CSS. I’d say the line numbers aren’t even needed for copying and entire file.
I am glad you like the suggestions.
Hi! Based on your suggestion, the following happened in https://amitsealami.com/blog/2020/07/18/using-amp-in-jekyll/
- line nos removed
- gist link added
- an additional step
This is what I added in the additional step:
A Sample Source code repository built using the Jekyll Now with AMP support is available here:
This post is created using this same tutorial. Still, if you want to see sample repository in working, check this:
Thanks for helping me make this better. 
1 Like
