Project

amp-jekyll

0.15
No commit activity in last 3 years
No release in over 3 years
There's a lot of open issues
amp-jekylljuusaw/amp-jekyllHomepageDocumentationSource CodeBug TrackerWiki
A Jekyll plugin to generate Accelerated Mobile Pages.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Popularity
Downloads
47,443
Stars
281
Forks
57
Watchers
12
 Releases
Current version
1.0.3
Total releases
4
First release
2017-01-30
Latest release
2019-11-08
 Issues
Open Issues
11
Closed Issues
19
Total Issues
30
Issue Closure Rate
63%
 Pull Requests
Open Pull Requests
2
Closed Pull Requests
1
Merged Pull Requests
16
Pull Request Acceptance Rate
84%
 Development
Primary Language
Ruby
Licenses
MIT
Average date of last 50 commits
2017-04-04
Reverse Dependencies
0

 Dependencies

Runtime

fastimage
>= 1.8.0
jekyll
>= 3.0, < 5.0
nokogiri
>= 1.6.0
 Project Readme

amp-jekyll

Important: This project is no longer actively maintained as I am not using Jekyll (or AMP) that much nowadays. In case you are interested in maintaining the project, I'm happy to provide support.

Jekyll plugin for creating Accelerated Mobile Page versions of posts. Supports Jekyll version 3 and 4.

Gem Version

AMP project

Usage

Using the gem

  • Add gem amp-jekyll to your Gemfile and run bundle
  • Add the gem to your _config.yml like this:
plugins:
  - amp-jekyll

NOTE: Older Jekyll versions (below 3.6.0) use the key gems instead of plugins. When building a site with such version, use the old key.

Adding the plugin manually

  • Place the Ruby files in lib/jekyll (amp_generate.rb and amp_filter.rb) in folder _plugins at the root of the project

Then perform the following

  • Place the layout file (amp.html) to the _layouts folder
  • Add amphtml-link to post heads (see page linking below) (Add CSS styles to the html template)
  • Generate your site with jekyll build

Setting things up

The AMP standard is somewhat restrictive on allowed HTML elements and requires some extra information on element placing. To make sure that your generated AMP pages are valid by the standard, you can run the AMP version of your post with #development=1 appended to the URL and check the browser's Javascript console for the validation.

Several HTML elements must be replaced with tags specified in the AMP specs to ensure compatibility with the standard. The amp_filter.rb Jekyll filter replaces the tags after converting the markdown to HTML. At the moment only replacing <img> tags is supported.

To disable image responsivity, add false to amp_images responsive parameter in amp.html. This is enabled by default for header and footer.

The AMP folder

Specify amp folder in _config.yml as ampdir: YOURDIR

Page linking

The easiest solution is adding the following conditional expression around the tag.

{% if page.path contains '_posts' %}
  <link rel="amphtml" href="{{ page.id | prepend: '/YOURDIR' | prepend: site.baseurl | prepend: site.url | append: '.html' }}">
{% endif %}

CSS

CSS rules for AMP must be included inline in the <style amp-custom> tag in the <head> element in the HTML. You can write the CSS rules by hand or use jekyll includes. Do note that the AMP specification forbids the use of some CSS selectors and attributes. Because of this, it is not a good idea to include the main stylesheet by default.

Skipping Pages

Sometimes there are pages we don't want to be turned into AMP pages, normally this is because they require HTML elements or JavaScript that would make them invalid.

In any post we want to skip simply add;

skip_amp: true

And update your amphtml block to look like;

{% if page.path contains '_posts' %}
  {% unless page.skip_amp %}
    <link rel="amphtml" href="{{ page.id | prepend: '/YOURDIR' | prepend: site.baseurl | prepend: site.url }}">
  {% endunless %}
{% endif %}