neonote

Sleek Minimalist Hugo Theme 🎨✒️

neonote in action

neonote is a Hugo theme that allows bloggers and developers to create beautiful, minimalist websites with modern features.

✨ Features

• Modern Grid Layout - Responsive design using CSS Grid
• Dark/Light Theme Toggle - Automatic theme switching with user preference
• Table of Contents - Auto-generated TOC for long articles
• Tag Cloud - Visual tag representation with size-based popularity
• Site Search - Powered by Stork for fast client-side search
• Syntax Highlighting - Beautiful code blocks with copy functionality
• Math Support - KaTeX and MathJax integration
• Archive Page - Organized content by year and date
• Hugo Modules Support - Easy installation and updates
• Custom Shortcodes - Tips blocks, plists, and more
• SEO Optimized - Meta tags, structured data, and performance
• Resource Optimization - Preconnect, prefetch, and critical CSS inlining

⚡ Setup

⚙️ Requirements

• Hugo >= 0.149 (Extended version recommended)
• Git

💻 Installation

Installing neonote is as simple as adding it to your Hugo site!

Option 1: Hugo Modules (Recommended)

# Initialize Hugo modules in your site root
hugo mod init github.com/<your_user>/<your_project>

# Add to your config.toml
[module]
  [[module.imports]]
    path = "github.com/2kabhishek/neonote"

Option 2: Git Submodule

git submodule add https://github.com/2kabhishek/neonote.git themes/neonote

# Add to your config.toml
theme = "neonote"

🚀 Usage

# Start development server
hugo server

# Build site
hugo

# Update theme (if using modules)
hugo mod get -u github.com/2kabhishek/neonote

Configure the theme by editing your config.toml. Check config.toml for a complete example.

🏗️ What's Next

Planning to add RSS improvements, better mobile experience, and more customization options.

✅ To-Do

You tell me!

🧑‍💻 Behind The Code

🌈 Inspiration

I needed a theme for my blog, that's it :)

💡 Challenges/Learnings

• The main challenges were balancing minimalism with functionality and ensuring cross-browser compatibility.
• Got to learn a ton of things about the hugo ecosystem.

🧰 Tooling

• dots2k — Dev Environment
• nvim2k — Personalized Editor

🔍 More Info

• My Blog — Where I am using neonote
• hugo-notepadium — Original theme inspiration
• hugo-notepadium-mod — Modified version
• Stork — Search functionality
• Hugo Documentation — Static site generator

---

⭐ hit the star button if you found this useful ⭐

Source | Blog | Twitter | LinkedIn | More Links | Other Projects