A minimal theme for Zola with a focus on writing.
config.tomlDownload this theme to your themes directory:
cd your-zola-site
git clone 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:
cp -r themes/austere/content/* content/
base_url = "https://yoursite.com"
# Required for search
build_search_index = true
[search]
index_format = "fuse_javascript"
# Required for syntax highlighting
[markdown]
highlight_code = true
highlight_theme = "css"
All theme options go under [extra] in your config.toml:
| 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" },
]
Customize the color scheme for light and dark modes:
[extra.colours.light]
background = "#FAF7F2"
text = "#1a1a1a"
text_muted = "#3a3a3a"
accent = "#B85450"
code_bg = "#f0ebe3"
border = "#e0d9ce"
[extra.colours.dark]
background = "#141413"
text = "#e8e8e8"
text_muted = "#a0a0a0"
accent = "#E07A5F"
code_bg = "#1e1e1d"
border = "#2a2a29"
[extra]
image_format = "auto" # auto, webp, jpg, png
image_quality = 80 # 1-100
images_default_size = 1024
images_sizes = [512, 1024, 2048]
[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"
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
Create standalone pages in content/:
+++
title = "About"
template = "page.html"
+++
Page content...
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"]
Create content/search.md:
+++
title = "Search"
template = "search.html"
+++
{{ image(src="photo.jpg", alt="Description") }}
{{ youtube(id="dQw4w9WgXcQ") }}
{{ youtube(id="dQw4w9WgXcQ", autoplay=true) }}
{{ spotify(id="album-id") }}
Override these macros in your own templates/macros/hooks.html:
{%/* macro post_above_content(page) */%}
<!-- Content before post body -->
{%/* endmacro */%}
{%/* macro post_below_content(page) */%}
<!-- Content after post body -->
{%/* endmacro */%}
{%/* macro post_below_tags(page) */%}
<!-- Content after post tags -->
{%/* endmacro */%}
{%/* macro posts_below_title(page) */%}
<!-- Content after post title in list view -->
{%/* endmacro */%}
Add a preview image to any page:
+++
[extra]
og_preview_img = "preview.jpg"
+++
MIT