Gatsby Awesome Starter

Gatsby Awesome Starter is a free, open-source Gatsby 4 starter that scaffolds a TypeScript and Chakra UI-based site with ESLint, Prettier, and GitHub Actions for Netlify deployment.

What is Gatsby Awesome Starter?

It is a GitHub repository starter template created by South-Paw. It takes a fresh Gatsby project and pre-configures it with TypeScript, the Chakra UI component library, ESLint, Prettier, and a set of common Gatsby plugins for images, manifests, sitemaps and SEO. Running the template produces a deployable Gatsby site with lint, build, serve and clean scripts.

Key Features

• TypeScript — The starter is fully configured with TypeScript, so new components and pages are typed from the outset.
• Chakra UI — Chakra UI is installed and wired via @chakra-ui/gatsby-plugin, giving a component library with theming and dark mode support.
• ESLint & Prettier — Code linting and formatting are pre-configured via npm run lint, keeping a consistent style.
• Common Gatsby plugins — Includes gatsby-plugin-image, gatsby-plugin-sharp, gatsby-transformer-sharp and gatsby-source-filesystem for image optimization and local file handling.
• Manifest & SEO plugins — gatsby-plugin-manifest, gatsby-plugin-sitemap and gatsby-plugin-remove-generator are included for PWA metadata, sitemaps and generator tag removal.
• Analytics-ready — Optional gatsby-plugin-google-analytics and gatsby-plugin-google-tagmanager are listed so you can install and uncomment them in the config when needed.
• Netlify GitHub Actions — The repo ships with GitHub action workflows for automated deployment to Netlify.
• 0BSD license — The starter is released under the permissive 0BSD license, so you can reuse it without restrictions.

Who should use Gatsby Awesome Starter?

• Gatsby developers — Build a new Gatsby 4 site with TypeScript and Chakra UI without manually wiring up plugins and tooling.
• React developers — Start a React-based project with a component library and code quality tools already configured.
• Freelancers and agencies — Use the starter as a foundation for client sites, then deploy to Netlify through the included GitHub Actions.
• Open-source contributors — The project is tagged hacktoberfest, welcoming contributions and issue reports.

What can you do with Gatsby Awesome Starter?

• Launch a marketing site — Scaffold a Gatsby site with images, sitemap and manifest, then customize pages with Chakra UI components.
• Set up a blog or portfolio — Use the image plugins and filesystem source to pull in local images; combine with Gatsby's data layer for posts.
• Prototype a web app — Use the pre-configured tooling and analytics plugins to quickly build a typed React application with tracking ready.
• Automate Netlify deploys — Push to GitHub and rely on the included workflows for continuous deployment.

How does Gatsby Awesome Starter work?

Create a project with the npx command, then install dependencies with npm i. The project provides npm run start for local development at localhost:8000, npm run build for a production build in /public, and npm run serve to preview the build. Lint and clean commands handle code quality and cache clearing.

Pricing

The starter is free and open-source under the 0BSD license. There are no paid tiers or hidden costs.

Alternatives

Gatsby's official gatsby-starter-default is a minimal React starter that does not include TypeScript, Chakra UI, or Netlify workflows.

FAQ

Is Gatsby Awesome Starter free?

Yes, it is released under the 0BSD license, so it is free to use, modify and distribute without restrictions.

What Gatsby version does it use?

The starter targets Gatsby 4, as stated in the repository description.

How do I create a new project with this starter?

Run npx gatsby new your-projects-name https://github.com/South-Paw/awesome-gatsby-starter, then cd into the directory and run npm i to install dependencies.

Does the starter include TypeScript and Chakra UI?

Yes, TypeScript and Chakra UI are pre-configured, with @chakra-ui/gatsby-plugin included in the plugin list.

How do I deploy to Netlify?

The repository includes GitHub action workflows for deployment to Netlify, so any push to the linked repository can trigger a deploy.