Noesis

Noesis is an open-source Hugo theme for photocentric blogging, built by Joe Hutchinson, that creates a fast, responsive static site with WebP-aware image handling and automatic category listings. Published on GitHub under the MIT license, it targets blogs that pair strong writing with photography and prefer the simplicity of a static site generator.

What is Noesis?

Noesis is a Hugo theme that converts your markdown content and TOML configuration into an accessible static blog site. Running on Hugo version 0.157.0 or later, it takes blog posts written in markdown, page-bundle images, and front-matter metadata and outputs HTML with WebP-optimized responsive images, category pages, and supported social and SEO tags. The theme was developed by Joe Hutchinson and is distributed as a theme folder that you clone into your Hugo project.

What makes Noesis stand out?

• Performance — The theme reports PageSpeed scores consistently between 94 and 100, a result of static generation and compressed image output.
• Responsive image pipeline — Render hooks and shortcodes resize page-bundle images, produce WebP sources with a fallback, and embed intrinsic dimensions to reduce layout shift.
• Built-in accessibility — Screen-reader friendly navigation and semantic HTML are priorities for the theme.
• Category taxonomy — Posts tagged with front-matter categories are automatically grouped into listing pages that appear in the site menu.
• Syntax highlighting — Hugo and Chroma style code blocks for most programming languages, configured via a markdown highlighter option in config; the default Chroma style is "evergarden".
• Math support — LaTeX equations can be embedded through the raw shortcode, and the documentation links to KaTeX-powered math typesetting references.
• Social rail and favicon coverage — Optional site params generate icon links for more than 20 platforms such as GitHub, LinkedIn, YouTube, Spotify, and X in a homepage rail and footer; favicon files for common formats are supported by adding correctly named files to the static folder.

Who should use Noesis?

• Photographer-bloggers — Publish image-heavy posts that get resized and converted to WebP automatically, and use the featuredImage resource for post cards.
• Essayists and long-form writers — Present clean reading lists, category archives, and per-post table-of-contents without visual clutter.
• Developers who use Hugo — Extend or override layouts and CSS through project-level asset files, and use the same static pipeline they already know.

What can you do with Noesis?

• Publish a portfolio-style blog — Combine a homepage hero with profile metadata and an "about" rail, then feed a front-page post list via the mainSections config.
• Group related articles automatically — Add categories like "Travel" or "Reviews" in front matter, and the theme generates menu-accessible category pages that aggregate matching posts.
• Share across social networks — Configure email and up to 20 social profiles in hugo.toml, with icons recolorable for dark mode because they are rendered as CSS masks.

How does Noesis work?

Clone the repository into the themes directory of your Hugo project, then set the theme in hugo.toml. Site-level branding, navigation, profile, socials, and integrations are all configured in that TOML file, while posts are created with hugo new posts/postname/index.md, followed by adding front matter like categories, featured image resources, and display options. The theme reads this content and builds the static HTML site via the regular hugo command.

Frequently asked questions

Does Noesis work with older Hugo versions?

No, the theme requires Hugo 0.157.0 or later because it relies on current Hugo features for image pipelines and configuration.

How do I install Noesis?

Run a git clone of the noesis repo into the themes directory of your Hugo project, for example git clone https://github.com/josephhutch/noesis.git themes/noesis, then set theme = "noesis" in your project config.

Is Noesis free to use?

Yes, the theme is open source under the MIT license, so you can use and modify it freely, and bundled third-party frontend assets are listed in THIRD_PARTY_NOTICES.md.

How can I change the background image?

Set the backgroundImage parameter under appearance in hugo.toml to a path inside your project's assets folder. If no background image is defined, the theme falls back to a solid gray background.

Does Noesis support comment systems?

It integrates Disqus by setting the shortname under the services section of hugo.toml. Google Analytics is supported in the same services block.