A clean, minimal Zola theme forked from archie. Perfect for personal blogs and portfolios with dark/light mode support.
Live Demo: https://archie-zola.netlify.app
| Light Mode | Dark Mode |
|---|---|
 |  |
# Add as submodule
git submodule add https://github.com/XXXMrG/archie-zola.git themes/archie-zola
# Enable in config.toml
echo 'theme = "archie-zola"' >> config.toml
# Clone to themes directory
git clone https://github.com/XXXMrG/archie-zola.git themes/archie-zola
# Enable in config.toml
echo 'theme = "archie-zola"' >> config.toml
# Initialize submodules (first time)
git submodule update --init
# Update to latest version
git submodule update --remote
# Commit the update
git add themes/archie-zola
git commit -m "Update archie-zola theme"
config.toml:base_url = "https://yourdomain.com"
title = "Your Blog"
description = "Your blog description"
theme = "archie-zola"
[extra]
mode = "toggle" # auto | dark | toggle
subtitle = "Your tagline here"
mkdir -p content/posts
echo '+++
title = "Hello World"
date = 2024-01-01
+++
Your first post content here.' > content/posts/hello-world.md
zola serve
base_url = "https://yourdomain.com"
title = "Your Site Title"
description = "Your site description"
theme = "archie-zola"
[extra]
# Theme mode: "auto" | "dark" | "toggle"
mode = "toggle"
# Subtitle shown under title on homepage
subtitle = "Your tagline or description"
# Use CDN for fonts and icons (default: false)
useCDN = false
# Favicon path
favicon = "/icon/favicon.png"
# Footer copyright text
copyright = "Your Name"
# Google Analytics ID (optional)
ga = "G-XXXXXXXXXX"
auto - Automatically follows system preferencedark - Always dark modetoggle - Shows a toggle button for user choice[[extra.translations.en]]
show_more = "Read more ⟶"
previous_page = "← Previous"
next_page = "Next →"
posted_on = "on "
posted_by = "Published by"
read_time = "minute read"
all_tags = "All tags"
menus = [
{ name = "Home", url = "/", weight = 1 },
{ name = "Posts", url = "/posts", weight = 2 },
{ name = "Tags", url = "/tags", weight = 3 },
{ name = "About", url = "/about", weight = 4 },
]
[[extra.social]]
icon = "github"
name = "GitHub"
url = "https://github.com/yourusername"
[[extra.social]]
icon = "twitter"
name = "Twitter"
url = "https://twitter.com/yourusername"
[[extra.social]]
icon = "linkedin"
name = "LinkedIn"
url = "https://linkedin.com/in/yourusername"
Add custom meta tags to individual pages:
title = "Your Post Title"
description = "Post description"
date = "2024-01-01"
[extra]
meta = [
{property = "og:title", content = "Custom OG Title"},
{property = "og:description", content = "Custom OG Description"},
{property = "og:image", content = "https://example.com/image.jpg"},
]
If not specified, the theme will automatically generate Open Graph tags from your page title and description.
Create posts in content/posts/ directory. Configure pagination in content/posts/_index.md:
+++
paginate_by = 5
sort_by = "date"
template = "posts.html"
+++
Add tags to any post:
+++
title = "Your Post"
date = "2024-01-01"
[taxonomies]
tags = ["tech", "programming", "rust"]
+++
Enable tags in your main config.toml:
taxonomies = [
{ name = "tags" }
]
Add author info to posts:
[extra]
author = { name = "Your Name", social = "https://github.com/yourusername" }
Add a quick summary to posts:
[extra]
tldr = "Quick summary of what this post is about"
Add custom styling and functionality:
[extra]
# Custom CSS files (placed in static/css/)
custom_css = [
"css/custom.css",
"css/my-theme.css"
]
# Custom JS files (placed in static/js/)
custom_js = [
"js/custom.js",
"js/analytics.js"
]
File structure:
static/
├── css/
│ ├── custom.css
│ └── my-theme.css
└── js/
├── custom.js
└── analytics.js
The files will be automatically included in the <head> section of all pages.
Enable mathematical expressions with KaTeX:
[extra]
katex_enable = true
Then use in your content:
Inline math: \\( E = mc^2 \\)
Block math:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
Follow Zola's theme extension guide to override templates and add custom functionality.
Theme not loading
theme = "archie-zola" is in your config.tomlthemes/archie-zola/Submodule not updating
git submodule update --init --recursive
Build errors
config.toml syntaxDark mode not working
mode = "toggle" or "auto" in [extra] sectionuseCDN = true for faster font loadingstatic/ directoryzola build --drafts during developmentWe welcome contributions! Here's how you can help:
# Fork and clone the repo
git clone https://github.com/yourusername/archie-zola.git
cd archie-zola
# Create a test site
zola init test-site
cd test-site
echo 'theme = "archie-zola"' >> config.toml
# Link your local theme
ln -s ../archie-zola themes/
# Start developing
zola serve
This theme is released under the MIT License. See LICENSE for details.
⭐ Star this repo if you find it useful!