How to Build Plugins

A tutorial on how to build Abell Plugins

Published on Thu Aug 13 2020 by Saurabh Daware

Hey there! Abell v0.4 adds some super cool things to help you build plugins but before that, lets see how you can setup a new plugin.

Setup new Plugin

You can use plugin-starter repository as a starter for your plugin.

Step 1. Clone Starter

git clone

Step 2. Delete .git folder to remove git history.

Step 3. Run npm install to install dependencies (Including abell)

Step 4. Run Abell Build

npm run build

You will see these logs in your terminal.

abell-plugin-starter$ npm run build

> abell-plugin-starter@1.0.0 build /home/saurabh/Desktop/projects/abellorg/abell-plugin-starter
> abell build

>> Plugin BeforeBuild: Executing plugin/index.js
I am executed before the build starts.
I can also add new blog, look!

>> Abell Build Started

...Built blog-from-plugin/index.html
...Built index.html
>> Plugin AfterBuild: Executing plugin/index.js
I am executed after the build

>>> Build Success (Built in 25ms) 🌻

Exploring Code

In plugin/index.js file, you will see that two functions are exported from the file.

function beforeBuild(programInfo, { createContent }) {
  // do something before the build

function afterBuild(programInfo) {
  // do something after build

function beforeHTMLWrite(htmlText, programInfo) {
  // alter HTML text and return new HTML Text
  // Executes before writing .html files
  return htmlText;

module.exports = { beforeBuild, afterBuild, beforeHTMLWrite }

These functions are optional so you can export the one that you want to use and remove the other.

When do you need beforeBuild?

When do you need afterBuild?

When do you need beforeHTMLWrite?

Creating Source Plugin

In our starter, if you open plugin/index.js, you will see something like:

// For Source Plugins
function beforeBuild(programInfo, { createContent }) {
  // slug, title, content, createdAt are required values
  const sourceNode = {
    slug: 'blog-from-plugin',
    title: 'Hi, This blog comes from plugin',
    content: `# Hello`,
    createdAt: new Date('13 May 2019'),
    modifiedAt: new Date('13 May 2019'),
    foo: 'bar' // can be accessed with

module.exports = { beforeBuild }

Apart from these properties, you can add any other values in the object. For example foo: 'bar' from our example can be accessed from variable in the theme/[path]/index.abell

As an example, you can refer to abell-source-devto's code.

Deploy your Plugin

You can check if your plugin is working correctly by running npm run build. If everything works well, we can go ahead to deploying this plugin as an NPM package.

Deploy Checklist


Now to use your plugin, user can npm install --save-dev <your-plugin-name> and add your plugin name to plugins array in their abell.config.js file.

Note: For plugins with names like abell-x-plugin or abell-source-x, NPM's spam detection may block the publish. In that case, you can mail NPM with your package name to unblock the spam detection for that name. (Email id will be mentioned in the error message of npm publish)