Seven

Seven is an Eleventy static site starter template that bundles Bootstrap 4, Sass preprocessing, Webpack, and a Vue.js-powered client-side search. It produces a fully static site with pagination and animations from markdown content in two collections: posts and courses.

What is Seven?

Seven is a template for building sites with the Eleventy static site generator, built around a folder called _site that acts as the content root and a _templates folder for layouts and includes. It takes markdown files from the posts and courses collections and outputs a static website to a dist (development) or build (production) folder, with a Vue.js search index generated from those same markdown files. The project is maintained by the template author and demonstrated live at 7ty.tech.

Key Features

• Vue.js search — A search box powered by Vue.js that indexes content from the _site/posts and _site/courses markdown files, with results presented instantly in the browser.
• Bootstrap 4 with Sass — The main style.scss imports Bootstrap’s Sass source, with unused components commented out to reduce file size; _custom.scss lets you override Sass variables.
• Dark mode by default — The default color scheme is dark mode, adjustable through the Sass variable overrides in _custom.scss.
• Webpack build pipeline — Webpack processes all Sass and JavaScript, with separate webpack.dev.js and webpack.prod.js configurations, plus a shared webpack.common.js.
• CDN-loaded libraries — Bootstrap JavaScript, fonts, and other vendor libraries are loaded from CDNs via script tags, which the author notes can be more performant because visitors may already have them cached.
• Pagination and animations — The template includes pagination for content listing and page-load animations out of the box.
• Environment-aware templates — The _data/myProject.js file exposes the current environment (development or production), so templates can load unminified vs. minified Vue.js versions accordingly.
• Clean project structure — Configuration in .eleventy.js remaps Eleventy’s input to _site, includes to _templates, data to _data, and output to dist or build.

Who is it for?

Seven is aimed at developers who want a pre-configured Eleventy starter without assembling the toolchain themselves. It suits front-end developers comfortable with Sass and Webpack who want to customize a Bootstrap-based theme, and it works well for building content-driven sites such as blogs, course hubs, or documentation portals that need a fast static output and a client-side search.

What can you do with Seven?

• Blog authors: Write markdown posts in the _site/posts folder; they appear in the Vue-powered search and paginated listings automatically.
• Course creators: Add course pages under _site/courses; they are collected separately and included in the search index.
• Theme developers: Use the _custom.scss and _overrides.scss files to adjust Bootstrap component styles and target specific classes without editing library source.
• Performance-conscious developers: Deploy the static output to any host, using the optional now-build script if you use Zeit Now (Vercel).

How does Seven work?

The quickstart workflow is: clone the repo, run npm install, then npm start to launch the development server at localhost:8080 with live reload from Eleventy and Webpack. Content is edited as markdown in _site/posts or _site/courses, and running npm run build cleans and regenerates the production output into build using both Eleventy and the production Webpack config.

FAQ

Does Seven require Node.js and npm?

Yes. The setup steps are npm install to install dependencies and npm start to run the development server; the build also uses npm scripts that invoke Eleventy and Webpack.

How do I change the site title?

The site title (and other global variables like name and bio) live in _data/metadata.json. Templates access them through Eleventy’s data cascade using the metadata object, for example the title is referenced as metadata.title in templates.

What hosting does Seven support?

Seven outputs a fully static site into a dist or build folder, so it can be hosted anywhere static files are served. The repository also includes now.json and a now-build script for deploying to Zeit Now (Vercel).