Jekyll plugin for creating Accelerated Mobile Page versions of posts. Supports Jekyll version 3.
- Place the Ruby files (
amp_generate.rbandamp_filter.rb) in folder _plugins at the root of the project - 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 serve
AMP-Jekyll uses Nokogiri gem for HTML parsing and FastImage for image processing. You can install the gems with
gem install nokogiri
gem install fastimage
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.
IMPORTANT: The plugin uses FastImage to automatically add image dimension attributes to the amp-image elements. Unfortunately there are some problems with local image files. Jekyll generates the images only after the build process which means that there are no images to read. At the moment the best way to deal with this (without hosting the images elsewhere or manually adding the width and height tags) is to use --skip-initia-build parameter when serving the site and then building the pages only once the site is running locally. I'm trying to come up with better ways of dealing with this.
To make your AMP page discoverable (by search engines etc.) you need to link it to the regular version of the page. Add the following element to your post headers.
<link rel="amphtml" href="{{ page.id | append:'/index.html' | prepend: site.baseurl | prepend: site.url }}">
There are several possible solutions to adding the tag to post pages only. One option is to use a separate head template for posts. The easiest (though a bit gimmicky) solution is adding the following conditional expression around the tag.
{% if page.path contains '_posts' %}
<link rel="amphtml" href="{{ page.id | append:'/index.html' | prepend: site.baseurl | prepend: site.url }}">
{% endif %}
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent