Theme Tokiwa

Theme Tokiwa is a minimalistic blog theme. Tokiwa-iro is the main color tone and the name of this theme.

Built on the top of Jim Frenette’s Hugo Starter Theme and Tailwind CSS. Inspired by Tailwind Toolbox - Minimalist-Blog.

This theme is especially optimized for Chinese characters, while works well with other languages.

Screenshot

A live demo is at https://heysh.xyz/hugo-theme-tokiwa/.

Install

Git submodule

Inside the folder of your Hugo site run:

$ git submodule add https://github.com/heyeshuang/hugo-theme-tokiwa.git themes/hugo-theme-tokiwa

Hugo module

Inside the folder of your Hugo site run:

$ hugo mod init https://github.com/<YOUR_NAME>/<THEME_NAME>
$ hugo mod get https://github.com/heyeshuang/hugo-theme-tokiwa

Then add to your hugo.toml:

[module]
[[module.imports]]
  path = "github.com/heyeshuang/hugo-theme-tokiwa"

available config params

disqusShortname = "YOURSHORTNAME"
googleAnalytics = "UA-1234567890" # or "G-xxxxxxxx" in Google Analytics v4, in hugo v0.82+

[params]
description = """
Tokiwa-iro is the theme color of this site.
"""
math = true # for introducing $KaTEX$
env = "production" # for Google Analytics and DISQUS.
useChineseFonts = true # for font Noto Serif etc.
bannerFont = "fonts/exampleFont" # custom your own font for the title.
postDateFormat = "2006-1-2" # override custom date format posts.

[menu]
# Shown in the side menu.
  [[menu.main]]
    name = "Posts"
    weight = 1
    identifier = "post"
    url = "/post/"
  [[menu.main]]
    name = "Tags"
    url = "/tags/"
    weight = 2

[social]
instagram="http://example.com/"
bilibili="http://example.com/"
weibo="http://example.com/"
zhihu="http://example.com/"
twitter="http://twitter.com/"
gitlab="http://gitlab.com/"
youtube="http://youtube.com/"
github="http://github.com/"

A complete config.toml example is in the exampleSite folder.

Dev this theme

Install node modules

cd blog/themes/hugo-theme-tokiwa

npm i

Unminified development build with sourcemaps

cd blog/themes/hugo-theme-tokiwa
    
npm run dev

Build for production with npm run build. CSS and JavaScript files will be output into the starter themes dist folder. e.g.,

cd blog/themes/hugo-theme-tokiwa
    
npm run build

Credit

• hugoBasicExample is used to mock data.
• Tailwind CSS
• Hugo Static Site Generator Blank Starter Theme
• Tailwind Toolbox - Minimalist-Blog
• Fonts. 杨任东竹石体 was used for the banner in the beginning. This font is okay for commercial usage. However, I wonder if it is compatible with GPL MIT, so I replaced it with an exampleFont in the exampleSite. See config.toml.
• And the open, warm-hearted Noto Serif CN. Always a good choice for Chinese words. Under OFL 1.1.
• Beautiful icons made by Remix-Design. Under Apache 2.0.
• fuse.js for fuzzy search, and a blog post (in Chinese) about how to use it.

Thanks.

LICENSE

MIT

See also

• Gruvbox
• Hugoplate
• Bear Cub
• Niello
• Hextra