Gatsby Blog AMP to PWA

Gatsby Blog AMP to PWA is a Gatsby blog starter that generates both standard and AMP versions of every article and implements the AMP-to-PWA upgrade strategy, forked from the official gatsby-starter-blog.

What is Gatsby Blog AMP to PWA?

Gatsby Blog AMP to PWA is a starter template for building a blog with Gatsby, the React-based static site generator, with built-in AMP output. It takes Markdown articles as input and produces a static site with non-AMP pages at the root (e.g., localhost:8000) and AMP versions under the /amp/ path (e.g., localhost:8000/amp/). The template is forked from the official gatsby-starter-blog and adds an AMP implementation plus the "AMP as an entry point into your PWA" pattern described in the AMP Project documentation.

Key Features

• Dual page output — Every article is available as a standard page and an AMP page, with AMP versions served under the /amp/ path while non-AMP pages appear at the root.
• AMP-to-PWA strategy — Implements the entry-point pattern from the AMP Project, allowing visitors from cached AMP pages to be upgraded into the full PWA experience.
• Forked from the official starter — Based on gatsby-starter-blog, so it inherits the standard blog layout and can be extended the same way.
• Fast scaffolding — Create a new project with a single command: npx gatsby new my-blog-starter https://github.com/tomoyukikashiro/gatsby-starter-blog-amp-to-pwa.
• Simple build and serve — Run yarn run build and yarn run serve to preview the entire site locally; no extra configuration is required for the AMP pages.
• Easy Netlify deployment — The README includes a "Deploy to Netlify" button that spins up a live site from the GitHub repository with a click.
• Active on GitHub — The repository has garnered 25 stars and is described by its author as "Gatsby starter for creating a blog which support AMP and PWA."

Who is it for?

• Gatsby developers — Those who want to understand or reuse a working AMP implementation inside a Gatsby blog without building it from scratch.
• Performance-focused publishers — Bloggers who want the speed of AMP for their content while maintaining a progressive web app as the ultimate destination.
• Starter-template collectors — Developers looking for a different starting point from the plain gatsby-starter-blog, with AMP already configured.

What can you do with Gatsby Blog AMP to PWA?

• Publish AMP articles: Add Markdown files and get both normal and AMP versions automatically, with the AMP pages served from /amp/.
• Study the AMP-to-PWA flow: Run the starter and inspect how AMP pages act as a gateway into the PWA shell.
• Deploy a blog in minutes: Use the Netlify deploy button to create a live static site without manually configuring a hosting provider.

How does it work?

The README documents a straightforward workflow: clone the starter via npx gatsby new, write your articles in Markdown, then run yarn run build and yarn run serve to generate and serve the static site. The build output splits URLs into non-AMP at the root and AMP under the /amp/ prefix, and the included Netlify button automates the same build in the cloud.

FAQ

What is the AMP-to-PWA strategy?

The AMP Project's documentation describes it as "AMP as entry point into your PWA," meaning AMP pages serve as the initial entry and can upgrade to the full PWA shell. This starter implements that pattern so the AMP version of a post can lead visitors into the progressive web app.

Where are the AMP pages served?

Per the README, after running yarn run build and yarn run serve, AMP articles are available at http://localhost:8000/amp/ while non-AMP articles appear at http://localhost:8000.

How do I create a new blog with this starter?

Use the command npx gatsby new my-blog-starter https://github.com/tomoyukikashiro/gatsby-starter-blog-amp-to-pwa, then cd into the directory, add article Markdown files, and run yarn run build && yarn run serve to preview locally.

Is this starter the same as the official gatsby-starter-blog?

No, it is forked from the official starter and adds AMP rendering plus the AMP-to-PWA integration pattern. The base structure comes from the original, but the output includes AMP versions of every article.