Hugo Themes
Hugo News
A modern, responsive Hugo theme for news and media websites. Built with Tailwind CSS and Alpine.js
- Author: Taylor Ondrey
- GitHub Stars: 0
- Updated: 2025-01-19
- License: MIT
- Tags: Blog Responsive
Hugo News Theme
A modern, responsive Hugo theme designed for news and media websites. Built with Tailwind CSS and Alpine.js.
Features
- π¨ Modern design with Tailwind CSS
- π Built-in search functionality
- π± Fully responsive
- π·οΈ Support for categories, tags, and authors
- πΌοΈ Featured articles with large images
- π Dynamic category browsing
- π₯ Author profiles
- π Search functionality with Fuse.js
- β‘ Fast loading with minimal JavaScript
- π¨ Clean typography and spacing
- π Google Analytics 4 integration
Installation
- In your Hugo site directory, run:
git submodule add https://github.com/professionalaf/hugo-news themes/hugo-news
- Update your
hugo.toml
configuration:
theme = "hugo-news"
Configuration
Google Analytics
The theme includes built-in support for Google Analytics 4 (GA4). To enable tracking:
- Get your GA4 Measurement ID from your Google Analytics account (format: G-XXXXXXXXXX)
- Add it to your site’s config file:
googleAnalytics = "G-XXXXXXXXXX" # Replace with your GA4 measurement ID
The analytics code will:
- Only load when a valid measurement ID is provided
- Respect user privacy settings and cookie consent
- Load asynchronously to not impact page performance
- Track page views and basic user interactions
If you don’t want analytics, simply leave the googleAnalytics parameter commented out:
# googleAnalytics = "G-MEASUREMENT_ID"
Basic Configuration
Example hugo.toml
configuration:
baseURL = 'https://example.org/'
languageCode = 'en-US'
title = 'My Hugo News Site'
[taxonomies]
category = "categories"
tag = "tags"
author = "authors"
[outputs]
home = ["HTML", "RSS", "JSON"]
[[menus.main]]
name = "Home"
url = "/"
weight = 10
[[menus.main]]
name = "Categories"
url = "/categories"
weight = 20
[[menus.main]]
name = "Tags"
url = "/tags"
weight = 30
Content Structure
content/
βββ _index.md
βββ articles/
β βββ first-post.md
β βββ second-post.md
βββ authors/
β βββ _index.md
β βββ john-doe/
β βββ _index.md
β βββ avatar.jpg
βββ categories/
βββ _index.md
Article Front Matter
---
title: "Article Title"
date: 2024-01-01
author: "Author Name"
categories: ["Category1", "Category2"]
tags: ["tag1", "tag2"]
featured_image: "path/to/image.jpg"
description: "Article description"
---
Author Front Matter
---
title: "Author Name"
bio: "Author biography"
avatar: "author-image.jpg"
social:
twitter: "twitterhandle"
linkedin: "linkedinprofile"
---
Comments System
The theme includes two types of comment systems:
Static Comments
Static comments are stored alongside the article content in a comments.json
file. They are visible to all users and persist across sessions. To add static comments:
- Create a
comments.json
file in your article’s directory (next to your article’s markdown file) - Use this structure:
{
"comments": [
{
"name": "Author Name",
"content": "Comment text",
"date": "2024-01-11T15:30:00Z",
"isStatic": true
}
]
}
Example directory structure:
content/
βββ articles/
βββ my-article/
βββ index.md
βββ featured-image.jpg
βββ comments.json
Dynamic Comments
Dynamic comments are stored in the user’s browser localStorage. These comments:
- Only visible to the user who created them
- Persist across page refreshes but only in the same browser
- Are not shared with other users
- Will be cleared if the user clears their browser data
Dynamic comments are automatically handled by the theme’s JavaScript and don’t require any setup.
Development
Requirements:
- Hugo Extended Version (>= 0.116.0)
- Node.js (for Tailwind CSS development)
Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
License
Released under the MIT License.
Credits
- Built with Tailwind CSS
- Interactive components powered by Alpine.js
- Search functionality using Fuse.js