Gatsby Casper

Gatsby Casper is a free, open-source static blog starter for GatsbyJS that ports Ghost's Casper v3 theme to TypeScript, giving you a complete blog with home, tag, author, and post pages as a starting point.

What is Gatsby Casper?

Gatsby Casper is a static blog generator and starter repository for GatsbyJS. It takes Markdown content and site configuration as input, and outputs a static blog with home, tag, author, and individual post pages, an RSS feed, and a Mailchimp subscribe integration. It was created by scttcper and is available on GitHub, where it has 470 stars. The theme is a direct port of Ghost's Casper v3 theme, entirely written in TypeScript.

Key Features

• TypeScript — the entire starter is written in TypeScript for type safety.
• Emotion component styles — all styling is handled with Emotion components.
• Core blog templates — includes home, tag, author, blog, 404, and multiple post author support.
• Mailchimp subscribe form — the blog page includes a subscribe form that integrates with Mailchimp; you can configure it via website-config.ts or disable it.
• Subscribe modal/overlay — an additional subscribe modal/overlay is included.
• RSS feed — generated automatically on production builds.
• Google Analytics integration — configured via gatsby-plugin-google-analytics with support for Do Not Track and sample rates.
• Configurable pagination — defaults to six posts per page, adjustable in gatsby-node.js.
• One-click Netlify deployment — includes a Netlify Deploy button for instant setup.

Who is it for?

• Bloggers who want the clean Casper design on a Gatsby static site.
• Developers who prefer Gatsby and React over Ghost's Node.js platform.
• Ghost users migrating to a static site generator while keeping a familiar theme.
• TypeScript enthusiasts who want a type-safe blogging starter.

What can you do with it?

• Launch a new blog — clone the repo, edit configuration files, and deploy to Netlify in minutes.
• Customize the theme — modify Emotion components and styles to match your brand.
• Build an email list — configure the Mailchimp subscribe form or disable it if you don't need it.
• Add analytics — insert your Google Analytics tracking ID to start collecting visitor data.

How does it work?

Clone the repository, remove the .git folder, and initialize a new one. Edit website-config.ts for site settings, then configure gatsby-config.js for metadata and analytics. Push the repo to your preferred hosting and deploy — the build generates static pages for all posts and tags.

FAQ

Is Gatsby Casper free?

Yes, it is an open-source starter repository on GitHub.

How do I configure Google Analytics?

Edit gatsby-config.js and add your tracking ID to the gatsby-plugin-google-analytics options.

How do I change the site title and description?

Edit the siteMetadata object in gatsby-config.js.

How do I adjust pagination?

In gatsby-node.js, change the postsPerPage constant; the default is six posts per page.

Does it support Mailchimp?

Yes, the subscribe form integrates with Mailchimp. Add your form action and hidden field input name in website-config.ts.