Jekyll - Add AMP Pages to your blog

Learn how to add the power of the AMP pages to your site built with Jekyll by installing a gem

Miki Lombardi · 2018-06-25

jekyll

Historical writing, preserved with its original publication date. Tools, services and advice may have changed.

We already know the power of the AMP pages but... what if we'll use in our blog? That would be incredible!

Let's to this!

What we need?

And, of course... a blog with at least one post.

Install & Setup the plugin

Install the plugin via the Gemfile

gem install amp-jekyll

Then add to your _config.yml the plugin:

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.

Then we need to specify the AMP Folder in the _config.yml, where all the pages will be stored:

ampdir: YOURDIR

Setting up the amphtml meta

Put this meta inside your head to link the AMP page to your post page (tell to Google: "Hey, I've got AMP!"):

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

Setting up some style

Now it's your turn: style your AMP page! I can suggest you to use this awesome theme: https://github.com/ageitgey/amplify