Skip to main content

11ty

Drop-in recipe for indexing the 11ty base blog.

Prerequisite

The 11ty static site generator is very popular, and with good reason: it's relatively lightweight and simple, and can be very powerful.

Start with the base blog to keep it simple.

Folder Structure

The base blog has posts inside a posts folder, but other pages can be in any sub-folder. The generated output is in a _site folder, so that's also where we'll put the Hunch index file.

/hunch.config.js
/package.json
/about
/index.md # this translates to `site.com/about`
/posts
/firstpost.md # this translates to `site.com/posts/firstpost`
/_site
/hunch.json
# ...other generated files...

Configuration

The default Hunch configuration is almost sufficient, but since content can be multiple root folders, we need to specify some filters:

// hunch.config.js
export default {
// The folder to scan is actually the root folder:
input: './',
// The index file will go with the 11ty generated files:
output: './_site/hunch.json',
// Property names of metadata to treat as "collections", like "tags" or "authors".
aggregations: {
// The main metadata in the 11ty base blog:
tags: {
title: 'Tags',
conjunction: false,
}
},
// The content and all aggregation fields will be searchable automatically, but
// we need to specify additional searchable fields:
searchableFields: [
'title',
'description',
],
// We also need to be explicit about what non-searchable, non-aggregated fields
// to store with the index.
storedFields: [
'date',
],
// Since 11ty stores all content at the folder root, we need to filter files.
preFilter: filepath => {
const baseDir = filepath.split('/')[0]
const EXCLUDED_DIRS = [
'.github',
'_site',
'_data',
'_includes',
'css',
'feed',
'img',
'node_modules',
]
return !EXCLUDED_DIRS.includes(baseDir)
}
}

Indexing

Add the Hunch indexing step as a post-build step to the base blog package.json file:

  "scripts": {
"build": "npx @11ty/eleventy",
+ "postbuild": "hunch",
"bench": "DEBUG=Eleventy:Benchmark* npx @11ty/eleventy",

Then, when you run npm run build to build the 11ty site, Hunch will run on completion and output _site/hunch.json.