Skip to main content

Setup

Set up this theme using the included tools.

File structure

After unzipping the folder, you'll find the following files:

  • dist/ - production files (upload these to your web server)
    • assets/ - CSS, images, and JavaScript
    • docs/ - documentation files
    • *.html - HTML files
  • src/ - source files
    • assets/- CSS and images
    • includes/ - includes and layouts
    • pages/ - page templates (Nunjucks)
  • .eleventy.js - Eleventy configuration
  • package.json - NPM dependencies
  • purgecss.config.js - PurgeCSS configuration

Development

Requirements:

  • Command-line tool.
  • Node.js (includes npm).

Run the following commands in the theme directory:

npm i # Install dependencies
npm start # Compile, generate the site, and start a local server

To generate the final version and remove unused CSS:

npm run build

Static Site Generator

This theme uses Eleventy as a static site generator.

  • The includes folder contains layout templates and common site elements such as <header>, <footer>, and other reusable components.
  • The pages folder contains the templates for individual pages, organizing the site's content structure.

The template language used is Nunjucks.

Front matter

Define metadata in your page templates:

---
layout: base
title: Home
description: Boost is a clean and accessible theme for Bootstrap.
permalink: /
---
  • layout: template wrapping the content.
  • title: page title.
  • description: meta description.
  • permalink: custom page URL.

Images

Eleventy copies images from src to dist.

For faster load times, optimize images with tools like:

Note: Using the included build tools is optional. You can choose to set up the theme with these tools or work directly with the files in the dist folder. For more details, see customization.