Gatsby Advanced Starter is a boilerplate project that provides a feature-rich foundation for building Gatsby v4 websites, including TypeScript, MDX blogging, PWA support, and SEO tools out of the box.
What is Gatsby Advanced Starter?
Gatsby Advanced Starter is an open-source starter skeleton created by Ruben Harutyunyan (GitHub: Vagr9K) for Gatsby, the static site generator. It takes a Gatsby project configuration and outputs a deployable website with built-in SEO, social sharing, RSS, PWA features, and a Markdown/MDX blog. The starter runs on Node.js, supports both TypeScript and JavaScript, and can be installed via the Gatsby CLI or by forking the GitHub repository.
Key Features
- TypeScript support — First-class TypeScript support for query data and components exposed by the theme, with JavaScript also fully supported.
- MDX blogging — Posts authored in MDX with code syntax highlighting, embedded videos, and embedded iframes.
- PWA features — Offline support, Web App Manifest, and loading progress for slow networks.
- SEO module — Includes Google gtag.js support, sitemap generation, Google Structured Data, OpenGraph tags, and Twitter Cards.
- Social sharing — Twitter tweet button, Facebook share and share count, Reddit share and share count, and LinkedIn share button.
- Related posts — Computes and displays related posts based on category and tag match ranking.
- gatsby-plugin-image — Optimized image generation with modern responsive formats.
- Testing and CI/CD — Jest for unit/integration tests, Cypress for E2E tests, GitHub Actions for CI/CD, ESLint, Prettier, Remark-Lint, write-good, gh-pages, and Netlify deploy configuration.
Who is it for?
- Bloggers and content creators who want a Gatsby blog with MDX posts, tags and categories, Disqus comments, and social sharing without building the infrastructure themselves.
- Developers starting a new Gatsby project who need TypeScript, testing, linting, and CI/CD already wired into the starter.
- Agencies and freelancers who want a customizable base for client sites, with the option to swap in alternative themes like gatsby-theme-amaranth or gatsby-theme-material.
What can you do with Gatsby Advanced Starter?
- Publish a rich blog — Write posts in MDX with code highlighting, video embeds, and infinite scrolling, while auto-generating category and tag pages.
- Add user engagement features — Integrate Disqus comments, social share buttons, and related-post suggestions to keep readers on the site.
- Ship a production-ready site — Use the built-in SEO, RSS feeds, sitemap, PWA offline support, and one-click deploy configuration for Netlify or GitHub Pages.
How does Gatsby Advanced Starter work?
Install it with the Gatsby CLI by running gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter in your terminal. Then run yarn develop to start a local development server. Configure the theme by editing gatsby-config.js, add your NetlifyCMS credentials in static/admin/config.yml, and deploy via the included GitHub Actions workflows or Netlify configuration.
FAQ
Is Gatsby Advanced Starter free?
Yes, it is open-source and free to use, compatible with Gatsby v4.
What themes can I use with the starter?
The starter includes gatsby-theme-advanced and gatsby-theme-amaranth out of the box. You can also install a different theme such as gatsby-theme-material from npm and configure it in gatsby-config.js.
Does it support Netlify CMS?
Yes, it includes NetlifyCMS configuration at static/admin/config.yml and a customization entry point at src/netlifycms/index.js. You need to edit the backend credentials before use.
Can I use JavaScript instead of TypeScript?
Yes, the starter supports both TypeScript and JavaScript. TypeScript is the default for new components, but JavaScript files work without extra configuration.
