A fast, lightweight, and modern Zola theme with multi-language support. It aims to be a personal page and home to blog posts.
See a live preview (and the theme's documentation) here.
Explore the Sites Using tabi section to see real-world applications.
tabi (旅, /tɐˈbi/): Journey.
tabi has a perfect score on Google's Lighthouse audit:
- Set any language as default. Set your base site to Chinese, Spanish, French, Hindi… or any other supported language. The theme's interface will be translated accordingly.
- Integration with remote repositories on GitHub, GitLab, Gitea & Codeberg for commit history and showing the site source.
- Series support for creating sequential content like tutorials, courses, and multi-part stories.
- Dark and light themes. Defaults to the OS setting, with a switcher in the navigation bar.
- Thorough documentation. See Mastering tabi Settings: A Comprehensive Guide.
- Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO).
- Comprehensive multi-language support. Add as many languages as you wish.
- Support for comments using giscus, utterances, Hyvor Talk, or Isso.
- Code syntax highlighting with colours based on Catppuccin Frappé.
- Mermaid support to create diagrams and charts with text.
- Local search with an accessible, multi-lingual interface.
- Custom Twitter card and automatic Open Graph tags.
- KaTeX support for mathematical notation.
- Stylized and human readable Atom feed.
- Stylized and human readable sitemap.
- Mail encoding for spam protection.
- All JavaScript can be fully disabled.
- Customizable Table of Contents.
- Customizable secure headers.
- Copy button for code blocks.
- Quick navigation buttons.
- Custom copyright notice.
- Custom canonical URLs.
- Custom shortcodes.
- Customizable skins.
- Social media cards.
- Responsive design.
- Projects page.
- Archive page.
- Pinned posts.
- Social links.
- Tags.
To add tabi to you existing Zola site:
- Initialize a Git repository in your project directory (if you haven't already):
git init
- Add the theme as a git submodule:
git submodule add https://github.com/welpo/tabi.git themes/tabi
Or clone the theme into your themes directory:
git clone https://github.com/welpo/tabi.git themes/tabi
- Enable the theme in your
config.toml
:
theme = "tabi"
- Set a
title
in yourconfig.toml
:
title = "Your Site Title"
- Configure code block highlighting in your
config.toml
:
[markdown]
highlight_code = true
highlight_theme = "css"
-
Create a
content/_index.md
file. This file controls how your home page looks and behaves. Choose one of the following options:Option A: Serve posts from
/
:+++ title = "Home" paginate_by = 5 # Show 5 posts per page. +++
- This will display posts in
content/
with pagination.
Option B: Serve posts from a different path (e.g.,
blog/
):+++ title = "Home" # Note we're not setting `paginate_by` here. [extra] section_path = "blog/_index.md" # Where to find your posts. max_posts = 5 # Show 5 posts on the home page. +++
- This will display the latest 5 posts from the
blog/
section. - Do not set
paginate_by
if you choose this option. - Use the full path to the section's
_index.md
file. Usingsection_path = "blog/"
will not work.
- This will display posts in
Warning
Do not set both paginate_by
and section_path
in content/_index.md
.
These settings are mutually exclusive and using both may result in no posts being displayed.
- If you want an introduction section (see screenshot above), add these lines to
content/_index.md
:
[extra]
header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Your Name" }
The content outside the front matter will be rendered between the header title and the posts listing. In the screenshot above, it's the text that reads "tabi is a fast, lightweight, and modern Zola theme…".
- If you want a multilingual site, you will need to set up each language. In
config.toml
, set the title and taxonomies for each language, like:
[languages.es]
title = "~/tabi"
taxonomies = [{name = "tags", feed = true}]
You will need an _index.{language_code}.md
per language for each section (e.g. /blog or /projects) that you want to enable in that language.
The same is true for individual posts, which should have the exact same name as the default language, with an extra .{code}
before the extension (e.g. the Spanish version of security.md
would be security.es.md
).
This configuration allows the language switcher to take the user to the translation of the current URL. If a translation doesn't exist, the 404 page will be displayed, with an explanation in each language set in the config.
To learn more about multilingual support, see the Frequently Asked Questions.
If you added the theme as a git submodule, run:
git submodule update --remote themes/tabi
If you cloned it:
cd themes/tabi
git pull
Website | Creator | Description | Site Source |
---|---|---|---|
osc.garden | Óscar Fernández (welpo) | Data science, psychology, and Zola | Source |
sandip.live | Sandip G (sandman) | Startups, tech and the good life | Source |
seadve.github.io | Dave Patrick Caberto (SeaDve) | Personal blog and portfolio with custom CSS | Source |
mikufan.page | Nadia | Personal blog | Source |
tim-boettcher.online | Tim Böttcher | Insights and ramblings of a deafblind programmer | Source |
www.richtman.au | Ariel Richtman | Personal tech blog | Source |
Ponderosa Games | John Burak (JVimes) | A friendly indie game company | — |
jmbhughes.com | Marcus Hughes (jmbhughes) | Personal blog | Source |
Using tabi? Feel free to create a PR and add your site to this list.
This theme was inspired by:
- shadharon — tabi started as a fork of syedzayyan's theme
- tailwind-nextjs-starter-blog
- abridge
Something not working? Have an idea? Let us know!
- Questions? → Start a discussion
- Found a bug? → Report it here
- Feature request? → Tell us more!
Please do! We appreciate bug reports, improvements to translations or documentation (however minor), feature requests…
Take a look at the Contributing Guidelines to learn more.
The code is available under the MIT license.