Skip to content
/ tabi Public

An accessible Zola theme with search, multi-language support, optional JavaScript, a perfect Lighthouse score, and comprehensive documentation. Crafted for personal websites and blogs.

License

Notifications You must be signed in to change notification settings

welpo/tabi

Repository files navigation

PRs welcome Contributors Forks Last commit
Latest release Documentation License Clean commits Average time to resolve an issue Percentage of issues still open

🌱 tabi

An accessible Zola theme with search, multi-language support, optional JavaScript, a perfect Lighthouse score, and comprehensive documentation. Crafted for personal websites and blogs.

Tip

Want to start blogging right away? Use the tabi-start template to get a complete site up and running in minutes.

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

tabi has a perfect score on Google's Lighthouse audit:

lighthouse

Features

Installation

Note

The fastest way to create a new site is to use the tabi-start template. This gives you a complete blog setup with all the essential configuration ready to go.

Manual installation

To add tabi to you existing Zola site:

  1. Initialize a Git repository in your project directory (if you haven't already):
git init
  1. 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

Required configuration

  1. Enable the theme in your config.toml:
theme = "tabi"
  1. Set a title in your config.toml:
title = "Your Site Title"
  1. Configure code block highlighting in your config.toml:
[markdown]
highlight_code = true
highlight_theme = "css"
  1. 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. Using section_path = "blog/" will not work.

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.

  1. 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…".

  1. 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.

Updating tabi

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

Sites using tabi

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.

Inspiration

This theme was inspired by:

Support

Something not working? Have an idea? Let us know!

Contributing

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.

License

The code is available under the MIT license.