Revamped Astro Zozo

A warm Astro 6 blog theme with gallery, friends, search, and dark mode.

Revamped Astro Zozo is a sample-first Astro theme starter built with Astro, Tailwind CSS, and Bun. It builds on the lightweight writing flow of astro-blog-zozo and adds a warmer visual system, richer content surfaces, and pages that go beyond a simple post list.

Repository: Tito-XD/revamped-astro-zozo
Demo: revamped-astrozozo.netlify.app

Please read the Code of Conduct before contributing or participating in project discussions. Additional attribution and copyright notes are collected in NOTICE.

Preview

Home	About	Blog post

Key Features

• Split-hero Home and About layouts for editorial landing pages
• Blog with tags, timeline archives, reading time, and RSS
• Gallery with category walls, viewer pages, notes, and optional character-focus hotspots
• Friends page for curated link cards
• Pagefind full-text search
• Light and dark mode with a persistent theme toggle
• KaTeX math support, Shiki code highlighting, and dynamic Open Graph images
• Giscus comments support (hidden by default until configured)

Who It Is For

This theme works well if you publish long-form writing, maintain a visual gallery, or want a personal site that feels more like a magazine than a barebones blog starter.

Project Lineage

This theme is a maintained derivative of:

• ladit/astro-blog-zozo

Which itself was inspired by:

• varkai/hugo-theme-zozo

Original author: Ladit
Current derivative/theme maintenance: Tito_XD

Documentation

• Getting Started
• Publishing Notes
• Astro Theme Submission Copy

Thanks

Special thanks to the original authors and contributors whose work made this project possible.

• ladit/astro-blog-zozo
• varkai/hugo-theme-zozo
• Charca/astro-blog-template
• satnaing/astro-paper
• ricora/alg.tus-ricora.com
• one-aalam/astro-ink

Current Stack

• Astro 6
• Tailwind CSS
• TypeScript
• Bun
• Pagefind search
• Giscus comments
• Netlify deployment

What Changed From Astro Zozo

This template keeps the lightweight writing flow of Astro Zozo, then adds:

• a warmer light and dark palette with a more unified surface system
• a rewritten scaffold layout, footer, and navigation state treatment
• matching hero-style Home and About layouts
• a /friends page for curated link cards
• a /gallery route with category walls, viewer pages, notes, and optional focus hotspots
• markdown-backed gallery entries under src/content/gallery/
• a more compact mobile menu and tightened page heading system

Sample Content

This theme intentionally replaces personal material with reusable sample content:

• sample blog posts with theme overview and setup guidance
• sample gallery entries with Unsplash photos and photographer credits
• sample friends data with portrait avatars
• sample branding, hero art, and a geometric logo

Use this theme as a base, then swap the sample content for your own writing, media, and visual identity. Sample photos are from Unsplash.

Quick Start

1. Clone the repository
2. Install dependencies with bun install or npm install
3. Run bun run dev or npm run dev
4. Replace branding in src/config.ts, posts in src/content/posts/, gallery entries in src/content/gallery/, and friends data in src/data/friends.ts

Important folders to customize first:

• src/config.ts for site title, description, socials, and toggles
• src/content/posts/ for blog posts
• src/content/gallery/ for gallery entries and notes
• src/data/friends.ts for curated links
• public/sample/ and src/assets/sample/ for hero art, avatars, and gallery media

Project Structure

• src/content/posts/: blog posts
• src/content/gallery/: gallery entries grouped by category
• src/assets/sample/gallery/: sample gallery media
• src/assets/sample/portraits/: sample focus portraits for interactive illustration pages
• public/sample/: logo, hero art, and friend avatars
• src/data/friends.ts: friends page data
• src/config.ts: site title, description, social links, and toggles
• src/pages/: route files
• src/components/: reusable UI parts
• src/layouts/: site layouts and page shells
• src/utils/: content, gallery, and UI-support helpers
• docs/screenshots/: theme preview captures for README and Astro Themes submission

Development

Install dependencies:

bun install

Run local development:

bun run dev

Run checks:

bun run check

Build the site:

bun run build

Optional commands:

bun run lint
bun run format

Regenerate preview screenshots after visual changes:

npm run build
npx astro preview --host 0.0.0.0 --port 4321
node scripts/capture-screenshots.mjs

Deployment

This theme is ready to deploy on Netlify.

Recommended settings:

• Node.js 22.12.0 or newer within the 22.x line
• Base directory: /
• Build command: bun run build
• Publish directory: dist

Open Source Readiness

This theme is structured to be easier to publish and review as an open-source starter:

• upstream MIT license notices are preserved
• a top-level Code of Conduct is included
• footer attribution includes the required Netlify service link
• personal posts, gallery notes, avatars, and branding have been replaced with sample content
• preview screenshots and Astro Themes submission copy are included under docs/

Credits

This project is based on astro-blog-zozo by Ladit and keeps its upstream MIT lineage intact.

It also carries inspiration from:

• hugo-theme-zozo
• astro-blog-template
• astro-paper
• alg.tus-ricora.com
• astro-ink

Sample photos are from Unsplash.

License and Content

Code

The code in this repository continues to inherit and preserve the original MIT license terms from its upstream project. Original copyright and license notices should be retained. See NOTICE for additional attribution and project-specific copyright context.

Sample Content

This theme includes sample copy and Unsplash-based JPEG assets so the site can be previewed immediately. Replace them with your own branding and materials before publishing a real site.