Bootpack

Bootpack is an MIT-licensed Bootstrap 5 plus webpack 5 starter that compiles plain HTML, Sass, and vanilla JavaScript into a multi-page static website, outputting everything to a dist folder you can publish to any static host. It requires no React, database, application server, or jQuery, and is authored by ZachTRice.

What is Bootpack?

Bootpack is a static-site boilerplate: you write HTML pages and Sass in src, and webpack produces minified production HTML, CSS, JS, and assets in dist. The current release is v1.1.0, which adds optional page-specific bundles and an expanded example catalog; a v1 migration guide covers upgrades from v0.x. Official examples are hosted at bootpack.io.

What makes Bootpack stand out?

• Bootstrap 5 with selective Sass imports — Bootstrap is imported through src/scss/bootstrap.scss, with variable overrides in src/scss/variables.scss, additional Sass in src/scss/custom.scss, and plain CSS in src/css/custom.css.
• Multi-page by convention — every .html or .htm file under src becomes a page at the same relative location in dist, with no route configuration.
• Optional page-specific entries — the root-level page-entries.js file maps individual pages to their own CSS/Sass and JavaScript bundles.
• Eight example layouts — src/templates/ ships layout and component examples, while src/index.html doubles as the homepage and example gallery.
• Dev server with live reload — npm start serves on port 8080 (change it with --port, for example 8081) and reloads the browser on save.
• Build commands — npm run build (minified), npm run build:dev (source maps), npm run watch, and npm run preview serving the last build on port 4173.
• Image tooling — npm run generate:images -- --width 800 --height 600 creates a JPEG placeholder without overwriting existing files, and npm run compress:images writes processed images to a new optimized-images folder while leaving sources unchanged.
• Quality checks — npm run lint, npm test (page discovery, bundle mapping, non-destructive image tests), npm run report:css (raw, gzip and Brotli stylesheet sizes), npm run check, and optional Chromium browser tests through npm run test:browser.
• Local assets — Open Sans declarations live in src/css/fonts.css, with src/fonts/, src/images/ (copied without path changes) and a src/favicon.png linked correctly from nested pages.

Who should use Bootpack?

• Front-end developers who want Bootstrap 5 markup, Sass variables, and selected Bootstrap JS plugins bundled by webpack without adopting a framework.
• Freelancers and small agencies building multi-page marketing or brochure sites that ship as static files to Cloudflare Pages or any other static host.
• Designers already comfortable with HTML and Sass who need a repeatable build, lint, and CSS size-reporting pipeline rather than a page builder.
• Teams migrating from v0.x who need the documented v1 migration guide and the page-entries.js convention for per-page assets.

What can you do with Bootpack?

• Launch a marketing site: clone the template or click "Use this template" on GitHub, edit src/index.html and the src/templates/ layouts, then publish the generated dist folder.
• Theme Bootstrap without touching its source: override Bootstrap variables in src/scss/variables.scss and keep your own rules in src/scss/custom.scss and src/css/custom.css.
• Ship per-page bundles: use page-entries.js so heavy pages load only the CSS and JavaScript they need instead of one shared bundle.
• Audit output size: run npm run report:css to see raw, gzip, and Brotli sizes for the last build's stylesheets before deploying.

How does Bootpack work?

Install Node.js 24 LTS (24.11 or newer within Node 24) and Git, then run git clone https://github.com/bootpack/bootpack.git my-website, cd my-website, npm ci, and npm start, opening http://localhost:8080. Saving src/index.html triggers a live reload; Ctrl+C stops the server, and no build step is needed before starting. Generated repositories from the GitHub template are independent and do not automatically receive upstream updates.

FAQ

Is Bootpack free to use?

Yes. Bootpack is released under the MIT license and authored by ZachTRice. Keep the license notices when reusing or redistributing the template; Bootstrap and other dependencies retain their own licenses. Reproducible problems can be reported through the project's GitHub issues.

What do I need to run Bootpack?

Node.js 24 LTS (24.11 or newer within Node 24) and Git, with npm included in the Node install. Verify both with node --version and npm --version. Playwright with Chromium is required only for npm run test:browser, and that setup is optional for building your own site.

Which browsers does Bootpack support?

The documented target is the latest two versions of Chrome, Edge, Firefox, and Safari. Internet Explorer is not supported, and the automated browser suite currently runs Chromium only. Transpilation can be added if your project's browser requirements call for it.

Do I need React, jQuery, or a database?

No. Bootpack targets multi-page static sites built on Bootstrap 5, Sass, and selected Bootstrap JavaScript plugins loaded through src/js/index.js. There is no React, database, application server, or jQuery dependency in the starter.

How do I add a new page?

Create any .html or .htm file under src and it is published at the same relative path in dist. Restart npm start or npm run watch after adding, deleting, or renaming pages, because page discovery happens at startup; edits to existing HTML, CSS, and JS rebuild while the server runs.