Mood

Mood is a lightweight, JavaScript-free Hugo theme built for creating moodboards and visual inspiration sites. It takes Markdown content and front matter from Hugo's content directory and renders a clean, responsive static website with minimal inline CSS, optional Cloudinary image optimization, and SEO-ready meta tags. The theme was created by Harry Cresswell and is released under the MIT License.

What is Mood?

Mood is a static site theme for Hugo, a fast static site generator written in Go. As input it uses Hugo content files — Markdown posts with front matter — stored in the content/post folder, and it outputs a fully static HTML website with no JavaScript. The theme is maintained by Harry Cresswell and available on GitHub under the MIT License.

Key Features

• JavaScript-free rendering — Mood ships no JavaScript; all interactivity is handled by HTML and CSS, keeping the page lightweight and fast.
• SCSS development workflow — During local development you can use SCSS source files, and the production build outputs minimal inlined CSS — only about 3 kb.
• Cloudinary image integration — Optional hosting with Cloudinary enables next-gen image formats (WebP and AVIF), immutable image caching, and low-quality image placeholders (LQIP) for perceived performance.
• Netlify Redirects proxying — When deploying to Netlify, the included netlify.toml redirects image requests through Cloudinary using your cloud name.
• Page-specific SEO tags — Each page can set its own meta title and keywords in front matter, and the theme includes Twitter Cards and Facebook Open Graph tags.
• Responsive layout — A clean, simple design that adapts to mobile and desktop screen sizes, scoring 100/100 on Lighthouse.
• Self-hosted image support — Without Cloudinary, you can use Hugo page bundles with image page resources, and Hugo automatically generates responsive images with LQIP placeholders.
• Simple content organization — Posts live in content/post, while standalone pages (like About or Contact) live at the content root; menus are configured in config.toml.

Who is it for?

• Designers and creatives who want to quickly launch a moodboard or visual inspiration site without building from scratch.
• Hugo developers who need a minimal, high-performance theme with no JavaScript and easy image handling.
• Netlify users who want to leverage Cloudinary image proxying and immutable caching via the provided redirects configuration.

What can you do with Mood?

• Create a moodboard: Use the hugo new post/date-title/index.md command to generate posts with the theme's archetype, then add your inspiration images and notes.
• Build a minimal portfolio: Use standalone pages and configure the navigation menu in config.toml to present selected visual work.
• Publish a fast personal blog: The clean layout and about 3 kb of CSS make posts load quickly, and SEO tags help with search visibility.

How does Mood work?

Install Hugo, create a new site, add the mood repository as a git submodule in the themes directory, then move the config.toml, netlify.toml, and assets folder from the exampleSite to your project root. Configure your menu and optionally set your Cloudinary cloud name in netlify.toml and config.toml, then run hugo server or build and deploy to Netlify.

FAQ

Is Mood free to use?

Yes, Mood is released under the MIT License, so you can use, modify, and distribute it freely. The copyright notice credits the author, Harry Cresswell.

Do I need Cloudinary to use Mood?

No. Cloudinary is optional — you can self-host images using Hugo page bundles with image page resources. If you skip Cloudinary, just remove the image field from post front matter and let Hugo handle responsive images and LQIP.

How do I update Mood to the latest version?

From your project root, run git submodule update --remote --merge, then replace your existing assets folder with the one from the theme, commit, and push. You can also pin to a specific release using git tag and git checkout.

Does Mood include JavaScript?

No, Mood is described as JavaScript-free. It relies on HTML and CSS only, which contributes to its light weight and fast load times.