AMP ⚡ using Gatsby

ampgatsby
tomoyukikashiro
tomoyukikashiro

I created gatsby plugin (called gatsby-plugin-html2amp) for generating AMP (Accelerated Mobile Pages). I try to explain how to use it.

It’s easy to use 😁

Prepare Gatsby blog

$ npm install --global gatsby-cli
$ gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog

then check the blog

$ cd gatsby-blog
$ npm start

# Access http://localhost:8000

Make it AMP !

Add plugin

$ npm install --save gatsby-plugin-html2amp

Set plugin configuration to gatsby-config.js at bottom of file.

{
  resolve: 'gatsby-plugin-html2amp',
  options: {
    files: ['**/*.html'],
    dist: 'public/amp'
  }
}

Modify blog post template

To make your post page valid as AMP add canonical in <head>

src/templates/blog-post.js

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt
      html
      fields { // ⚡ Add this fields.slug into Graphql
        slug
      }
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
      }
    }
  }
`

then add canonical

src/templates/blog-post.js

<Helmet
  htmlAttributes={{ lang: 'en' }}
  meta={[{ name: 'description', content: siteDescription }]}
  title={`${post.frontmatter.title} | ${siteTitle}`}>
  <link rel="canonical" href={`${post.fields.slug}`} /> // ⚡ Add canonical
</Helmet>

Generate

$ npm run build

Now you can see AMP source at public/amp ⚡

Leave a comment