Classless Blog is a minimal Hugo theme for blogs that outputs standard semantic HTML with no JavaScript or custom CSS, relying on classless CSS frameworks like Water.css for visual styling.
What is classless-blog?
classless-blog is a Hugo theme created by Kaligule (Johannes Lippmann) that turns Markdown content into a lightweight, responsive blog front-end. It takes posts organized as Hugo page bundles and renders them as plain semantic HTML, leaving all visual styling to an optional classless CSS framework. The repository includes an exampleSite, a demo deployed to GitLab Pages, and a GitLab CI pipeline for automated deployment.
Key Features
- No JavaScript or custom CSS — The generated pages contain only standard HTML elements, making the theme fast, accessible, and compatible with every classless stylesheet.
- Classless CSS framework support — Style the blog by linking Water.css, Classless.css, Sakura, Marx, AtriCSS, or any other classless framework through the
stylesheetUrlconfig parameter. - Two integration methods — Add a stylesheet remotely via
stylesheetUrlinconfig.tomlorconfig.yaml, or place a downloaded file atstatic/css/stylesheet.css; the local file takes precedence. - Cover image support — Add a cover image to any post by specifying an
imagefield in front matter, using Hugo page bundles. - Privacy friendly — No tracking, analytics, or third-party scripts are included by default, and styling can be fully self-hosted.
- GitLab Pages ready — The
.gitlab-ci.ymlfile automates building and deploying the site to GitLab Pages. - Example site — The
exampleSitedirectory shows a working configuration and content structure. - Hugo compatibility — The theme was updated to Hugo v0.124.0, and
config.tomlspecifies a minimal required Hugo version.
Who is it for?
- Privacy-conscious bloggers — Publish a blog with zero default third-party requests or user tracking.
- Hugo developers who want minimal markup — Keep full control over the HTML output and choose any classless CSS framework without touching template code.
- GitLab Pages users — Deploy the blog automatically using the provided CI pipeline.
- Designers experimenting with classless CSS — Quickly switch between Water.css, Sakura, Marx, and other frameworks by editing one config value.
What can you do with it?
- Launch a minimal blog — Clone the repo, copy the exampleSite, write Markdown posts, and publish a clean, fast blog.
- Swap visual styles easily — Change the entire look of the blog by replacing the
stylesheetUrlvalue or the file instatic/css/. - Self-host your stylesheet — Download any classless CSS file into
static/css/stylesheet.cssto remove external dependencies and keep the CSS in your repository.
How does it work?
classless-blog uses Hugo's layout system to render content as semantic HTML with no inline styles. You choose a styling method by either setting params.stylesheetUrl in the site config or placing a local stylesheet at static/css/stylesheet.css; if the local file exists it overrides the URL. Cover images are declared in a post's front matter via an image field, which requires posts to be page bundles.
Pros and cons
- Accessible and responsive — Semantic HTML plus no JavaScript means the theme works across devices and assistive technologies.
- Privacy friendly — No built-in tracking; you control all external requests.
- Minimal setup — A single config parameter changes the entire visual style.
- No built-in styling — Without a classless CSS framework the site appears unstyled; you must add one.
- External dependency risk — Using the URL method relies on a third-party host that could go down; the local file method avoids this.
FAQ
Does classless-blog use JavaScript?
No. The theme only features standard HTML and no custom CSS, so the generated blog has no JavaScript of its own. This keeps pages lightweight and reduces tracking opportunities.
How do I change the CSS framework?
Set the stylesheetUrl parameter in your site's config file — for example, params.stylesheetUrl = "https://unpkg.com/sakura.css/css/sakura.css" in config.toml. Alternatively, download a stylesheet and place it at static/css/stylesheet.css; that local file takes priority.
Can I use my own stylesheet?
Yes. Put your own CSS file at static/css/stylesheet.css. When that file exists, the theme ignores the stylesheetUrl config option, giving you full control over styling.
What Hugo version is required?
The repository was updated to work with Hugo v0.124.0, and it specifies a minimal Hugo version in config.toml. Older versions may not build the theme correctly.
Is classless-blog free?
Yes, it is a public open-source project hosted on GitLab. The repository includes a LICENSE file.
