austere

A minimal theme for Zola with a focus on writing.

Author: tomwrw

This theme requires Zola version 0.23.0 and above

License: MIT

Homepage: https://github.com/tomwrw/austere-theme-zola

Tags:

Last updated: 2026-10-02T09:17:44+01:00

austere

A minimal theme for Zola with a focus on writing.

Live Demo: My personal website

The austere theme is designed with readability in mind. It uses the core functionality of Zola, and doesn't require additional third-party integrations. Currently, the only external link is to Google Fonts. Styles are internal to the base template, and colour can be applied directly in the site configuration.

The design and simplicity of austere was heavily influenced by the excellent Zap theme by jimmyff.

Features

Internal CSS (~2KB) - no external stylesheets
Configurable color themes for light/dark
Serif typography
Light/dark mode toggle
Responsive images
Atom and RSS feeds
Fuse.js search

Screenshot

austere

Installation

Download this theme to your themes directory:

cd your-zola-site
git submodule add https://github.com/tomwrw/austere-theme-zola themes/austere

Set the theme in your config.toml:
```
theme = "austere"
```
Copy the example content to get started (optional):
```
cp -r themes/austere/content/* content/
```

Configuration

Example Configuration

Here you can find an example config.toml to use for your site with the austere theme. Make sure you change:

Title
Description
Base URL

# Site title.
title = "austere"
# Site description.
description = "A minimal theme for Zola with a focus on writing."
# Base URL for your site.
base_url = "https://www.tomwrw.co.uk"
# No SASS - CSS is internal (located in base.html template).
compile_sass = false
# Search index enabled.
build_search_index = true
# Default site language.
default_language = "en"
# Feeds.
generate_feeds = true
# Specify feed filenames.
feed_filenames = ["atom.xml", "rss.xml"]
# Taxonomies.
taxonomies = [{ name = "tags", feed = true }]

[search]
# Required for search page to work.
index_format = "fuse_javascript"

[markdown.highlighting]
# Code block colours for light and dark mode.
light_theme = "github-light"
dark_theme = "github-dark"
# Required so code blocks follow the theme toggle rather than the OS setting.
add_color_scheme = false

[slugify]
# Controls slugification for page/section URLs.
paths = "on"
# Controls slugification for taxonomy terms (tags, categories, etc.).
taxonomies = "on"
# Controls slugification for heading anchors (H1 to H6 etc.).
anchors = "on"

[extra]
# Keywords for SEO.
keywords = "zola, theme, minimal"
# Site icon in header (optional - comment out to hide).
site_icon = "quill.svg"
# Header strapline (optional - comment out to hide).
strapline = "A minimal theme for Zola"
# Footer text (optional - comment out to hide).
footer_text = "austere - made for <a href='https://getzola.org'>Zola</a>"
# Favicon (optional - comment out to hide).
favicon = "/favicon.ico"
# Profile picture on home page (optional - comment out to hide).
profile_picture = "/images/profile.svg"

# Enable inline SVG icons (uses sprite sheet).
inline_icons = true
icon_path = "static/icons/"
icons = ["light", "asleep", "rss"]

# Responsive images
image_format = "auto"
image_quality = 80
images_default_size = 1024
images_sizes = [512, 1024, 2048]

# Navigation menu.
menu_links = [
  { url = "$BASE_URL/", name = "Home" },
  { url = "$BASE_URL/posts/", name = "Posts" },
  { url = "$BASE_URL/about/", name = "About" },
  { url = "$BASE_URL/projects/", name = "Projects" },
  { url = "$BASE_URL/tags/", name = "Tags" },
  { url = "$BASE_URL/search/", name = "Search" },
]

# Custom colour themes. Adjust here to apply own colour.
# Light colours.
[extra.colours.light]
background = "#FAF7F2"
text = "#1a1a1a"
text_muted = "#3a3a3a"
accent = "#9E4440"
accent_hover = "#7A3533"
code_bg = "#f0ebe3"
border = "#e0d9ce"
# Dark colours.
[extra.colours.dark]
background = "#141413"
text = "#e8e8e8"
text_muted = "#a0a0a0"
accent = "#E07A5F"
accent_hover = "#F4A594"
code_bg = "#1e1e1d"
border = "#2a2a29"

Theme Options

All theme options go under [extra] in your config.toml:

Site Identity

