Gazette

Gazette is a free, MIT-licensed Astro theme that models a magazine by issue rather than by article: the home page is this week's cover plus a contents list, not a scannable blog front page. It runs on Astro 7 with Tailwind CSS v4, builds to static output, and ships with no client-side JavaScript by default.

What is Gazette?

Gazette is an Astro theme that treats the issue as its core content unit. You supply editorial content through type-safe Markdown or MDX collections — a cover line, contents order, folio, and editor's note — and it produces a static magazine site with cover, issue, piece, archive, masthead, and 404 screens. It is built by ondelva and released under the MIT license.

What makes Gazette stand out?

• Issue-based content model — cover line, contents order, folio and editor's note are first-class fields, and the issue (not the article) drives the home page.
• Leader contents rows — the signature element: a number hanging in the left margin with a dotted leader joining title to byline, repeated on the home page, issue page, archive and piece footers.
• Flat, rule-drawn design — ink, paper and one spot colour, with --radius set to 0 so structure comes from rules rather than rounded cards or shadows.
• Astro 7 + Tailwind CSS v4 — static output with zero client-side JS by default, plus type-safe content collections in Markdown and MDX.
• Built-in site plumbing — feed, sitemap, JSON-LD, robots.txt, and an analytics slot for Plausible or GA4.
• Dark mode and small-screen support — responsive from 360px.
• Lighthouse 95+ across all four categories, checked in CI.
• Style guide page — pnpm dev also serves /styleguide, where every colour token and type size is on one page.

Who is it for?

Independent editorial publishers: writers and small editors running a serial publication who want a site organized around dated issues instead of a rolling feed of posts.

Designers exploring print-inspired web layouts: people who want to see leader dots, folios and rule-based structure carried into a static site built on Astro.

Astro developers starting a new content project: developers who want a working starting point with typed collections, dark mode, SEO plumbing and deploy buttons already wired up.

What can you do with Gazette?

• Publish a weekly issue: write the cover line, order the contents, add each piece, and the cover and contents page assemble from your collection entries.
• Style it from tokens: override colours, rules and spacing in src/styles/theme.css and set site name, URL, navigation, social links and feature switches in src/config.ts.
• Deploy statically: one-click deploy to Cloudflare, Vercel, Netlify or GitHub Pages, then set SITE_URL to your address.

How does Gazette work?

Scaffold the project with pnpm create astro@latest my-magazine -- --template ondelva/astro-theme-gazette (Node.js 22.12+ and pnpm 9 or newer), then run pnpm install and pnpm dev. Everything site-specific lives in src/config.ts and the theme tokens in src/styles/theme.css; three content collections hold the editorial data.

Pricing

Gazette Free is MIT-licensed at no cost, with one colour preset, one font pairing and a removable footer credit. Gazette Pro is a paid tier adding Pagefind search, contributor pages, department indexes, a legal set, multi-language routing, four colour presets, three font pairings, per-piece share card generation, newsletter and comments integrations, and commercial licensing.

Alternatives

Other Astro themes and static site generators used for editorial publishing, such as Hugo and Eleventy, which are not Astro-based and therefore don't use Astro content collections.

FAQ

Is Gazette free?

Yes. The version in this repository is MIT-licensed and free to use. A paid Pro version exists that adds reading apparatus such as Pagefind search, contributor pages, department indexes, newsletter and comment integrations, and commercial licensing, but the base theme stands on its own.

Does Gazette ship client-side JavaScript?

By default no — it outputs a static site with zero client-side JS, with an analytics slot for Plausible or GA4 if you want measurement. Search is not included in the free version; Pagefind search only arrives with Gazette Pro.

What does the free version leave out compared with Pro?

The free version has one colour preset, one font pairing, one default share image, UI strings in src/i18n/ without language routing, and a one-line footer credit. Pro adds search, contributor and department pages, a legal set, multi-language routing, four presets, three font pairings, and per-piece share cards.

Where do I configure the site?

Site name, URL, navigation, social links, contents style and feature switches are set in src/config.ts; colours, rules and spacing are tokens overridden in src/styles/theme.css. The theme documents all of it in docs/customization.md, docs/content.md and docs/deploy.md.