DEV Community

Tomoyuki Kashiro
Tomoyuki Kashiro

Posted on • Originally published at blog.tomoyukikashiro.me on

AMP ⚡ using Gatsby

#react #gatsby #amp

This post was originally published at AMP ⚡ using Gatsby.

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
Enter fullscreen mode Exit fullscreen mode

then check the blog

$ cd gatsby-blog $ npm start # Access http://localhost:8000
Enter fullscreen mode Exit fullscreen mode

Make it AMP !

Add plugin 

$ npm install --save gatsby-plugin-html2amp
Enter fullscreen mode Exit fullscreen mode

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

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

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") } } } `
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Generate 

$ npm run build
Enter fullscreen mode Exit fullscreen mode

Now you can see AMP source at public/amp ⚡

Top comments (1)