Real World Performance: lazy loading, optimizing media, faster analytics join us Wednesday

ContactSign Up
Community Plugin
View plugin on GitHub


Create AMP(Accelerated Mobile Pages) for your Gatsby site by using html2amp


$ npm install --save gatsby-plugin-html2amp

How to use

In gatsby-config.js

  resolve: 'gatsby-plugin-html2amp',
  options: {
    files: ['post/**/index.html', 'index.html'],
    publicPath: 'public',
    gaConfigPath: 'gaConfig.json',
    dist: 'public/dist',
    optimize: true,
    htmlPlugins: [],
    cssPlugins: []


  • files
    • List of generated html path patterns from publicPath
    • Default is [**/*.html]
  • publicPath
    • Directory for building by gatsby
    • Default is public
  • gaConfigPath
    • amp-analytics config json for google analytics
    • The path is from publicPath
    • Optional
  • dist
    • Path to output
    • If the options is not set files are override by AMP result
  • optimize
  • htmlPlugins
    • you can add custom converter for html
  • cssPlugins
    • you can add custom converter for css

More Detail

Please check my article out for detail. ⚡

© 2023 Gatsby, Inc.