AstroBlog

astro-clearmark-theme — Astro Blog Template

By 0xqige

ClearMark is an Astro-based blog theme that emphasizes clear content structure for both human readers and AI crawlers, with built-in Chinese-English bilingual support, static search, and llms.txt generation.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Author preview
Author-provided preview

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-03View source

What stands out

A quick read of the recorded project description.

01

Build-time generation of llms.txt and llms-full.txt to provide structured content for AI crawlers

02

Built-in Chinese-English bilingual support with directory-based i18n routing

03

Pagefind static full-text search, paired with RSS, sitemap, tag pages, and archive pages

04

Supports KaTeX math formulas and code blocks with diff and line highlighting

05

Stable article frontmatter model, with reading time, word count, and excerpt automatically derived at build time

06

Provides light/dark mode, responsive layout, TypeScript, and ESLint/Prettier configuration

Template Details

ClearMark is an Astro blog theme positioned to keep published content readable, parseable, and citable across search engines, AI summarization tools, RSS readers, and browsers. It does not pursue visual gimmicks; instead, it focuses on semantic HTML structure, a stable frontmatter metadata model, and build-time generated llms.txt / llms-full.txt to provide structured content for AI crawlers.

On the content side, the theme provides reading time and word count statistics, automatic excerpts, automatic table of contents for long articles, KaTeX math rendering, and code highlighting with diff and line highlighting. For search and discovery, it uses Pagefind for static full-text search and generates RSS and sitemap, plus tag pages and archive pages.

For internationalization, it includes built-in Chinese-English bilingual support and directory-based i18n routing. For developer experience, it offers light/dark mode, responsive layout, TypeScript coverage, ESLint and Prettier configuration, and GitHub Actions CI. Articles are stored under src/data/blog/ and written in Markdown; frontmatter supports fields such as title, description, publish date, modified date, pinned, draft, tags, categories, cover image, and social share image, with minutes, words, and excerpt derived at build time.

The theme is a secondary development based on AstroPaper and uses the MIT license. The tech stack listed in the README includes Astro, Tailwind CSS, Pagefind, KaTeX, Satori, and Sharp; specific versions are subject to the repository dependency manifest.

AstroBlog

Is it right for your project?

Use Cases

  • Building a personal blog focused on text content that needs to be correctly parsed by search engines and AI tools
  • Operating a Chinese-English bilingual content site and wanting to distinguish language versions by directory structure
  • Publishing technical articles that include math formulas or code examples
  • Static sites that need in-site static full-text search without introducing an external search service

