Accelerated Mobile Pages (AMP) using Middleman

Here, we will talk about how to create AMP blog pages in Middleman . If you are not familiar with AMP, I recommend reading this blog post in which I talk about what AMP is and why it is useful.

So you want to create AMP blogs in a static site generator? Well, first you start by selecting a static site generator - here I have chosen Middleman. While I work with Middleman, this can be effectively used in any Ruby-based static site generator.

It is definitely not recommended to have only AMP blog pages, a normal blog page should also be there for all the desktop viewers.

THE LAYOUT

So let’s create the AMP blog layout first,

1
<!doctype html>
2
<html amp lang="en">
3
  <head>
4
    <meta charset="utf-8" />
5
    <script async src="https://cdn.ampproject.org/v0.js"></script>
6
    <meta
7
      name="viewport"
8
      content="width=device-width,minimum-scale=1,initial-scale=1"
9
    />
10

11
    <%= partial "partials/ampmeta" %>
12

13
    <style amp-custom>
14
      <%= partial "stylesheets/ampstyle.css" %>
15
    </style>
16

17
    <style amp-boilerplate>
18
      body {
19
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
20
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
21
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
22
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
23
      }
24
      @-webkit-keyframes -amp-start {
25
        from {
26
          visibility: hidden;
27
        }
28
        to {
29
          visibility: visible;
30
        }
31
      }
32
      @-moz-keyframes -amp-start {
33
        from {
34
          visibility: hidden;
35
        }
36
        to {
37
          visibility: visible;
38
        }
39
      }
40
      @-ms-keyframes -amp-start {
41
        from {
42
          visibility: hidden;
43
        }
44
        to {
45
          visibility: visible;
46
        }
47
      }
48
      @-o-keyframes -amp-start {
49
        from {
50
          visibility: hidden;
51
        }
52
        to {
53
          visibility: visible;
54
        }
55
      }
56
      @keyframes -amp-start {
57
        from {
58
          visibility: hidden;
59
        }
60
        to {
61
          visibility: visible;
62
        }
63
      }
64
    </style>
65
    <noscript
66
      ><style amp-boilerplate>
67
        body {
68
          -webkit-animation: none;
69
          -moz-animation: none;
70
          -ms-animation: none;
71
          animation: none;
72
        }
73
      </style></noscript
74
    >
75

76
    <script
77
      async
78
      custom-element="amp-social-share"
79
      src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"
80
    ></script>
81
    <script
82
      async
83
      custom-element="amp-sidebar"
84
      src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"
85
    ></script>
86
  </head>
87

88
  <body>
89
    <%= partial "partials/ampsidebar" %> <% content:yield %> <%= content %> <%=
90
    partial "partials/ampfoot_nav" %>
91
  </body>
92
</html>

So what is this? Here we give the basic layout for all the blog pages. Most of what is on this page is defined in the official AMP description.

In line 7, we give <%= partial "partials/ampmeta" %> which gives us all the meta tags that are for that specific page, all the meta tags that are supported in normal HTML will be supported here.

In line 8 to 10, we add the styles to the CSS, as the styles should be inlined in AMP - we just add the stylesheet as a partial so that it adds here as an inline style.

Then some styles and scripts which are required by AMP, the social share and sidebar script are provided by the AMP Project to give us the social sharing and sidebar functionality without the use of external Javascript. Oh yeah, you can’t use any other Javascript other that the ones that are provided. This is the point where most of the developers shy away from Javascript, but we’ll move forward.

THE CONFIG

Let’s dive right in,

1
require 'fastimage'
2
require 'nokogiri'
3

4
set :markdown_engine, :kramdown
5
set :markdown, fenced_code_blocks: true, disable_indented_code_blocks: true, strikethrough: true, smartypants: true, with_toc_data: true
6

7
activate :blog do |blog|
8
  blog.name: "svramp"
9
  blog.prefix: "amp/svr"
10
  blog.permalink: "{title}"
11
  blog.sources: "{year}-{month}-{day}-{title}.html"
12
  blog.summary_separator:/\(READMORE\)/
13
  blog.paginate:true
14
  blog.page_link: "/{num}"
15
  blog.per_page:15
16
  blog.layout: "ampsvr_layout"
17
  blog.new_article_template:File.expand_path('new_article.markdown.erb', File.dirname(__FILE__))
18
end
19

20
helpers do
21
  def convert(paragraph)
22
    paragraph.gsub! '<img', '<amp-img'
23
  end
24
end

The fastimage and nokogiri gems are used for finding the size of the images, which we will talk about soon.

Then in line 4 and 5 we define the markdown engine which converts .md files into HTML, and then in line 7 we see the actual blog gem which helps us make the blog pages using our layout - more info on this can be found here .

Then we have a simple img to amp-img converting helper because sometime we inline image tags in our blog post and this can help with that.

THE MAGIC

And then we have some extra work,

1
<%
2
doc:Nokogiri::HTML::DocumentFragment.parse(content)
3
doc.search('img').each do |img|
4
  src:img.attribute('src')
5
  if img['src'] =~ /http(.*)/
6
    img['width']:800
7
    img['height']:400
8
  else
9
    img['width']:FastImage.size('source/'+src)[0]
10
    img['height']:FastImage.size('source/'+src)[1]
11
  end
12
end
13
doc.search('amp-img').each do |img|
14
  if img['layout'] == 'responsive'
15
    src:img.attribute('src')
16
    img['width']:FastImage.size('source/'+src)[0]
17
    img['height']:FastImage.size('source/'+src)[1]
18
  end
19
end
20
content:doc.to_html
21
content.gsub!("<img", '<amp-img layout="responsive"')
22
content.gsub!("<iframe", '<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" allowFullScreen
23
frameborder="0" ')
24
content.gsub!("</img", "</amp-img")
25
content.gsub!("</iframe", "</amp-iframe")
26
%>

In here, we use nokogiri to select all the images and give them a definite height and width because AMP needs definite size values defined to them.

And then we substitute some image and i-frame tags with proper amp tags.

So there you have it, that was a brief intro on how to write AMP for Middleman, hope you found something useful in it and let me know @praveenjuge if you have something else to discuss.

Some related articles -