Gatsby WordPress Novela Starter

Gatsby WordPress Novela Starter is a Gatsby starter that replaces a WordPress frontend with a static Gatsby blog styled with the Novela theme, pulling content from a headless WordPress CMS.

What is Gatsby WordPress Novela Starter?

This is an open-source Gatsby starter for building blogs where WordPress acts as a headless content management system. It takes a WordPress site's REST API as input and produces a fully static Gatsby site with the Novela theme design (originally created by Narrative) as output. The starter is maintained by Draftbox and used on Draftbox's own platform. It is licensed under MIT.

Key Features

• Novela theme — A port of the Novela theme from the narative/gatsby-theme-novela project, featuring a clean editorial design.
• SEO optimized — Includes meta title and description configuration plus share image width and height settings for social sharing.
• AMP support — Automatically generates AMP versions of pages for faster mobile loading.
• RSS and sitemap — Builds rss.xml and sitemap.xml at static build time.
• Gatsby images — Responsive, optimized images with lazy loading via the Gatsby image pipeline.
• Social sharing — Configurable links for Twitter, Facebook, Instagram, LinkedIn, and GitHub in the site configuration.
• Analytics integrations — Built-in Google Analytics and Segment integration points.
• Disqus comments — Drop-in support for Disqus commenting on posts.
• Contact and subscribe forms — Pre-built widget components with custom titles and success messages.

Who is it for?

• Developers who want to decouple WordPress from the frontend and ship a faster static site while keeping the WordPress admin for content editing.
• Bloggers and publishers who need AMP, SEO, and RSS out of the box without configuring them from scratch.
• Gatsby developers looking for a complete starter with metadata, sitemap, analytics, and forms already wired up.
• Teams migrating to the JAMstack who want a drop-in replacement for a WordPress theme with minimal custom code.

What can you do with it?

• Launch a blog in minutes — Run gatsby new with this starter URL and you get a working blog pointed at any WordPress site.
• Brand the site with one config file — Edit siteConfig.js to change the site URL, title, description, corner navigation, footer links, subscribe and contact widget text, and social profile URLs.
• Point it at a WordPress backend — Edit .wordpress-config.json to set the WordPress base URL, protocol, whether it's hosted on wordpress.com, whether to use Advanced Custom Fields, and which REST routes to pull from.
• Deploy to any static host — Run gatsby build and copy the resulting public/ directory to any web server or CDN.

How does it work?

1. Install the starter with gatsby new wp-starter https://github.com/draftbox-co/gatsby-wordpress-novela-starter.
2. Configure WordPress source credentials in .wordpress-config.json, including baseUrl, protocol, hostingWPCOM, useACF, and includedRoutes.
3. Edit siteConfig.js with your site metadata, navigation, social links, and widget copy.
4. Run gatsby develop for local preview or gatsby build to generate the static site in public/.

FAQ

Is Gatsby WordPress Novela Starter free to use?

Yes. The project is released under the MIT license, so it is free to use, modify, and distribute. No paid tiers or restrictions are mentioned.

What configuration is required before first build?

At minimum you need to update siteUrl, siteTitleMeta, and siteDescriptionMeta in siteConfig.js, and set baseUrl and hostingWPCOM in .wordpress-config.json. The README stresses these as the most important fields.

Does it work with wordpress.com hosted blogs?

Yes, but you need to add extra keys to .wordpress-config.json for wordpress.com sites. The README links to the gatsby-source-wordpress documentation for those additional settings.

What pages and components are included in the starter?

The starter includes a styled 404 page, a contact form widget, a subscribe form widget, navigation in the header, footer links, and social links. It also generates RSS, sitemap, and AMP versions of content.