abridge

A fast and lightweight Zola theme using semantic html, a class-light abridge.css, and No mandatory JS.

Author: Jake G (jieiku)

This theme requires Zola version 0.23.6 and above

License: MIT

Homepage: https://github.com/jieiku/abridge

Live Demo: https://abridge.pages.dev/

Last updated: 2026-09-14T01:00:11-07:00

Abridge Zola Theme

A fast, lightweight, and modern Zola theme utilizing class-light semantic HTML with modular CSS. Perfect Lighthouse, YellowLabTools, and Observatory scores. Here is a Zola Themes Benchmarks Page.

Lighthouse Score

Maintenance of this project is made possible by all the contributors and sponsors. If you'd like to sponsor this project and have your avatar or company logo appear below click here. 💖

View Abridge demo

Features

Perfect Lighthouse, YellowLabTools, and Observatory scores.
PWA support (Progressive Web Application).
All JavaScript can be fully disabled.
Dark, Light, Auto, and Switcher themes. (colors can be customized, css variables)
Code syntax highlighting. (colors can be customized, css variables)
Numbered code blocks with line highlighting.
Entirely Offline Site by using the PWA or by setting search_library = "offline" in zola.toml.
Multi-language support.
Search support. (elasticlunr, pagefind, tinysearch)
Search Suggestions navigation keys, / focus, arrow move, enter select, escape close.
Search Results Page, type search query then hit Enter Key or click the search button icon.
SEO support. (Search Engine Optimization)
Pagination with numbered paginator on index.
Title Based Previous and Next Article links at bottom of Article.
Table of Contents in page Index (Optional, clickable links)
Recent Posts Block. (Optional)
Back to Top button. (uses css only)
Code Blocks copy button.
Email link in footer obfuscation. (anti-spam)
KaTeX support.
Archive page.
Tags.
Categories. (similar to Tags, disabled/commented out by default)
Social icon links in footer.
Responsive design. (mobile first)
Video Components: Youtube, Vimeo, Streamable.
Media Components: video, img, imgswap, image, gif, audio.
Other Components: showdata, katex.

Complete Documentation is available here

Windows Users

Below I use some linux commands during setup, to have a similar environment you can install Msys2. With msys2 use shift insert to paste into the terminal, I prefer the UCRT64 launcher.

MSYS2
pacman -Syu
pacman -S --needed mingw-w64-ucrt-x86_64-git mingw-w64-ucrt-x86_64-zola mingw-w64-ucrt-x86_64-uutils-coreutils rsync

Quick Start

This theme requires version 0.23.6 or later of Zola

git clone https://github.com/jieiku/abridge.git
cd abridge
zola serve
# open http://127.0.0.1:1111/ in the browser

Installation

The Quick Start shows how to run the theme directly. Next we will use abridge as a theme to a NEW site.

1: Create a new zola site

yes "" | zola init mysite
cd mysite

2: Install Abridge

Add the theme as a git submodule:

git init  # if your project is a git repository already, ignore this command
git submodule add https://github.com/jieiku/abridge.git themes/abridge
git submodule update --init --recursive
git submodule update --remote --merge

Or clone the theme into your themes directory:

git clone https://github.com/jieiku/abridge.git themes/abridge

3: Configuration

Copy some files from the theme directory to your project's root directory:

rsync themes/abridge/.gitignore .gitignore
rsync themes/abridge/zola.toml zola.toml
rsync themes/abridge/content/_index.md content/
rsync -r themes/abridge/COPY-TO-ROOT-SASS/* sass/
rsync themes/abridge/netlify.toml netlify.toml
rsync themes/abridge/package_abridge.js package_abridge.js
rsync themes/abridge/package.json package.json

zola.toml base configuration with all config values.
content/_index.md required to set pagination.
COPY-TO-ROOT-SASS/abridge.scss overrides to customize Abridge variables.
netlify.toml settings to deploy your repo with netlfiy.
package_abridge.js node script to: update cache files list in PWA, minify js, bundle js
package.json to facilitate use of package_abridge.js

Uncomment the theme line in your project's root zola.toml:

sed -i 's/^#theme = "abridge"/theme = "abridge"/' zola.toml

4: Add new content

Copy the content from the theme directory to your project or make a new post:

rsync -r themes/abridge/content .

5: Run the project

Just run zola serve in the root path of the project:

zola serve

Zola will start the dev web server, accessible by default at http://127.0.0.1:1111.

Saved changes will live reload in the browser. (press ctrl+f5, or while developing set pwa=false in zola.toml)

Abridge build helper

Install dependencies with npm install, then run a normal build with:

npm run abridge

The alternate search demos use an explicit build mode:

npm run abridge -- --mode elasticlunr --base-url https://example.com
npm run abridge -- --mode pagefind --base-url https://abridge-pagefind.pages.dev
npm run abridge -- --mode tinysearch --base-url https://abridge-tinysearch.pages.dev
npm run abridge -- --mode offline --drafts

Valid modes are elasticlunr, pagefind, tinysearch, offline, and elasticlunrjava.

There is a build-zola.sh that helps with deployment at cloudflare, netlify, etc. The helper works both from the Abridge repository itself and when called from a site as ./themes/abridge/build-zola.sh; The script checks theme.toml for the proper version of Zola to use, this avoids having to set or update Zola Version variables.

Customization

For further customization be sure to check the docs.

Do you love this theme? Was it useful to you? Please leave a github star, and if you feel inclined to donate you can make a donation to me through github sponsors.

Contributing and Philosophy

We'd love your help! Especially with fixes to issues, or improvements to existing features.

The goal is for Abridge to be lightweight, fast, and to work properly even if javascript is disabled or blocked.

The only feature that may be considered a necessity that relies on javascript is the Search.

License

Abridge is distributed under the terms of the MIT license.