Back to templates

Template details

Astro Jing

A calm, static blog theme built with Astro, featuring full-text search, math equations, i18n, and Open Graph image generation.

About this template

Astro Jing is a calm blog theme built on the Astro framework that generates a fully static site from Markdown posts and an about page. It is authored by ziteh and distributed as a GitHub repository that can be used as a template or pulled into an existing blog repo as a git subtree.

What is Astro Jing?

Astro Jing is an Astro-based blog theme that turns Markdown content into a statically built website. It takes Markdown posts (stored in a content directory) as input and outputs a static blog with auto-generated descriptions, a table of contents, Open Graph images, and RSS/sitemap files. The theme is maintained by ziteh on GitHub and can be started either by creating a repo from the template or by embedding it as a git subtree inside your own blog repository.

Key Features

  • Auto-generated post descriptions — derived either from a character count limit or from content up to the <!-- more --> tag.
  • Auto-expanding table of contents — generated with Tocbot, expanding and collapsing as readers scroll.
  • Open Graph images — generated at build time with Satori and saved under hashed filenames.
  • Full-text search — powered by astro-pagefind.
  • Math and syntax highlighting — KaTeX renders equations, Expressive Code handles code blocks.
  • Internationalization (i18n) — locale configuration lives in src/config/lang.ts.
  • Comment systems — Giscus or Disqus can be wired into posts.
  • Sitemap and RSS feed — plus the ability to view any post as raw Markdown.

Who is it for?

  • Technical bloggers: write Markdown posts with math, code highlighting, and search without building a site from scratch.
  • Developers maintaining a personal site: pull theme updates in via git subtree pull while keeping content in the same repo.
  • Writers needing comments and search: enable Giscus or Disqus and full-text search through built-in integrations rather than plugins.

How does Astro Jing work?

Clone the repository, run pnpm i to install dependencies, then use pnpm dev for a local server, pnpm build for a production build, and pnpm preview to inspect it. When used as a subtree, theme files such as src/config/site.ts and astro.config.ts become ordinary editable files in your repo, and the theme reads content from a directory set by the CONTENT_DIR environment variable.

What can you do with Astro Jing?

  • Search-driven readers: ship a blog with client-side full-text search via Pagefind so visitors can find posts without a server.
  • Multi-language writers: configure locales in lang.ts to serve the blog in more than one language.
  • Self-hosted deployments: deploy the static output to hosts such as Cloudflare Pages, with custom headers for CSP and caching supplied in public/_headers.

Testing

The repository ships test scripts: pnpm test runs all tests, with separate pnpm test:lh (Lighthouse), pnpm test:urls, and pnpm test:a11y (axe-core accessibility) commands, plus a Sonyaut SEO workflow via pnpm seonaut:up.

Screenshot of Astro Jing