Blaupause

blaupause is a Hugo starter kit that bundles npm scripts, webpack 4, Babel 7, and PostCSS into a single build pipeline, and adds offline support through a service worker so the resulting static site works as a basic PWA.

What is blaupause?

blaupause is a Hugo starter kit maintained on GitHub by fspoettel (the repository is explicitly marked as not maintained, with a recommendation to use Netlify's victor-hugo template instead). It takes Hugo source files—layouts, content, and assets in a src directory—and outputs an optimized static site into public. The build is orchestrated entirely with npm scripts and the nps task runner, with tasks defined in package-scripts.js and exposed through npm start, npm run build, and related commands. It also includes a development server and production build modes that differ in sourcemaps, minification, draft handling, and service worker inclusion.

What makes blaupause stand out?

• npm-script task runner — All build tasks are defined in package-scripts.js, so you can run the full pipeline with familiar commands like npm start and npm run build, without relying on gulp or grunt.
• Development mode with BrowserSync — npm start compiles assets, starts a live-reloading server, and enables sourcemaps, so every source change is reflected in connected browsers immediately.
• Production-optimized builds — npm run build outputs a ready-to-publish public folder: minified JS and CSS, stripped debug console statements, enabled production baseUrl in Hugo, and draft entries excluded.
• Offline support via service worker — The preconfigured service worker uses a networkFirst strategy for static files and cacheFirst for images and Google Fonts, giving visitors offline access to visited pages after the first load.
• JavaScript toolchain — webpack 4, Babel 7 with babel-env, ESLint with the Airbnb config, and Jest for unit tests come configured out of the box.
• CSS toolchain — PostCSS is set up with autoprefixer and postcss-import, stylelint uses the standard config, and sanitize.css provides a modern reset.
• Automatic SVG sprites — SVG files placed in src/img are bundled into a single sprite.symbol.svg, and a Hugo partial lets you reference symbols by ID in templates.
• Netlify integration — A one-click Deploy to Netlify button is included, and the README documents how to add Netlify CMS by copying an admin/index.html and admin/config.yml into your repo.

Who should use blaupause?

• Hugo developers who want a pre-wired build stack for webpack, Babel, PostCSS, linting, and tests instead of assembling one themselves.
• Agencies and freelancers who need a reliable starting point for client static sites, including a service worker and a clean deployment path to Netlify.
• Developers learning Hugo and PWA techniques who want a working reference for service worker strategies, SVG sprite generation, and production build configuration.

Use cases

• Launching a new site quickly — Clone the repository, run npm install and npm start, and you get a local server with live reload and a functional Hugo layout boilerplate.
• Adding a CMS for editors — Follow the README's Netlify CMS setup to add a content management interface backed by GitHub, with editorial workflow and media assets under static/assets.
• Deploying to Netlify in minutes — Push the clone to GitHub, connect it on Netlify, and every push triggers a production build that includes the service worker and minified assets.

How does blaupause work?

After cloning the repository, run npm install; if the hugo binary is not on your PATH, it is downloaded automatically during install. Then npm start launches the development server, and npm run build generates a production-ready build in the public folder. Task configuration lives in package-scripts.js, and the build script removes the public folder first, applies the production baseUrl, and strips debug statements.

Alternatives

fspoettel recommends victor-hugo, a maintained Hugo/webpack starter kit from Netlify, as the replacement for blaupause. The repository is explicitly marked [NOT MAINTAINED], so new projects should consider that template instead.

FAQ

How do I install blaupause?

You need NodeJS installed, then clone the repository, run npm install (which also installs the hugo binary if it is missing from your PATH), and finally run npm start to launch the development server.

How do I build a production version?

Run npm run build. It compiles content and assets from src to public, applies the production baseUrl, excludes draft entries, omits sourcemaps, minifies JS and CSS, and adds a service worker.

Does blaupause work with Netlify?

Yes. The README includes a one-click Deploy to Netlify button and instructions to add Netlify CMS by copying an admin/index.html and config.yml into the hugo/static/admin directory.

What offline capabilities does it provide?

The included service worker follows a networkFirst strategy for static files and a cacheFirst strategy for images and Google Fonts. After the first visit, visited pages work offline, and assets are served from cache when no network is available.