Suitable For

  • Bloggers using Astro who want to get started quickly
  • Technical writers concerned about content being cited and crawled by AI summarization tools
  • Individuals or small teams needing a Chinese-English bilingual blog
  • Developers who prefer Markdown writing and static deployment

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    After cloning the repository, run pnpm install, then use pnpm run dev to start the local development server (default http://localhost:4321)

  2. 2

    Modify in order: src/config.ts (site name, description, author), src/constants.ts (social links and share channels), src/styles/global.css (colors and visual style)

  3. 3

    Replace the sample articles in src/data/blog/ with your own Markdown content

  4. 4

    The build command pnpm run build performs type checking, generates the Pagefind index, and generates llms.txt

  5. 5

    The code uses the MIT license, but third-party assets such as demo images, fonts, and icons require separate license verification

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope is the code of that version and does not mean external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis

Compiled by DeepSeek based on repository license and README ·2026-10-04. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 68 / 100
Technologies
Astro
Website type
Blog
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-03-28
Screenshot last checked
2026-10-04

No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.

The catalog identifies Astro as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-05

Inspect the recorded source material

SHA-256: 52d855b86bfcac4724754501cb0265667c77a3f27402f380dac662c1a71d1d37

2026-10-04T21:10:23.550Z

Source file / repository
# ClearMark

[![English](https://img.shields.io/badge/lang-English-blue.svg)](./README.md) [![中文](https://img.shields.io/badge/lang-中文-red.svg)](./README_CN.md)

A clean, structured Astro blog theme optimized for **both human readers and AI systems**.

ClearMark focuses on making published content **readable, parseable, and citable** across search engines, AI summarizers, RSS readers, and human browsers — without visual gimmicks.

![ClearMark Preview](./public/clearmark-og.jpg)

## Features

**Content Experience**
- Reading time & word count
- Automatic excerpt generation
- Responsive table of contents (auto-generated for long posts)
- KaTeX math rendering
- Code highlighting with diff / line highlight annotations

**Search & Discovery**
- [Pagefind](https://pagefind.app/) static full-text search
- RSS feed
- Auto-generated sitemap
- Tags & archives pages

**SEO & AI Readability**
- Dynamic OG image generation
- Semantic HTML structure
- Build-time `llms.txt` / `llms-full.txt` generation (structured content for AI crawlers)
- Stable frontmatter metadata model

**Internationalization**
- Built-in Chinese / English bilingual support
- Directory-based i18n routing

**Developer Experience**
- Astro 5 + Tailwind CSS 4
- Light / dark mode
- Responsive layout, mobile-friendly
- Full TypeScript coverage
- ESLint + Prettier
- GitHub Actions CI out of the box

## Quick Start

```bash
git clone https://github.com/0xqige/astro-clearmark-theme.git
cd astro-clearmark-theme
pnpm install
pnpm run dev
```

Dev server runs at `http://localhost:4321`.

## Project Structure

```
clearmark/
├── public/
│   ├── clearmark-og.jpg
│   ├── favicon.svg
│   └── pagefind/
├── src/
│   ├── assets/           # Icons and static assets
│   ├── components/       # Astro / React components
│   ├── data/blog/        # Blog posts (Markdown)
│   ├── i18n/             # i18n configuration
│   ├── layouts/          # Page layouts
│   ├── pages/            # Route pages
│   ├── plugins/          # remark / rehype plugins
│   ├── styles/           # Global styles
│   ├── utils/            # Utility functions
│   ├── config.ts         # Site metadata
│   ├── constants.ts      # Social links & share config
│   └── content.config.ts
└── astro.config.ts
```

## Content Model

Posts live in `src/data/blog/`. Supported frontmatter:

```yaml
---
title: Post Title
description: Summary for cards and SEO
pubDatetime: 2026-03-20T09:00:00Z
modDatetime: 2026-03-20T10:00:00Z  # optional
featured: false                     # optional, pin to homepage
draft: false                        # optional
tags: [astro, blog]                 # optional
category: Guides                    # optional
image: ./cover.png                  # optional, post cover
ogImage: ./social.png               # optional, social share image
---
```

Derived at build time: `minutes`, `words`, `excerpt`.

## Customization Order

1. **`src/config.ts`** — Site name, description, author
2. **`src/constants.ts`** — Social links and share channels
3. **`src/styles/global.css`** — Colors and visual style
4. **`src/data/blog/`** — Replace with your own posts

## Commands

| Command | Description |
|---------|-------------|
| `pnpm run dev` | Start dev server |
| `pnpm run build` | Production build (type check + Pagefind index + llms.txt) |
| `pnpm run preview` | Preview build output |
| `pnpm run lint` | ESLint check |
| `pnpm run format:check` | Prettier format check |
| `pnpm run format` | Auto-format |

## Tech Stack

- [Astro](https://astro.build/) 5 — Static site framework
- [Tailwind CSS](https://tailwindcss.com/) 4 — Utility-first CSS
- [Pagefind](https://pagefind.app/) — Static full-text search
- [KaTeX](https://katex.org/) — Math rendering
- [Satori](https://github.com/vercel/satori) — OG image generation
- [Sharp](https://sharp.pixelplumbing.com/) — Image processing

## Credits

ClearMark is derived from [AstroPaper](https://github.com/satnaing/astro-paper) by Sat Naing (MIT License). See [THIRD_PARTY_NOTICES.md](./THIRD_PARTY_NOTICES.md).

## License

MIT
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.