Pears is an open-source Hugo static site starter kit that bundles Tailwind CSS, PostCSS, and code-quality tools so you can build and deploy static websites without configuring the toolchain yourself.
What is Pears?
Pears is a starter kit for building static sites, created by developer bradp and distributed under the MIT License. It takes a fresh Hugo project and pre-configures Tailwind CSS, PostCSS, autoprefixer, PurgeCSS, Prettier, stylelint, and ESLint, producing a local development server and production-ready static builds through npm scripts. The project is in an early state of development, with a live demo available at pears.cloud.
Key Features
- Pre-configured Hugo + Tailwind CSS — Uses Hugo as the static site generator and Tailwind CSS with the Tailwind Forms and Tailwind Typography plugins, so utility-first styling works out of the box.
- CSS optimization pipeline — PostCSS, autoprefixer, and PurgeCSS trim generated CSS to only the classes actually used in markup, keeping final stylesheets small.
- Built-in code quality tools — ESLint checks JavaScript, stylelint checks CSS, and Prettier handles formatting; lint and format commands can be run manually or with
:fixappended to auto-correct. - One-command workflows —
npm startbuilds files and starts the dev server,npm buildprepares a local/staging build, andnpm build:prodcreates a production-ready build. - Beginner-friendly setup — Installation is just
git cloneandnpm i; the stated goal is that people unfamiliar with Hugo shouldn't need to learn more than the basics. - Shortcodes and partials included — The kit ships pre-packed with Hugo shortcodes and partials for a variety of components, according to the project's goals.
- Live demo available — A hosted demo at pears.cloud lets you preview what the starter produces.
Who should use Pears?
- Developers new to Hugo — they can start a Hugo site with Tailwind already integrated and only learn basic Hugo concepts.
- Front-end developers who like Tailwind — they can write utility-first CSS in HTML without a separate styling step, while PurgeCSS keeps output small.
- Static site builders — individuals or teams who want a fast, efficient dev cycle and a production build pipeline without assembling PostCSS, ESLint, Prettier, and Hugo themselves.
What can you do with Pears?
- Launch a personal blog or marketing site — create Hugo content and use npm scripts to build a production-ready static site deployable anywhere static files are hosted.
- Prototype a design system — use Tailwind's utility classes and the included Forms and Typography plugins to style forms and prose quickly in HTML.
- Learn the Hugo + Tailwind toolchain — clone the repo, run
npm start, and inspect the preconfigured build and lint commands to see how Hugo and Tailwind glue together.
How does Pears work?
Pears is set up by cloning the repository and running npm i to install dependencies. After that, npm start builds all files and starts the local development server; npm run lists the full set of commands available. Building, linting, and formatting are all npm scripts, and the project recommends checking available commands frequently during early development.
FAQ
Is Pears free to use?
Yes. Pears is open source and distributed under the MIT License, so you can use, modify, and redistribute it freely for personal or commercial projects.
Do I need Hugo installed to use Pears?
Yes. Hugo must be installed separately; the README links to Hugo's installation guide and notes that pre-built binaries are available for almost every platform. Yarn and Hugo are required before installing Pears with npm i.
Is Pears production-ready?
The project is in an early state of development, and the README warns that things may break and change. It's best treated as a learning tool or a starting point rather than a battle-tested production template.
What development tools does Pears include?
Pears includes Hugo, Tailwind CSS with the Forms and Typography plugins, PostCSS, autoprefixer, PurgeCSS, Prettier, stylelint, and ESLint. These are preconfigured so you can start coding immediately after installation.
What commands does Pears provide?
Key commands are npm start for the dev server, npm build for local/staging builds, npm build:prod for production builds, and npm lint and npm format for code quality. Append :fix to lint commands to auto-fix errors.
