Theme Tokiwa is a minimalistic blog theme for the Hugo static site generator, built on Tailwind CSS and optimized for Chinese characters while supporting other languages. It is named after Tokiwa-iro, the main color tone used for the site. The theme was created by heyeshuang and is based on Jim Frenette's Hugo Starter Theme and Tailwind Toolbox's Minimalist-Blog. A live demo is hosted at https://heysh.xyz/hugo-theme-tokiwa/. The source code is available on GitHub and licensed under MIT.
What is Theme Tokiwa?
Theme Tokiwa is a Hugo blog theme that takes Markdown content and a hugo.toml configuration and renders a minimalistic blog with a side menu, post list, tags, social links, and fuzzy search. It is built on the Hugo static site generator and styled with Tailwind CSS. The theme is especially designed to render Chinese characters well, using fonts like Noto Serif CN, and includes optional KaTeX math support, Disqus comments, and Google Analytics.
What makes Theme Tokiwa stand out?
- Chinese font optimization — Use the
useChineseFontsparameter to load Noto Serif CN and other fonts tuned for CJK typography. - Tailwind CSS pipeline — Development builds run
npm run devfor unminified output with sourcemaps;npm run buildproduces minified CSS and JavaScript into the theme'sdistfolder. - Custom banner font — The
bannerFontconfig parameter lets you set any font for the site title; the exampleSite includes anexampleFontplaceholder. - Built-in integrations — Disqus comments via
disqusShortname, Google Analytics (Universal or GA4) viagoogleAnalytics, and KaTeX math rendering whenmath = true. - Fuzzy search with fuse.js — Client-side search powered by fuse.js, with setup details linked from a Chinese blog post.
- Social media links — Configure Instagram, Bilibili, Weibo, Zhihu, Twitter, GitLab, YouTube, and GitHub through the
[social]section. - Flexible installation — Install as a Git submodule or as a Hugo module with
hugo mod get. - Simple side menu — Define main menu items for Posts, Tags, and custom links in the
[menu]section.
Who should use Theme Tokiwa?
- Chinese-language bloggers — Get better text rendering for Chinese characters out of the box, with Noto Serif CN as the default body font.
- Hugo developers — Use it as a minimal starter theme to build custom blogs with Tailwind CSS and npm-based asset pipeline.
- Minimalist design enthusiasts — Enjoy a clean layout with a subdued Tokiwa-iro color palette and no unnecessary page elements.
What can you do with Theme Tokiwa?
- Publish a personal blog — Write posts in Markdown and organize them with tags and a side menu; the theme generates a clean reading experience.
- Add math to posts — Enable
math = trueto render LaTeX-style math in KaTeX. - Customize the look — Change the banner font through
bannerFont, toggle Chinese fonts, and configure social media links in the side menu. - Engage readers — Activate Disqus comments for each post and measure traffic with Google Analytics.
How does Theme Tokiwa work?
Install the theme either by adding it as a Git submodule (git submodule add) or as a Hugo module (hugo mod get), then copy the exampleSite configuration into your own hugo.toml. The config file accepts parameters for Disqus, Google Analytics, math support, Chinese fonts, banner font, menu items, and social links. For development, run npm install and npm run dev inside the theme folder; for production, run npm run build.
FAQ
Is Theme Tokiwa free?
Yes. Theme Tokiwa is released under the MIT license, so you can use, modify, and redistribute it freely, including for commercial projects.
Does Theme Tokiwa support Disqus and Google Analytics?
Yes. Set disqusShortname and googleAnalytics in your hugo.toml, and make sure env = "production" so they load on the live site. Google Analytics v4 identifiers (starting with G-) are supported in Hugo v0.82 and later.
Does Theme Tokiwa work with languages other than Chinese?
Yes. Although it is especially optimized for Chinese characters, the theme works well with other languages. You can disable the Chinese-specific fonts by setting useChineseFonts = false.
How do I customize the search?
The theme uses fuse.js for fuzzy search. The theme's documentation links to a Chinese blog post explaining how to set it up. The search is client-side and does not require a server.
What fonts does Theme Tokiwa use by default?
The banner originally used a free commercial font called 杨任东竹石体, but it was replaced with an exampleFont in the exampleSite to avoid licensing concerns. For Chinese body text, Noto Serif CN is used under the OFL 1.1 license.
