hugodoks
Documentation sites built on Pico CSS v2. A three-column docs layout with collapsible sidebar, client-side search, dark and light themes — and no Node.js, no build pipeline.
Open source, MIT licensed. This very site is built with hugodoks — the demo and the documentation are the same thing.
What you get
Everything a documentation site needs, built on semantic HTML and Hugo’s native asset pipeline.
Built on Pico CSS v2
Semantic, mostly classless styling out of the box. Customize the whole look by overriding --pico-* CSS variables — no utility classes, no other framework.
Three-column docs layout
Sticky navigation tree on the left, article in the center, an “On this page” TOC on the right. Sidebars collapse into a drawer under 768px.
Collapsible nav sections
Content sections become <details> accordions that auto-open on the active page. Order by weight, label icons from front matter.
Client-side search
A FlexSearch-powered modal (Ctrl K) over an index.json generated at build time. No server, no external service.
Dark and light themes
Follows prefers-color-scheme, toggled via Pico’s data-theme attribute and persisted in localStorage — no flash of wrong theme.
Nine docs shortcodes
Hints, buttons, tabs, steps, columns, annotated code, page-link cards, type badges and conditional callouts — all Pico-flavored.
Landing pages from YAML
Compose the home page from data/landing.yaml: hero, feature grid and banner sections ordered by weight, no templates to touch.
No Node.js toolchain
Plain vanilla JS and Hugo Pipes. The whole toolchain is a single dockerized hugo command — make serve and you’re writing docs.
Accessible and fast
Semantic landmarks, keyboard-navigable nav and search, WCAG-targeted Pico v2 colors, fingerprinted assets and no render-blocking CDN.