Features

SEO and Social Media features include Article sharing via Facebook and Twitter (without heavy Javascript libraries), Google Structured Data ld+json with a full Schema.org Article fieldset, Open-Graph tags, Serverless CDN support (Netlify, Vercel), Asset CDN support (Cloudinary) with image transformations for responsive images, ATOM feed Syndication XML format, asset preloading, third-party prefetching, SVG icons, syntax highlighting with Chroma, custom 404 error page, custom CSS/JS support, and a full Multilingual implementation. Built with Tailwind CSS, Alpine JS, and an NPM Scripts (task-runner-free) build process, the Axiom Hugo theme is feature packed.

Modularity (DRY-er Content)

Axiom leverages Hugo's Headless Resource feature which allows you to separate pieces of Content into Snippets or Components (essentially "Content Partials"). Combined with Axiom's Shortcodes, a high degree of modularity is possible.

The Home (/content/home/) and Snippets (/content/snippets/) Content directories are examples of this modular approach. Any type of Content can be pulled into your Pages and Posts using this pattern. See the Homepage build for an example (link in Homepage section below).

Extendable

Axiom is customizable in almost every way including Custom CSS, Javascript, and Syntax Highlighting. Visit the Extending page to learn more.

Shortcodes

Axiom comes with several powerful Shortcodes which allow you to add complex HTML elements to your Content files. Visit the Shortcodes page to learn more.

Homepage

Axiom's Homepage is a modular design without any layout applied, in essence, it's a blank slate. This allows you to build up a bespoke Homepage. Shortcodes make it easy to construct a Homepage with blocks and widgets.

The Example website Homepage shows a common configuration and can be used as a starting point.

CDNs, Serverless

Axiom has support for Cloudinary CDN built in, and is serverless ready (Netlify, Vercel).

Disqus Comments

Disqus commenting is available on all Section's Single page view. Comments are on by default if you set a Configuration Services disqusShortname value. Comments can be turned off an a post-by-post basis by using the Frontmatter comments variable and setting it to false.

Archetypes

Axiom includes helpful Content generators to quickly create new Section entries. Visit the Archetypes page to learn more.

Frontmatter

Fine tune individual Content entries with Axiom's custom Frontmatter fields. Visit the Frontmatter page to learn more.

Markdown Styling

Axiom has a very advanced CDATA CSS file. It has high specificity and only affects the direct children of the parent element with the class="cdata" attribute.

All Markdown content in the Content directory automatically gets styled with the cdata styles. When using Shortcodes or building out the Homepage, you can use the cdata class to style content using those rules.

Why cdata? CDATA means "character data" in SGML. Many themes use a class name like "markdown" or "mdown" for this purpose, but we feel it's too limiting and doesn't consider other future syntax that may serve the same use as Markdown does now. CDATA is just a way for us to know it's unstyled bare HTML, that needs CSS styles based on element names instead of class names.

Syntax Highlighting

Axiom uses Hugo's built-in syntax highlighting powered by Chroma. You can choose between Axiom's built-in dark and light color schemes, or provide your own bespoke color scheme. Highlighting CSS is inlined for performance. Additionally, you can turn it off completely, such as when you want to use a third-party Javascript library.

Authors

Axiom supports Authors for your Content pieces. You can set individual Author contact data and profile images. To configure Authors, edit the Authors data file (/data/author.toml) and output and Author profile image locally or on a CDN. Recommended size is 256x256 pixels.

See the Hugo Data File Documentation for more information.

Typography

Rich typography is one of the best ways to distinguish your website apart from the crowd. Axiom's Custom Typography feature allows you to specify as many font families and files as desired. Each file will be preloaded to speed up website performance. Visit the Extending page to learn more.

Sharing

Axiom is configured to allow users to share your content via Facebook and Twitter. The implementation uses non-Javascript library techniques, so your website speed won't be slowed down.

For Twitter sharing, set the Author's Twitter username in the Author's Data file. For Facebook sharing, set the website's Facebook App Id in the Services Config (params.services facebookApp) option.

ATOM Feed

Axiom uses an ATOM syndication feed format which includes full post content in each entry.

If set in the Image Config (params.image icon1To1 and icon2To1), an icon and logo element will be added to the Feed output.

Services

Google Analytics: Collect data with Google Analytics.

Google Ads: Collect data and track conversions with Google Ads.

Google Adsense: Axiom is ready for Ads if you choose to serve them. There is a single responsive Ad Slot at the bottom of all Section Content.

If you set an Adsense Id in the Services Config (params.services adsenseId), Ads will be activated, otherwise all Ads related Javascript and code will not be output. Be sure to also set your adsenseAdSlotId.

Setting the adsenseLoad to "defer" or "lazy" will delay the loading of the Javascript to enhance page speed. The "lazy" option uses a timeout, while "defer" only replaces the "async" attribute.

Facebook: Collect data, and share Content with Facebook.

If you set a Facebook Pixel Id in the Services Config (params.services facebookPixel), a lightweight pixel tracker will be activated, otherwise all related Javascript and code will not be output. If you set a Facebook App Id in the Services Config (params.services facebookApp) it will be used for Open-Graph tags and in Content Sharing.