Build Awesome Kit

All you need to quickly plug-and-play with 11ty / Build Awesome.

Core package

Plugin

npm install @anyblades/buildawesome-kit

Then addPlugin() to your config:

import kitPlugin from "@anyblades/buildawesome-kit";

export default function ($config) {
  $config.addPlugin(kitPlugin);
}

Live example: https://github.com/anyblades/buildawesome-micro-starters/blob/main/bare-plugin/

Features

All https://build.blades.ninja/plugin/features/ except mdAutoRawTags are enabled by default.

You can toggle them like this:

$config.addPlugin(kitPlugin, {
  autoLinkFavicons: false,
  mdAutoRawTags: true,
});

Filters

All https://build.blades.ninja/plugin/filters/ are enabled by default.

You can toggle them like this:

$config.addPlugin(kitPlugin, {
  filters: { attr_set: false },
});

Scripts

Ready-to-use npm scripts are included within the same core package:

npm install @anyblades/buildawesome-kit

To reuse in your project, link them under scripts/ subfolder like this:

mkdir scripts
cd scripts/
ln -s ../node_modules/@anyblades/buildawesome-kit/packages/scripts/package.json
cd ..

Finally, register scripts as a "virtual" npm workspace:

  "workspaces": ["scripts"],
  "scripts": {
    "scripts": "npm -w scripts run",
    "start": "npm run scripts -- start",
    "stage": "npm run scripts -- stage",
    "build": "npm run scripts -- build"
  },

Done! 🥷 : Build Awesome Kit's npm run start / stage / build are ready to use in your project, AND automatically updated via @anyblades/buildawesome-kit package.

Live example: https://github.com/anyblades/buildawesome-micro-starters/tree/main/bare-scripts

Pre-configured

All-in-one package

npm install @awesome.me/buildawesome @anyblades/buildawesome-kit-config

Everything is installed automatically; the only manual step is to create a default layout.

For example, using the built-in base https://blades.ninja/html/ templates:

mkdir _includes
cd _includes/
ln -s ../node_modules/@anyblades/blades/_includes/blades
echo "{% extends 'blades/html.njk' %}{% set site = { styles: ['https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/blades.min.css'] } %}" > default.njk
cd ..
echo "Hello, world! 🎈" > index.md

Done! 🥷 : Now you can see the Build Awesome Kit in action by using its built-in config file:

npx @awesome.me/buildawesome --serve --config=node_modules/@anyblades/buildawesome-kit-config/buildawesome.config.js

Live examples:

• https://github.com/anyblades/buildawesome-micro-starters/tree/main/micro
• https://github.com/anyblades/buildawesome-content-first/tree/main/.build

If you don't want to type --config=... every time, save it to your package.json:

"scripts": {
  "build": "buildawesome --config=node_modules/@anyblades/buildawesome-kit-config/buildawesome.config.js",
  "start": "npm run build -- --serve"
}

Now you can simply npm run start / build! 🥷

Live examples:

• https://github.com/anyblades/buildawesome-micro-starters/blob/main/micro/package.json
• https://github.com/anyblades/buildawesome-content-first/blob/main/.build/package.json

You can also import and use it as a "base" config:

import kitConfig from "@anyblades/buildawesome-kit-config";

export default async function ($config) {
  await kitConfig($config);

  // Customize $config further as you like:
  $config.addPlugin(...);
}

Live example: https://github.com/anyblades/buildawesome-micro-starters/blob/main/shotpipe-og-images/buildawesome.config.js

Micro-starters

https://build.blades.ninja/starters/

Documentation

Featured by

• 11tybundle.dev
• sveltiacms.app
• @hamatti