Hugo FortyTen is a minimalist, responsive blog theme for Hugo built with Tailwind CSS, offering dark mode, client-side full-text search, and multilingual support. It is maintained by marcelorodrigo on GitHub.
What is Hugo FortyTen?
Hugo FortyTen is a Hugo theme designed for blogging. It takes your Hugo site content written in Markdown, along with configuration in a hugo.yaml file, and produces a static website. It requires Hugo Extended v0.161.0 or newer because it uses the new css.TailwindCSS processing pipeline. The theme also needs Node.js v20 or newer to install Tailwind CSS CLI via npm. It is open source and free to use.
Key Features
- Dark mode — Automatic or manual theme switching with persistent user preference, implemented with Alpine.js.
- Full-text search — Client-side fuzzy search that works without a server, including keyboard navigation.
- Responsive design — Mobile-first layout that adapts to phones, tablets, and desktops.
- Localization (l10n) — Multi-language support ready for international blogs.
- Shortcodes — Custom components for icons, iframes, and Strava activity embeds.
- Related posts — Recommends related content based on shared tags.
- Tag taxonomy — Organize posts by tags and filter content automatically.
- SEO optimized — Meta tags, structured metadata, and sitemap support included.
The tech stack pairs Hugo (static site generator) with Tailwind CSS for styling, including the @tailwindcss/typography plugin for prose. Alpine.js provides lightweight interactivity without a heavy JavaScript framework.
Who is it for?
- Web developers who want a clean, fast Hugo blog with a modern CSS workflow and minimal JavaScript.
- Multilingual bloggers who need built-in localization instead of manually maintaining separate sites.
- Outdoor and fitness bloggers who want to embed Strava activity data using the theme's dedicated shortcode.
What can you do with Hugo FortyTen?
- Technical bloggers: Write Markdown posts and publish a static site with fuzzy search and tag-based navigation.
- International writers: Publish the same content in multiple languages with built-in i18n support.
- Athletes: Embed Strava rides and runs directly inside posts with the custom shortcode.
How does Hugo FortyTen work?
Installation follows a standard Hugo theme workflow. First clone the repository into your themes directory, then set theme: "hugo-fortyten" in your hugo.yaml file. After installing npm dependencies (tailwindcss, @tailwindcss/cli, and @tailwindcss/typography), run hugo server for development and hugo --minify for production builds.
FAQ
Does Hugo FortyTen require Hugo Extended?
Yes, it requires Hugo Extended v0.161.0 or newer because it uses css.TailwindCSS for Tailwind processing. The standalone Tailwind binary is no longer supported.
Does Hugo FortyTen support multi-language sites?
Yes, the theme includes localization (l10n) support, making it ready for multilingual blogs without extra configuration.
Is Hugo FortyTen free?
Yes, it is open source and free to use, released under an open-source license.
What integrations does Hugo FortyTen include?
The theme integrates Alpine.js for front-end interactivity and includes shortcodes for icons, iframes, and Strava embeds. There is no built-in CMS or analytics integration.
