tabi

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.

tabi (旅): Journey.

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

Features

• Comprehensive multi-language support. Add as many languages as you wish.
• 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.
• Dark and light themes. Defaults to the OS setting, with a switcher in the navigation bar.
• Support for comments using giscus, utterances, Hyvor Talk, or Isso.
• Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO).
• KaTeX support.
• All JavaScript can be fully disabled.
• Customizable skins.
• Stylized feed.
• Projects page.
• Archive page.
• Table of Contents.
• Tags.
• Social links.
• Responsive design.
• Code syntax highlighting.
• Customizable secure headers.
• Custom shortcodes.

Quick start

Once you have installed Zola 0.17.0 or newer:

git clone https://github.com/welpo/tabi.git
cd tabi
zola serve

Open http://127.0.0.1:1111/ in the browser.

Installation

To add tabi to you existing Zola site:

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

2. Enable the theme in your config.toml:

theme = "tabi"

3. Set a title in your config.toml:

title = "Your Site Title"

4. Create a content/_index.md file with the following content:

+++
title = "Home"
paginate_by = 5 # Set the number of posts per page
template = "index.html"
+++

If you want to serve your blog posts from a different path, such as blog/, add a section_path in the [extra] section of content/_index.md (this file will need pagination):

[extra]
section_path = "blog/_index.md"

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

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

Inspiration

This theme was inspired by:

• shadharon — tabi started as a fork of syedzayyan's theme;
• tailwind-nextjs-starter-blog;
• abridge;
• internetVin's blog.

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.