Astro News is an open-source news website template built with Astro 5.7, pairing the Keystatic headless CMS, Tailwind CSS, and DaisyUI to create a modern, responsive news reading experience.
What is Astro News?
Astro News is a news website starter project that uses Astro's Content Layer to source articles and the Keystatic CMS for editing. It takes markdown and MDX files as content input and produces a static site with pagination, search, RSS, sitemap, and dark mode. The project is authored by Mrahmani71 as a first open-source project and is licensed under MIT. A live demo is hosted at astro-news-six.vercel.app.
Key Features
- Keystatic CMS — Manage content through a headless CMS interface at /keystatic, with content stored as local markdown/MDX files.
- Content Layer — Astro's content layer pre-processes articles, enabling type-safe content queries with TypeScript.
- Search functionality — Client-side site search so readers can filter articles without a backend.
- Pagination — Built-in pagination component for listing articles across multiple pages.
- RSS Feed — Generates an XML feed for syndication and subscriptions.
- Sitemap — Automatically generates a sitemap for search engine crawling.
- Dark mode — Toggle between light and dark themes using DaisyUI and Tailwind CSS utilities.
- Responsive design — Layout inspired by BBC News and Dribbble news concepts, adapting from mobile to desktop.
Who is it for?
- Indie news publishers — Launch a lightweight news site with a CMS and built-in SEO without a heavy backend.
- Astro developers — Learn or reuse a complete Astro project that combines Content Layer, Keystatic, and Tailwind.
- Content creators — Publish articles and automatically get RSS, sitemap, search, and pagination for free.
What can you do with Astro News?
- Start a personal blog — Use the Keystatic CMS to write and publish posts, then deploy to Vercel.
- Create a niche news site — Rebrand the template with your own design and content structure for a local or topic-specific publication.
- Prototype a news portal — Quickly stand up a functional news site with dark mode and analytics-friendly static pages.
How does Astro News work?
Clone the repository, install dependencies with Bun (bun install), and run bun dev to start the development server. To enable the CMS, rename .env.example to .env, set RUN_KEYSTATIC=true, then visit localhost:4321/keystatic. Build a production version with astro build and deploy the output to Vercel.
FAQ
Is Astro News free to use?
Yes, Astro News is open source under the MIT license, so you can use, modify, and redistribute it freely.
What CMS does Astro News use?
It uses Keystatic, a headless CMS that stores content as markdown and MDX files locally, so content lives in your repo and is version-controlled.
Does Astro News have dark mode?
Yes, dark mode is implemented as a toggle, using DaisyUI and Tailwind CSS for theme switching.
Can I deploy Astro News to Vercel?
Yes, the template is ready for Vercel deployment — the live demo runs on astro-news-six.vercel.app, and the project includes Vercel integration notes.
