Hugo News Theme is a responsive Hugo theme for news and media websites, built with Tailwind CSS, Alpine.js, and Fuse.js for search.
What is Hugo News Theme?
Hugo News Theme is a free, open-source Hugo theme that transforms Markdown content into a modern news site. It expects Hugo content files with front matter for titles, authors, categories, and tags, and outputs a static HTML site with responsive layouts, a search index, and author pages. The theme runs on Hugo Extended version 0.128.0 or higher and requires Node.js 18.0.0 or higher to compile Tailwind CSS via PostCSS. The theme is developed and maintained by the GitHub user professionalaf under the MIT license.
Key Features
- Tailwind CSS styling — The entire UI is built with Tailwind CSS, processed through PostCSS and Autoprefixer, with minified and fingerprinted output in production.
- Alpine.js interactions — Interactive components such as mobile menus and comment forms are powered by Alpine.js, bundled through Hugo's asset pipeline.
- Fuse.js search — Built-in client-side search with fuzzy matching, so visitors can search articles without a third-party service.
- Taxonomies for categories, tags, and authors — Content can be organized with all three taxonomies, each generating their own listing pages via Hugo's taxonomy system.
- Featured articles — Front matter supports a featured_image field to surface large-image article cards on the homepage.
- Google Analytics 4 integration — GA4 loads asynchronously only when a measurement ID is set, and respects cookie-consent and privacy settings.
- Two comment systems — Static comments stored in a per-article comments.json file that all visitors see, plus dynamic comments saved to browser localStorage that only the author of that browser can view.
- Responsive layout — The theme is fully responsive, adapting the news layout from desktop to mobile screens.
Who is it for?
- Independent news publishers — Build a fast, static news site with categories, tag archives, and author bylines without managing a database or CMS.
- Media and content teams — Use the author profile system and featured-article cards to structure a magazine-style homepage and section pages.
- Hugo developers — Start a news-themed project quickly with a ready-made Tailwind + Alpine.js pipeline, npm scripts for dev and production builds, and GitHub Actions testing.
- Bloggers — Turn a personal blog into a news-style publication with search, comments, and Google Analytics built in.
What can you do with it?
- Launch a news site — Publish articles as Markdown files, set categories and tags, and the theme generates homepage sections, category browsing, and tag pages.
- Create author profiles — Add authors under the authors taxonomy with bio, avatar, and social links such as Twitter and LinkedIn so every article links to a profile page.
- Let readers comment — Enable static comments by placing a comments.json file next to an article, or let visitors leave browser-local dynamic comments with no server setup.
- Add site search — Provide visitors with instant fuzzy search across all posts using Fuse.js, with a search UI included in the theme.
How does Hugo News Theme work?
Installation is a three-step process: clone or submodule the theme into the themes directory, run npm install inside the theme folder to build Tailwind and PostCSS assets, then set theme to "hugo-news" in the site's hugo.toml. Content is organized into articles, authors, and categories directories; each article's front matter controls its featured image, category, tags, and author. Development and production builds run through the included npm scripts (npm run dev and npm run build), and the theme's GitHub Actions workflow tests builds across multiple Hugo versions.
FAQ
What are the system requirements for Hugo News Theme?
Hugo News Theme requires Hugo Extended version 0.128.0 or higher for PostCSS support, and Node.js version 18.0.0 or higher to process Tailwind CSS and Alpine.js assets. Without these, the theme's CSS and JavaScript cannot be compiled.
Does Hugo News Theme include search?
Yes, search is built in and powered by Fuse.js. It runs entirely client-side, so there is no external search service or API key required. The search works over the site's generated content index.
How do comments work in Hugo News Theme?
The theme supports two types of comments: static comments, which are stored in a comments.json file in the article's folder and are visible to all visitors, and dynamic comments, which are stored in the user's browser localStorage and are only visible to that user on that browser.
Does the theme support Google Analytics?
Yes, the theme includes Google Analytics 4 integration. Adding a GA4 measurement ID to the site configuration enables asynchronous analytics that tracks page views and basic interactions, and the analytics code only loads when a valid ID is present.
Is Hugo News Theme free to use?
Yes, the theme is open source and released under the MIT License. It can be used for personal or commercial news and media projects without licensing fees.
