Blog Website Template
Demo brand: VERSAL · Writing / reading journal · 25 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this blog website template
A complete website for an independent writer, newsletter or small magazine: a front page with a lead essay, an archive with series and topic filters, series pages read in order, a reading shelf, membership tiers, an about page, an FAQ, a contact page and an RSS feed. Twenty-five built pages, all driven by content files.
It looks like a real publication. Warm paper, a masthead under a double rule, quiet editorial photography, ink-black bands for the membership pitch and the footer, and one editorial-vermilion accent. Literata for headlines and long-form reading, Albert Sans for the interface.
The article page is the showpiece: a comfortable measure, a drop cap, pull quotes in the margin, footnotes, reading time, series navigation and a members-only cut-off. Free, Member and Founding tiers answer the "why pay" question with plain columns of what you get. Motion is one soft reveal.
The 25 pages you get
- Front page
/ - Masthead, lead essay, latest posts, subscribe box, series, the writer, how a letter is made, membership, reader letters and most read.
- Archive
/archive/ - Every post grouped by year, with series and topic filters that degrade to the full list without JavaScript.
- Posts
/posts/…/ - Ten essays and notes, two of them members-only. Drop cap, pull quotes, footnotes, series navigation and a members cut-off.
- Series
/series/ - Three series with their essays in reading order.
- Series pages
/series/…/ - Each series with its introduction and its posts in order.
- Membership
/membership/ - Free, Member and Founding tiers with a monthly/yearly switch and a Free vs Member comparison.
- Shelf
/shelf/ - A reading list with notes.
- About
/about/ - The writer and the publication, without a face photo.
- Colophon
/colophon/ - Type, tools and how the site is made.
- FAQ
/faq/ - Membership questions as a plain definition list.
- Contact
/contact/ - Form that pre-selects the topic from the page you came from.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back to the archive.
What is in the build
- Posts as MDX with series, topics, reading time, footnotes, pull quotes and a members-only flag
- An archive with series and topic filters, and in-order navigation within each series
- Membership tiers with a CSS-only monthly/yearly switch, ready for Stripe, Ghost or Substack links
- A long-form article layout tuned for reading: measure, drop cap, margin pull quotes
- An RSS feed and sitemap, and editorial photography optimised to AVIF and WebP by Astro
- All publication details in one file, and one accent colour that rebrands the whole site
- Vitest and Playwright suites included, with tests for the filters and the membership switch
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- An independent writer's publication: warm paper, a masthead under a double rule, quiet editorial photography, ink-black membership bands, and one editorial-vermilion accent.
- The mechanic
- A publication built for reading and paying: a front page with lead essay and latest list, series with in-order navigation, an archive filter by series and topic, article pages with drop caps, footnotes and a members cut-off, and Free / Member / Founding tiers. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Quiet editorial photography, no faces
- Type & palette
- Literata · Albert Sans
-
#fbf8f3#1a1714#b3261e
Who it is for
Built for writers, newsletter authors, essayists and small independent magazines, and a good fit for a studio journal or a podcast with show notes. It suits anyone whose product is the writing itself and who wants readers to subscribe or pay.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Does membership take payments?
Not by itself. Point the membership buttons at a Stripe Payment Link, Ghost, Memberful or Lemon Squeezy checkout. The members-only cut-off on a post is a flag in its frontmatter.
How do I add a post or a series?
Add an MDX file with a title, date, series and topics. It appears on the front page, in the archive, in its series in order, and in the RSS feed.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source in LICENSING.md.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
