Starter Gatsby Postcss Opinionated

Starter Gatsby Postcss Opinionated is a bare-bones Gatsby starter that pairs the React-based Gatsby static-site generator with PostCSS, CSS Modules, and enforced code-style tooling. Published on GitHub by miketvo, it gives you a minimal but configured starting point for a Gatsby project.

What is Starter Gatsby Postcss Opinionated?

Starter Gatsby Postcss Opinionated is a minimal Gatsby starter repository that scaffolds a new static site with PostCSS as the CSS preprocessor, CSS Modules for component-scoped styling, and Normalize.css for cross-browser consistency. It runs entirely within the Gatsby ecosystem, which is built on React, and produces a standard Gatsby project with example configuration. It is published by miketvo on GitHub and is licensed under the permissive 0BSD license, so it can be used freely in commercial and personal projects.

Key Features

• PostCSS integration — Configured through gatsby-plugin-postcss and postcss.config.js with the postcss-preset-env preset for modern CSS features.
• CSS Modules — Styling is organized as scoped .module.css files, with examples like src/components/layout.module.css and a global stylesheet at src/styles/global.module.css.
• Normalize.css — The normalize.css package is included to even out browser default styles.
• Opinionated code style — Uses EditorConfig and Prettier (.editorconfig, .prettierrc, .prettierignore) and deliberately avoids TypeScript, using JavaScript with semicolons instead.
• Standard Gatsby plugin set — Comes with gatsby-plugin-image, gatsby-plugin-sharp, gatsby-transformer-sharp, gatsby-plugin-manifest, gatsby-plugin-offline, gatsby-plugin-react-helmet, gatsby-source-filesystem, and gatsby-plugin-gatsby-cloud.
• Predefined file structure — Includes standard Gatsby files (gatsby-config.js, gatsby-node.js, gatsby-browser.js, gatsby-ssr.js) plus separate src/styles/animations.css for shared CSS animations.
• CLI quick start — Create a new site by running gatsby new my-project https://github.com/miketvo/starter-gatsby-postcss-opinionated, then npm run develop to serve it at http://localhost:8000.

Who is it for?

Starter Gatsby Postcss Opinionated is for developers who want a working Gatsby setup with PostCSS and CSS Modules without spending time on configuration. It suits Gatsby newcomers who want a minimal skeleton with the standard plugins pre-wired, as well as developers who prefer enforced formatting via Prettier and EditorConfig. Teams that already standardize on JavaScript (not TypeScript) will find this starter aligns with that choice.

What can you do with Starter Gatsby Postcss Opinionated?

• Gatsby newcomers: scaffold a site with one CLI command and a documented file-by-file breakdown in the README, then edit src/pages/index.js to see live reloads in the browser.
• Style-conscious developers: write component-scoped CSS using CSS Modules and take advantage of future CSS syntax through PostCSS presets.
• Static site builders: build a blog, portfolio, or simple marketing site using the included Gatsby image pipeline, manifest, and offline support.
• Head management: use react-helmet and gatsby-plugin-react-helmet to manage document heads for metadata and SEO.

How does Starter Gatsby Postcss Opinionated work?

It works through the standard Gatsby workflow: first you create a new project using the Gatsby CLI pointing at this repository; then you run npm run develop to start a local development server; finally you edit source files like src/pages/index.js and Gatsby hot-reloads the browser in real time. The postcss.config.js file configures PostCSS processing, while gatsby-config.js lists the installed plugins that Gatsby loads at build time.

Pros and cons

• Pros: zero-config PostCSS and CSS Modules; includes Normalize.css and Prettier/EditorConfig; bundled with commonly used Gatsby plugins (images, manifest, offline, React Helmet); permissive 0BSD license.
• Cons: it is deliberately bare-bone, so there are no pre-built page templates or components beyond the default index page; it intentionally avoids TypeScript, which may not suit teams that want typed code.

Alternatives

The official gatsby-starter-default is the plain Gatsby default without the PostCSS opinions and comes with a different file structure; gatsby-starter-blog includes blog-specific templates and pagination if you need a ready-made blog.

FAQ

Does this starter use TypeScript?

No. The README states that it is "opinionated" and explicitly does not use TypeScript; it uses JavaScript with semicolons instead. It relies on EditorConfig and Prettier to enforce a consistent JavaScript style across the project.

How do I create a new site from this starter?

Use the Gatsby CLI with the command gatsby new my-project https://github.com/miketvo/starter-gatsby-postcss-opinionated. After the project is created, run npm run develop from inside the project directory to start the development server.

What CSS technologies does it include?

It includes PostCSS with the postcss-preset-env plugin through gatsby-plugin-postcss, CSS Modules for scoped styling, and Normalize.css for browser resets. Global styles live in src/styles/global.module.css and animations in src/styles/animations.css.

Which Gatsby plugins are bundled?

The starter bundles gatsby-plugin-image, gatsby-plugin-sharp, gatsby-transformer-sharp, gatsby-plugin-manifest, gatsby-plugin-offline, gatsby-plugin-react-helmet, gatsby-source-filesystem, gatsby-plugin-gatsby-cloud, and gatsby-plugin-postcss.

Is this starter free to use?

Yes. The repository is licensed under 0BSD, a permissive license that allows unrestricted use, modification, and distribution, including in commercial projects, without requiring attribution.