Hugo Toigian

Hugo Toigian is a minimal Hugo theme styled with Tailwind CSS that produces a clean, Rosé Pine-colored blog with light/dark mode and a floating table of contents.

What is Hugo Toigian?

Hugo Toigian is a Hugo theme built on Tailwind CSS and released under the MIT License by Kien Nguyen-Tuan (ntk148v). It accepts standard Hugo content written in Goldmark Markdown and renders it as a minimalist static website, with a top navigation menu, nested heading counters, and a right-side floating TOC. The theme requires Hugo extended v0.93.0 or higher and uses Hugo Pipe's PostCSS pipeline to compile Tailwind CSS.

Key Features

• Tailwind CSS styling: The theme's styles are built with Tailwind CSS and compiled via Hugo Pipe's PostCSS, requiring postcss-cli and autoprefixer in the environment.
• Rosé Pine color palette: Uses the classy minimalist Rosé Pine palette throughout the UI, and the author contributed Rosé Pine styles to Chroma for matching syntax highlighting.
• Light/dark mode: Supports switching between light and dark themes with a built-in toggle.
• Floating table of contents: A side-floating TOC appears on pages and can be toggled with the toc parameter; heading levels are set via markup.tableOfContents.
• Nested counters for headings: Post headings are automatically numbered with nested counters (e.g., 1, 1.1, 1.1.1).
• Comments support: Disqus comments are integrated; set disqusShortname in site config, and override per page with comment in front matter.
• Customization partials: Empty partials (custom/head.html, custom/content-before.html, custom/content-after.html) and a font.html partial let you inject custom code without editing the theme.
• Useful shortcodes: The theme includes shortcodes documented on its demo site (https://ntk148v.github.io/hugo-toigian).

Who is it for?

• Bloggers who want a fast, keyboard-friendly publishing setup for long-form articles.
• Hugo users who prefer a minimal aesthetic without heavy JavaScript.
• Developers learning to combine Hugo with Tailwind CSS through PostCSS.
• Non-front-end developers who want a simple, themeable starting point (as the author explicitly says).

What can you do with Hugo Toigian?

• Publish a personal blog: Write Markdown posts, set tags in front matter, and get syntax-highlighted code blocks and optional Disqus comments.
• Build a minimal portfolio or landing page: Use the About page and top navigation to present yourself with only essential sections.
• Customize fonts and styles: Override the default Inconsolata font by adding a custom font.html partial and editing assets/css/custom.css.
• Study a real Hugo + Tailwind integration: Use this repo as a reference for setting up Tailwind, PostCSS, and Chroma highlighting in Hugo.

How does Hugo Toigian work?

Install it by adding the theme as a git submodule, running npm install inside the theme directory, and setting theme = "hugo-toigian" in your config file. Then run hugo server -DF --disableFastRender for development or hugo --environment production --minify to build static files. The theme relies on Chroma for server-side syntax highlighting and PostCSS for Tailwind compilation.

Pricing

Hugo Toigian is free and open-source. The exact license displayed is MIT, so you can use it in personal and commercial projects without cost.

Alternatives

• Hugo Book: a Hugo theme with a book-like layout and a sidebar, which the author credits as inspiration.
• dirkolbrich/hugo-tailwindcss-starter-theme: a starter theme demonstrating how to wire Hugo with Tailwind CSS, also credited.

FAQ

Is Hugo Toigian free?

Hugo Toigian is free and open-source software released under the MIT License. You can download, modify, and use it for any project, including commercial ones, with no fee.

What Hugo version do I need?

You need the "extended" build of Hugo v0.93.0 or higher, plus git and npm. Because the theme uses Hugo Pipe's PostCSS, you also need to install postcss-cli and any plugins like autoprefixer (globally or locally in your site directory).

How do I enable comments?

Comments use Disqus. Add disqusShortname = "your-shortname" to your site configuration, and the theme will load the Disqus partial on all pages unless you set comment = false in a page's front matter.

Does it support syntax highlighting?

Yes. Hugo Toigian uses Hugo's built-in Chroma highlighter, with Rosé Pine styles added upstream, so code blocks render in the same color scheme with no JavaScript needed.

How can I change the default font?

Create a layouts/partials/font.html file to import your preferred fonts, and then define --font-mono and --font-serif CSS variables in assets/css/custom.css to override the theme's defaults.