Skip to main content

Development

Learn how to customize this theme using the tools included.

To set up the theme, you need:

  • A command-line tool.
  • Node.js (includes npm).

Open your terminal, ensure you are in the same directory of the unzipped theme, and run the following command to install all dependencies:

npm i

In the terminal, run the following command:

npm start

It compiles the source files, generates the site and starts a local server at localhost:8080.

Front matter

The theme uses Eleventy static site generator.

You can add metadata in your page templates:

---
layout: base
title: Home
description: Focus is a clean portfolio theme for Bootstrap.
navbarColor: light
permalink: /
---
  • layout: the template used to wrap the content.
  • title: page title.
  • description: page meta description.
  • navbarColor: dark/light (optional, default is "dark").
  • permalink: allows remapping your template's URI.

Images

Eleventy only copies the images from the src folder to the dist folder. To get faster load times, use the right image size and compress them using an app like Squoosh (Web app) or ImageOptim (Mac app).

Production

Once your site is ready to publish, run the following command:

npm run build

It generates the site from scratch and removes unused CSS.