Hugo Dark Noir | Demo

🌑 Dark | 🔍 Minimalist | 📱 Responsive | ⚡ Fast

Dark Noir is a clean, minimalistic theme for Hugo with a focus on readability and simplicity.

Screenshots 📸

Homepage view with minimalist design and dark mode

Blog post view with optimal readability

Contact page with social media links and clean layout

Experience page showcasing professional background with statistics

Projects page displaying work with technology tags and descriptions

Blogs page displaying blogs with tags and a short descriptions

Features 💥

• Clean Design: Minimalist aesthetic for distraction-free reading
• Responsive Layout: Perfect viewing experience across all devices
• Dark Mode Support: Easy on the eyes, especially in low-light environments
• Tailwind CSS: Modern utility-first CSS framework for styling
• Fast Performance: Optimized for speed with minimal JavaScript
• SEO-Friendly: Built with search engines in mind, including Open Graph tags
• Blog-Ready: Perfect for personal blogs and portfolios
• No Dependencies: No webpack, nodejs or other dependencies required to edit the theme
• Social Icons: Easy configuration for social media links
• Custom Styling: Simple customization through CSS variables
• Featured Content: Support for featured posts on the homepage
• Tech Stack Carousel: Showcase your skills with a smooth, interactive tech stack carousel
• Single Page Portfolio: Everything in one place - about, experience, projects, and contact sections
• Inline SVGs: Uses inline SVG icons for faster loading and better performance
• Mobile-First Design: Fully optimized for mobile devices with touch-friendly interactions
• Local Clock: Real-time clock display using minimal JavaScript for accurate time

Install/Update 📥

Option 1: Clone Repository

# From your Hugo site directory
git clone https://github.com/prxshetty/hugo-noir themes/hugo-noir

Option 2: Add as a Git Submodule

# From your Hugo site directory
git submodule add https://github.com/prxshetty/hugo-noir themes/hugo-noir

Then, add the following to your site’s config.toml:

theme = "hugo-noir"

Requirements ⚙️

• Hugo Extended version
• Minimum version: 0.92.0

Configuration ⚙️

This theme supports a variety of configuration options in your hugo.toml (or config.toml) file. Below is an example configuration with explanations:

Basic Configuration

baseURL = "https://example.com"
languageCode = 'en-us'
title = 'Your Name'
theme = 'hugo-noir'

# URL handling
relativeURLs = true
canonifyURLs = true

# Taxonomy configuration
[taxonomies]
  category = "categories"
  tag = "tags"

Personal Information

[params]
name = "Your Name"
location = "City, Country"
description = "Your bio goes here..."
profile_image = "/images/profile.jpg"

# Social Media Links
github = "https://github.com/yourusername"
email = "your.email@example.com"
twitter = "https://twitter.com/yourusername"
linkedin = "https://linkedin.com/in/yourusername"
instagram = "https://instagram.com/yourusername"

Social Icons

You can configure social icons that appear in the footer:

[params.socialIcons]
github = "https://github.com/yourusername"
twitter = "https://twitter.com/yourusername"
linkedin = "https://linkedin.com/in/yourusername"
instagram = "https://instagram.com/yourusername"
email = "mailto:your.email@example.com"

Experience Section

[[params.experience]]
company = "Company Name"
role = "Your Role"
period = "Jan 2023 - Present"
logo = "/images/company/logo.png"
description = "Brief description of your role and responsibilities."
responsibilities = [
    "Responsibility 1 with specific achievements",
    "Responsibility 2 with specific achievements",
    "Responsibility 3 with specific achievements"
]

# For open source contributions
[[params.experience]]
company = "GitHub"
role = "Open Source Contributor"
period = "Jan 2023 - Present"
description = "Contributing to open source projects"
github_username = "yourusername"

Projects Section

[[params.projects]]
title = "Project Name"
description = "Brief description of the project and what it does."
tech = "Technologies used (e.g., Python, React, TensorFlow)"
image = "/images/projects/project.png"
link = "https://github.com/yourusername/project"

Blog Posts

[[params.blogs]]
title = "Blog Post Title"
date = "2023-01-15"
summary = "Brief summary of what the blog post is about."
tags = ["tag1", "tag2", "tag3"]
content = """
Short excerpt or introduction to the blog post...
"""
link = "https://yourblog.com/post-url"

Featured Content

You can mark certain content as featured to display it prominently on the homepage:

[[params.blogs]]
title = "Featured Blog Post"
date = "2023-01-15"
summary = "This post will be featured on the homepage."
tags = ["tag1", "tag2", "tag3"]
featured = true
link = "https://yourblog.com/featured-post"

Navigation Menu

[menu]
  [[menu.main]]
    name = "About"
    url = "/about/"
    weight = 1
  [[menu.main]]
    name = "Experience"
    url = "/experience/"
    weight = 2
  [[menu.main]]
    name = "Projects"
    url = "/projects/"
    weight = 3
  [[menu.main]]
    name = "Blogs"
    url = "/blogs/"
    weight = 4
  [[menu.main]]
    name = "Contact"
    url = "/contact/"
    weight = 5

Content Structure 📁

The theme expects the following content structure:

content/
├── _index.md          # Homepage content
├── about.md           # About page
├── experience.md      # Experience page
├── projects.md        # Projects page
├── blog.md            # Blogs Page
└── contact.md         # Contact page

Each page can use front matter to customize its appearance and behavior.

Front Matter Examples 📝

Blog Post

---
title: "My First Post"
date: 2023-03-15T10:30:00+05:30
draft: false
tags: ["hugo", "web development"]
categories: ["tutorials"]
description: "A detailed description of the post for SEO and previews"
featured_image: "/images/post-cover.jpg"
featured: false  # Set to true to feature this post on the homepage
---

Static Page

---
title: "About Me"
date: 2023-03-15T10:30:00+05:30
draft: false
menu: "main"
description: "Learn more about me and my background"
---

Customization 🎨

Custom CSS

You can customize the theme by modifying the following files:

• assets/css/custom.css: Add your custom CSS styles here
• assets/css/variables.css: Modify theme variables like colors and fonts

Custom Icons

You can add custom icons to your site by using SVG icons. SVGs are preferred because they’re lightweight, scalable, and render crisply on all devices without losing quality.

You can find free SVG icons at these popular sites:

• Font Awesome
• Feather Icons
• Heroicons
• Simple Icons (great for brand/tech stack icons)
• Devicon (specifically for programming languages and tools)

I included it inline in the HTML for better performance and speed.

Example of custom CSS:

/* assets/css/custom.css */
.site-header {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post-title {
  font-size: 2.5rem;
  color: var(--primary-color);
}

Example:

// assets/js/custom.js
document.addEventListener('DOMContentLoaded', function() {
  console.log('Custom JavaScript loaded');
  
  // Your custom code here
});

HTML Templates

For more advanced customization, you can override the theme’s templates by creating your own versions in your site’s layouts directory:

• layouts/_default/single.html: Override the default single page template
• layouts/_default/list.html: Override the default list template
• layouts/partials/header.html: Override the header partial

FAQs 🙋

Coming soon…

Performance ⚡

Dark Noir is designed with performance in mind, ensuring fast loading times and a smooth user experience.

Support 🫶

• Star 🌟 this repository
• Share it with others who might find it useful
• Report issues or suggest improvements

Special Thanks 🌟

• Hugo
• Tailwind CSS
• All contributors and supporters

License 📄

This theme is released under the MIT License.

See also

• Hugoplate
• congo
• Blowfish
• Blonde
• TailBliss