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!
- 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)
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.
If you only need installation of the theme, skip to Theme Installation. Here lists the detail procedures from installing Zola to building a site locally according to Zola Documentation.
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.1Creates 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 initAny choices you make during the initialization can be changed later in the config.toml file.
git submodule add https://github.com/edwardzcn-decade/cela themes/cela
git submodule update --init --force --recursive
git submodule syncThen set the theme in your config.toml file.
theme = "cela"- Download the latest release archive from the Cela releases.
- Unzip to themes/cela in your Zola project.
- Set
themein config.toml. - (Optional) Delete unused example content under content/ if you start fresh.
Note
If you find this project helpful and would like to support its development, see our CONTRIBUTING and CODE_OF_CONDUCT guidelines.
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.
The final CSS stack is split into two layers:
static/css/theme-runtime.css: a thin runtime theme layer for light/dark semantic color variablesstyles/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.
Install the development dependencies:
npm installBuild the generated CSS once:
npm run build:cssWatch CSS changes during theme development:
npm run watch:cssValidate and build the site:
npm run build:css
zola check --skip-external-links
zola buildSee 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.
Mapping between semantic template class names and their Tailwind token equivalents.
| Class | File | Role | Key Tailwind tokens used |
|---|---|---|---|
.post-single |
page.html |
Article page container | max-w-main, px-gap |
.search-page |
search.html |
Search page container | max-w-main, px-gap |
.search-box |
search.html |
Search input wrapper | — |
.post-entry |
post_card.html |
Post card | bg-surface, border, shadow-card |
.post-header |
page.html, search.html |
Page/post header block | — |
.post-title |
multiple | Page <h1> title |
— |
.entry-header |
post_card.html |
Card title area | — |
.entry-content |
post_card.html |
Card summary area | text-content |
.entry-footer |
post_card.html |
Card meta area | text-muted |
.entry-link |
post_card.html |
Full-card click overlay | — |
.breadcrumbs |
page.html, search.html, robot.html, section_post.html |
<nav> breadcrumb trail |
text-muted |
.pagination |
section_post.html |
Prev/next page nav | — |
.pagination .previous |
section_post.html |
Previous page link | bg-text, text-theme |
.pagination .next |
section_post.html |
Next page link | bg-text, text-theme |
.footer-credits |
home_footer.html |
Copyright + powered-by row | text-muted |
.footer-scheme |
home_footer.html |
Color scheme selector row | text-muted |
#scheme-select |
home_footer.html |
Color scheme <select> |
border, text-muted |
Tailwind token names correspond to keys in
tailwind.config.js→theme.extend.
- Tailwind Path B migration: All semantic classes (
.post-single,.post-entry,.footer, etc.) instyles/tailwind.csscurrently use raw CSS values. Migrate them to use@applywith tokens defined intailwind.config.js(e.g.@apply bg-surface border-border rounded-theme). This is the recommended step before considering Path A (utility classes in templates) or Tailwind v4. - Tailwind Path A (future): Replace semantic classes in templates with inline Tailwind utility classes. Best done alongside Tailwind v4 migration.
- Explore Tailwind v4 migration: v4 removes
tailwind.config.jsin favor of@themeblocks in CSS, aligns naturally with the CSS variable architecture, and offers significantly faster build times. Tracked for future investigation.
MIT exit