Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

AMP ⚡ using Gatsby #810

Open
tomoyukikashiro opened this issue Aug 1, 2022 · 0 comments
Open

AMP ⚡ using Gatsby #810

tomoyukikashiro opened this issue Aug 1, 2022 · 0 comments
Labels
published

Comments

@tomoyukikashiro
Copy link
Owner

title: AMP ⚡ using Gatsby
slug: amp-using-gatsby
lang: en-US
tags:

  • amp
  • gatsby
    date: 2018-11-18T07:48:04.838Z
    summary: >-
    I created gatsby plugin for generating AMP (Accelerated Mobile Pages). I try
    to explain how to use it.

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 ⚡
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
published
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@tomoyukikashiro