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.