Option	Description	Default
`strapline`	Tagline shown in header	(none)
`favicon`	Path to favicon	(none)
`profile_picture`	Profile image on home page	(none)
`keywords`	SEO meta keywords	(none)
`footer_text`	Footer HTML content	(none)

[extra]
strapline = "Welcome to my website"
favicon = "/favicon.ico"
profile_picture = "/images/me.png"
keywords = "blog, writing, zola"
footer_text = "Made with <a href='https://getzola.org'>Zola</a>"

[extra]
menu_links = [
  { url = "$BASE_URL/", name = "Home" },
  { url = "$BASE_URL/posts/", name = "Posts" },
  { url = "$BASE_URL/about/", name = "About" },
  { url = "$BASE_URL/projects/", name = "Projects" },
  { url = "$BASE_URL/tags/", name = "Tags" },
  { url = "$BASE_URL/search/", name = "Search" },
]

Colours

Customize the color scheme for light and dark modes:

[extra.colours.light]
background = "#FAF7F2"
text = "#1a1a1a"
text_muted = "#3a3a3a"
accent = "#9E4440"
accent_hover = "#7A3533"
code_bg = "#f0ebe3"
border = "#e0d9ce"

[extra.colours.dark]
background = "#141413"
text = "#e8e8e8"
text_muted = "#a0a0a0"
accent = "#E07A5F"
accent_hover = "#F4A594"
code_bg = "#1e1e1d"
border = "#2a2a29"

Responsive Images

[extra]
image_format = "auto"      # auto, webp, jpg, png
image_quality = 80         # 1-100
images_default_size = 1024
images_sizes = [512, 1024, 2048]

Analytics (Optional)

[extra]
# Umami Analytics
umami_website_id = "your-website-id"
umami_src = "https://cloud.umami.is/script.js"  # optional, custom domain
umami_domains = "yoursite.com"                  # optional, limit tracking

# OR Google Analytics
google_analytics_tag_id = "G-XXXXXXXXXX"

Content

Posts

Create posts in content/posts/:

+++
title = "My Post Title"
date = 2024-01-15
description = "A brief description for SEO"
[taxonomies]
tags = ["zola", "blogging"]
+++

Your content here...

For posts with images, use a folder structure:

content/posts/my-post/
├── index.md
└── image.jpg

Pages

Create standalone pages in content/:

+++
title = "About"
template = "page.html"
+++

Page content...

Projects

Create content/projects/_index.md:

+++
title = "Projects"
template = "projects.html"
+++

Then create content/projects/projects.toml:

[[projects]]
title = "Project Name"
emoji = "🚀"
description = "What this project does"
url = "https://github.com/you/project"
image = "screenshot.png"  # optional, relative to projects folder
date = "2024"
status = "Active"
tags = ["rust", "web"]

Search

Create content/search.md:

+++
title = "Search"
template = "search.html"
+++

Components

Zola 0.23 replaced shortcodes with components.

Responsive Image

{{/* <image src="photo.jpg" alt="Description"/> */}}

Original Image

{{/* <image_original src="photo.jpg" alt="Description"/> */}}

YouTube Embed

{{/* <youtube id="dQw4w9WgXcQ"/> */}}
{{/* <youtube id="dQw4w9WgXcQ" autoplay={true}/> */}}

Spotify Embed

{{/* <spotify id="album-id"/> */}}

Customization

Template Hooks

Copy templates/components/hooks.html from the theme into your own templates/components/hooks.html and fill in the components you need. Keep every component in the file, including og_image_tags, as your copy replaces the theme's file.

{%/* component post_above_content(page) */%}
<!-- Content before post body -->
{%/* endcomponent post_above_content */%}

{%/* component post_below_content(page) */%}
<!-- Content after post body -->
{%/* endcomponent post_below_content */%}

{%/* component post_below_tags(page) */%}
<!-- Content after post tags -->
{%/* endcomponent post_below_tags */%}

{%/* component posts_below_title(page) */%}
<!-- Content after post title in list view -->
{%/* endcomponent posts_below_title */%}

OpenGraph Images

Add a preview image to any page:

+++
[extra]
og_preview_img = "preview.jpg"
+++

Requirements

Zola 0.23.0 or later

License

MIT

Credits

Zap by jimmyff - Original theme inspiration
Zola - Static site generator
Fuse.js - Client-side search
Source Serif 4 - Typography
Favicon by IconsMind