Hugo W3 Simple is a minimal Hugo theme by Jesse Lau that uses W3.CSS to produce fast, responsive static sites with code highlighting, search, and multilingual support.
What is Hugo W3 Simple?
Hugo W3 Simple is a lightweight theme for the Hugo static site generator, created by Jesse Lau to be genuinely minimal while including W3.CSS. As input it takes standard Hugo content files—Markdown pages placed in content folders with optional language subfolders—and outputs a fully static website with a responsive grid or list layout. The theme also outputs an XML file for Sphinx or Manticore search indexing. It is released under the MIT License and its example site ships with both English and Chinese versions.
Key Features
- W3.CSS styling — The theme bundles W3.CSS, a small and fast CSS framework, keeping the base stylesheet lightweight and mobile-responsive.
- Code highlighting — Uses W3 code color JS, a small and fast code highlight solution, instead of a heavier highlighter.
- Search integration — Outputs an XML file that can be indexed by Sphinx or Manticore search; a live server-side search demo works on jesselau.com, but the example site cannot include search without server-side setup.
- Comment systems — Supports both Disqus and isso comment systems, selectable from the config file.
- Post listings — Offers three styles: alllist, grid style, and simple list style; the all-posts page renders a filterable, sortable, and responsive table powered by w3.js.
- Performance tools — Includes lazy loading for images (one demo page dropped from 854 KB to 524 KB and load time from 3.5s to 2.8s after enabling it), a scroll indicator, and a back-to-top button on scroll.
- Multilingual support — Posts are placed in a content folder per language code; the example site includes English and Chinese versions.
- Monetization and analytics — Integrates Google Analytics, Google AdSense autoads, One Signal push notifications, cookie law support, and an adblock detector that displays an allow-ads notice when users scroll past 2000px.
Who is it for?
- Bloggers and content creators who use Hugo and want a minimal theme with built-in code highlighting, comments, and social sharing without adding heavy dependencies.
- Developers building documentation sites can use the Sphinx or Manticore search output to integrate server-side search.
- Multilingual site owners can manage content in multiple languages using the language-code folder structure.
- Performance-conscious publishers can enable lazy loading and benefit from the small W3.CSS footprint to keep page weight low.
What can you do with Hugo W3 Simple?
- Set up a blog quickly — Clone the theme into your Hugo themes folder, edit the example config.toml, and publish posts with grid or list layouts.
- Add search to your static site — Create a search index page with a content file, and the theme outputs an XML file for indexing; then wire it to Sphinx or Manticore server-side.
- Monetize your blog — Enable Google AdSense autoads, cookie law notices, and the adblock detector with allow-ads notice.
- Support multiple languages — Place posts in content folders named by language code and the theme will render them with language switcher.
How does Hugo W3 Simple work?
Installation is straightforward: from the root of your Hugo site, run cd themes and git clone https://github.com/jesselau76/hugo-w3-simple.git, then edit the example config.toml from the examplesite folder. To use search, create a content/{langcode}/search/index.md file; to use the all-posts table, create content/{langcode}/allposts/_index.md. Update the theme later by pulling the repository with git pull.
Pricing
Hugo W3 Simple is free and open source, released under the MIT License.
Alternatives
- Hugo Xmin — a minimal Hugo theme by Yihui Xie, acknowledged as an inspiration.
- Even — a Hugo theme that contributed to the creation of W3 Simple.
- Mediumish — a Medium-style Hugo theme that also influenced W3 Simple.
FAQ
Is Hugo W3 Simple free?
Yes, Hugo W3 Simple is released under the MIT License, and you can use, modify, and distribute it freely, including in commercial projects.
How do I install Hugo W3 Simple?
Clone the repository into your Hugo site's themes folder with git clone https://github.com/jesselau76/hugo-w3-simple.git, then copy and edit the example config.toml from the examplesite folder.
Does Hugo W3 Simple support multilingual sites?
Yes. The theme supports multilingual mode; you put posts in ./content/{langcode}/ folders, and the example site includes both English and Chinese versions.
How does the search function work?
The theme outputs an XML file that can be indexed by Sphinx or Manticore search. Because search requires server-side indexing, the example site cannot demonstrate it; the live search demo on jesselau.com shows the result.
Which comment systems are supported?
The theme supports both Disqus and isso comment systems; you select one in the config file.
