+++ title = "Cela" description = "A minimalist documentation/blog theme." template = "theme.html" date = 2026-05-09T17:12:12+08:00

[taxonomies] theme-tags = ['blog', 'documentation', 'lightweight', 'minimal', 'responsive', 'search']

[extra] created = 2026-05-09T17:12:12+08:00 updated = 2026-05-09T17:12:12+08:00 repository = "https://github.com/edwardzcn-decade/cela.git" homepage = "https://github.com/edwardzcn-decade/cela" minimum_version = "0.22.1" license = "MIT" demo = "https://edwardzcn-decade.github.io/cela/"

[extra.author] name = "Edward Zhang" homepage = "https://github.com/edwardzcn-decade" +++

Cela

Cela is a simple, lightweight Zola theme, inspired by Hugo PaperMod.

The style sheet is adapted from Catppuccin. If you like it, please give it a 🌟 on GitHub. Thanks!

Theme Features

• Catppuccin color theme
• Light/Dark mode toggle
• MathJax support
• Blog RSS feeds
• Full-text search
• Robot tools
• Home page archive grouping (group by year)
• Internationalization (i18n, first-class en / zh)

Tags, Categories, and Taxonomies

Cela provides Hexo/Hugo-like tags and categories, compatible with Zola taxonomies. In front matter:

[taxonomies]
tags = ["Rust", "Zola"]
categories = ["Programming"]

or in YAML style:

taxonomies:
  tags: ["Rust", "Zola"]
  categories: ["Programming"]

Zola taxonomies as recommended are more powerful for structuring your contents. See zola taxonomies for more information.

Quick Start

If you only need installation of the theme, skip to Theme Installation.

Zola Installation

Cela is developed and validated against Zola 0.22.1.

For syntax highlighting on Zola 0.22.x, use the nested [markdown.highlighting] table instead of the older flat highlight_code setting. See the official configuration docs: https://www.getzola.org/documentation/getting-started/configuration/

# macOS
brew install zola
# Alpine Linux
apk add zola
# Arch Linux
pacman -S zola
# Docker
docker pull ghcr.io/getzola/zola:v0.22.1

Create a Zola site

Creates your first Zola site.

If myblog already exists but only contains hidden files (like .git), Zola will alswo populate the site.

zola init myblog
# or
# populate the current directory
zola init

Any choices you make during the initialization can be changed later in the config.toml file.

Theme Installation

By Git submodule

git submodule add https://github.com/edwardzcn-decade/cela themes/cela
git submodule update --init --force --recursive
git submodule sync

Then set the theme in your config.toml file.

theme = "cela"

By Download Releases

1. Download the latest release archive from the Cela releases.
2. Unzip to themes/cela in your Zola project.
3. Set theme in config.toml.
4. (Optional) Delete unused example content under content/ if you start fresh.

👐 Development

[!NOTE]

If you find this project helpful and would like to support its development, see our CONTRIBUTING and CODE_OF_CONDUCT guidelines.

Static Runtime Model

Cela stays a pure static Zola theme:

• No backend
• No frontend framework runtime
• No Node.js requirement for theme users

Node.js is used only for theme development to generate static CSS.

CSS Layers

The final CSS stack is split into two layers:

1. static/css/theme-runtime.css: a thin runtime theme layer for light/dark semantic color variables
2. styles/tailwind.css -> static/css/theme.css: the generated Tailwind-controlled main stylesheet

The generated CSS file is committed so downstream theme users still only need Zola. Legacy files are no longer part of the runtime load path.

Local Theme Development

Install the development dependencies:

npm install

Build the generated CSS once:

npm run build:css

Watch CSS changes during theme development:

npm run watch:css

Validate and build the site:

npm run build:css
zola check
zola build

Smoke Checklist

See docs/smoke-checklist.md for the baseline routes and interactions to verify after template or CSS changes.

Homepage motion is intentionally scoped to the landing page hero, social icons, year or section headers, and home post lists. It uses CSS animation plus IntersectionObserver, and degrades cleanly when JavaScript is disabled or prefers-reduced-motion is enabled.

CSS Class Reference

Mapping between semantic template class names and their Tailwind token equivalents.

Tailwind token names correspond to keys in tailwind.config.js → theme.extend.

TODO

• Tailwind Path B migration: Status: in progress. Shared primitives such as surface-card, theme-action-button, theme-pill, and link-panel now use Tailwind @apply, and several component styles already consume theme() tokens from tailwind.config.js. Remaining work: continue moving semantic component rules away from raw CSS values where a real Tailwind token exists, while keeping runtime color variables in static/css/theme-runtime.css.
• Add a Zola-native share_icons.html partial for optional post share buttons in page.html after include post_nav_links.html. Should be configured in show_share_buttons and disable_share. Status: not started; .share-buttons CSS is still intentionally commented out.
• Tailwind Path A (future): Replace semantic classes in templates with inline Tailwind utility classes. Status: deferred until Path B is substantially complete and the Tailwind v4 direction is clear.
• Explore Tailwind v4 migration: v4 removes tailwind.config.js in favor of @theme blocks in CSS, aligns naturally with the CSS variable architecture, and offers significantly faster build times. Status: future investigation; current tooling remains Tailwind CSS 3.4.

LICENSE

MIT