Aether

Aether is a Hugo theme for blogs that uses motion, depth, and material as design elements to present photography and writing in a clean, fast interface.

What is Aether?

Aether is an open-source Hugo theme for blogs created by Joe Hutchinson, designed around the principles of motion, depth, and material. It takes Hugo site content — Markdown posts with front matter — and renders a responsive static website with automatic category pages, WebP image optimization, and optional LaTeX math support. The theme runs on the Hugo static site generator and is configured through a config.toml file. Aether is released under the MIT license.

Key Features

• Performance — PageSpeed scores between 94 and 100 out of 100.
• Responsive design — The layout adapts to screens of any size.
• WebP image optimization — The image and smallimg shortcodes generate resized, WebP-format images with intrinsic dimensions to minimize layout shift; regular Markdown images are also processed via Hugo render hooks.
• Accessibility — Screen-reader-friendly navigation and semantic HTML are prioritized.
• Automatic category pages — Posts grouped by the categories front matter parameter are listed on auto-generated pages linked from the menu.
• Syntax highlighting — Highlight.js integration covers most programming languages and file formats; the default style is configurable, with igor recommended.
• Math typesetting — LaTeX equations can be added to posts using the raw shortcode, with KaTeX referenced in the documentation.
• Integrations — Google Analytics and Disqus are configured in config.toml; footer social icons are available for Facebook, Flickr, GitHub, Instagram, LinkedIn, Patreon, SoundCloud, Spotify, Tumblr, Twitch, Twitter, Vimeo, and YouTube.

Who is it for?

Aether is for bloggers, photographers, and technical writers who want a fast, accessible Hugo site. Bloggers can manage posts with Hugo's content workflow, setting displayInMenu and displayInList to control where each post appears. Photographers can take advantage of the WebP-optimized shortcodes and a design that highlights imagery. Technical writers can embed code with syntax highlighting and LaTeX math. Developers can customize the theme further by overriding CSS in assets/css/override.css and adding custom meta tags.

What can you do with Aether?

• Start a personal blog — Create posts with hugo new post/name/index.md, add a description and featured image, and group related posts into categories.
• Build a photography portfolio — Use the image and smallimg shortcodes with smartfloat and width parameters to place optimized images anywhere in a post.
• Write technical articles — Include code blocks with configurable syntax highlighting and LaTeX equations via the raw shortcode.
• Customize the site header — Set a brand name, background image via bgimg, and a headshot image with alt text for the home page.

How does Aether work?

To install, clone the repository into your Hugo project's themes directory, set theme = "aether", and fill in the required title and locale parameters plus optional service and social settings in config.toml. Create posts as page bundles, and add the optional featuredImage resource to each bundle. Aether automatically generates category pages from front matter, and you can adjust list page headings by adding a _index.md file.

FAQ

Is Aether free?

Yes, Aether is open source and released under the MIT license, so you can use it for personal or commercial projects, modify it, and redistribute it.

What image shortcodes does Aether offer?

Aether includes image and smallimg shortcodes. image generates a responsive, WebP-optimized image with intrinsic dimensions, while smallimg adds smaller images with optional floating via smartfloat, pixel width, and clear parameters.

How do I add comments or analytics?

In config.toml, set [services.disqus] with your shortname for Disqus comments, and [services.googleAnalytics] with your measurement ID for Google Analytics. Both are optional.

Which syntax highlighting style should I use?

The documentation recommends igor as the Highlight.js style because the default style does not look great with Aether. You can choose any style from the Splash list and configure further options in Hugo's markup settings.

Can I add custom meta tags?

Yes, create layouts/_partials/meta-tags.html in your site to add custom meta tags. Aether includes Hugo's embedded Open Graph, Twitter Card, and schema metadata partials by default.