Hugo Theme SK1 (Skeleton 1) is an educational Hugo theme that is fully functional with zero CSS and zero JavaScript, designed as a starting point for learning Hugo's template structure and functions.
What is Hugo Theme SK1?
Hugo Theme SK1 is a demo and tutorial theme for the Hugo static site generator, created by John Sing Dao Siu. It takes a Hugo site's content (Markdown files) and produces a complete static website with layouts for lists, singles, 404 pages, and more, all without any CSS or JavaScript. The theme is intentionally minimal so users can read and understand every template line.
Key Features
- Zero CSS, zero JavaScript — Every visual element relies on browser defaults, so the layout works without any styling or client-side scripting.
- Full set of layouts — Includes baseof.html, list.html, single.html, header.html, footer.html, 404.html, and index.html (merged into list.html), covering standard Hugo page types.
- Pagination — The list template supports pagination, with the .Site.Params.mainSections parameter controlling which sections appear on the homepage.
- Single-page elements — The single template renders content, date, previous/next navigation, related content, tags, and a table of contents via ToC.
- Site parameters — The header and footer use .Site.Params.subtitle and .Site.Params.copyright respectively for easy site-wide text changes.
- Default favicon — Ships with a default favicon.ico that can be disabled by creating an empty static/favicon.ico or overridden by placing your own favicon in the static directory.
- MIT licensed — The theme is released under the MIT License, so you can freely use, modify, and redistribute it.
- Part of a theme family — SK1 is the first of the SK themes, followed by SK2 (minimum CSS) and SK3 (full features with Google AdSense support), each building on the same structure.
Who is it for?
- Hugo beginners — People wanting to learn Hugo theme development can study a complete, working theme with only a handful of template files and no styling to distract from the Hugo concepts.
- Hugo theme developers — Developers who need a bare-bones base theme to fork and then add their own CSS, JavaScript, or features; SK1's simplicity makes it easy to modify.
- Educators and tutorial writers — Bloggers and educators who write Hugo theme walkthroughs (like the creator's own walkthrough at johnsiu.com/blog/hugo-theme-sk1-walkthrough) can reference SK1 as a concrete teaching example.
What can you do with Hugo Theme SK1?
- Learn Hugo's template hierarchy: Walk through the included layouts (list, single, 404) to see how Hugo selects templates based on page kind and .Site.Params settings.
- Build a content-only site: Because there is no styling, SK1 can be used to spin up a bare-bones blog or test site that renders pure HTML content quickly.
- Fork it into a custom theme: Clone or submodule the repository and then add your own assets, CSS, and JavaScript on top of the solid skeleton.
- Test Hugo features in isolation: Use SK1's example site (based on hugoBasicExample) to experiment with pagination, related content, ToC, and tags without other variables.
Installation
Hugo Theme SK1 can be installed either by cloning the repository directly into your themes directory (git clone https://github.com/J-Siu/hugo-theme-sk1 themes/sk1) or by adding it as a git submodule with "git submodule add". To update the submodule later, run "git submodule update --recursive --remote". The theme also includes an exampleSite directory for local testing with the command shown in the README.
Alternatives
- Hugo Theme SK2 — The sibling theme that adds minimal CSS for a slightly nicer look while staying near-bare.
- Hugo Theme SK3 — The full-feature version in the same family, with support for Google AdSense and more advanced functionality.
FAQ
Is Hugo Theme SK1 free?
Yes, SK1 is open source under the MIT License. You can download, modify, and use it in personal or commercial projects without paying licensing fees. The only requirement is to retain the original copyright notice.
Does SK1 use any CSS or JavaScript?
No. It is fully functional with no CSS and no JavaScript, which makes it ideal for understanding exactly what Hugo generates on its own. The related SK2 theme adds minimum CSS, and SK3 adds full features.
How do I install Hugo Theme SK1?
You can install it by cloning the repository into your site's themes folder: git clone https://github.com/J-Siu/hugo-theme-sk1 themes/sk1. Alternatively, add it as a git submodule with git submodule add and update it later with git submodule update --recursive --remote.
How do I test SK1 locally?
The repository includes an exampleSite. You can run the testing command from the README: git clone the theme, enter the exampleSite directory, pull the submodules, then run hugo server with the specified config and theme flags.
