Converting AMP HTML Pages to Layouts and Pages

Last edit: Jul 09, 2019
  • Contributors:
  • diana-lakatos

This guide will help you convert a static theme file into Liquid layouts and pages to be used as platformOS components.

Your layout will include what's before and after the content of your HTML page. You will put the content of the HTML page into a separate page.

Requirements

To follow this tutorial, you should have a static HTML theme downloaded and added to the codebase of your Instance. This tutorial uses the Blog template from AMP Start.

Steps

Converting HTML pages to layouts and pages is a three-step process:

Step 1: Create page for content

From the HTML page, copy the content into a separate Liquid page, e.g. views/pages/blog.liquid:

  • Tip: The main tag is usually a good indicator of where the content is starting and ending.
  • Add a slug to your page.
  • The page will use layout named application by default, so you don't have to specify it because it will be named application.
  • Add a title to your page to make it dynamic.
---
slug: blog
---

{% content_for 'meta_title' %}Blog{% endcontent_for %}

<main id="content">
  <article class="recipe-article">
    <header>[...]</header>
    <section>[...]</section>
  </article>
</main>

Step 2: Edit layout

Edit your layout views/layouts/application.liquid:

  • Cut the first part of the HTML page and add it to the top of your layout.
  • Replace or add the title.
  • content_for_layout will be populated by the blog.liquid page content.
  • Cut the footer part of the HTML page and add it to the bottom of your layout.
  • Add amp to the html tag.

Note

Read more about AMP HTML Specification


<!doctype html>
<html amp>
  <head>
    <meta charset="utf-8">
    <title>The Recipe Blog</title>
    <link rel="canonical" href="https://{{ context.location.host }}/{{ context.page.slug }}">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <title>
      {% yield 'meta_title' %}
    </title>
  </head>
  <body>
    {{ content_for_layout }}
  </body>
</html>

Now, if you sync and check the page, you can see that it's working and it's still a valid AMP page. However, images aren't displayed, because their relative path has changed.

Step 3: Adjust image paths

Change the path of images using the asset_url filter. Modify each image path from

<amp-img src="../img/blog/spritzer.jpg" width="1280" height="853" layout="responsive" alt="The final spritzer" class="mb4 mx3"></amp-img>

to


<amp-img src="{{ 'img/blog/spritzer.jpg' | asset_url }}" width="1280" height="853" layout="responsive" alt="The final spritzer" class="mb4 mx3"></amp-img>

Sync, and see images displayed.

Next steps

Congratulations! You have converted an HTML template into platformOS pages and layouts. This means that you can now use all the capabilities of the platform, for example, you can feed data to the pages with GraphQL:

Questions?

We are always happy to help with any questions you may have.