Abell Logo Abell

Introducing Abell v1 Beta 🚀 A new Low-Level Static-Site-Generator powered by Vite

saurabhdaware

Abell v1.0.0-beta is now published on NPM 🚀

You can scaffold an Abell project using npm create abell@latest

or you can get started with a single index.abell file.

or Build your Abell Blog using Abell's Starter Blog Template.

Why Abell?

There are 2 types of solutions for building static websites today,

1. Traditional template-engine-based Static-Site-Generators like Jekyll, Hugo, Hexo.

Static-Site-Generators like Jekyll, Hugo, Hexo, and Eleventy, get their abstraction level really well. They are closer to HTML which gives a nice flexibility and can lower the learning curve. This is also how Abell v0 was built.

However, a lot of these solutions (including Abell v0) either struggle to integrate with modern tools like MDX, JSX, TypeScript, etc, Cannot integrate at all, or have their own plugin system built around to extend their capabilities.

2. JavaScript-based solutions like Next.js, and Astro.

On the other hand, we have a JavaScript-based or Bundler-based approach. Since you're primarily dealing with JavaScript here, and the bundlers understand JavaScript well, these tools have absolutely no problem integrating into modern JS ecosystem using the plugins of the bundlers.

However, these tools are often built on a higher abstraction and lose that closer-to-HTML feel that solutions like Jekyll and Hugo had.

3. ???

What if we pick nice things from both types of solutions and build something that is-

And this is where Abell v1 tries to be.

Abell is a Low-Level Static-Site-Generator

Abell extends on top of the vanilla HTML setup. You know CSS-in-JS, time of Node.JS/Bun-in-HTML!!

It's a code that might feel familiar even if you've never seen any Abell code before.

Fun Fact: Everything you know about Vanilla HTML still applies in this. How you add CSS, How you add meta tags, How you link client-JS, everything continues to work with some nice additional power of double curly braces.

Low-Level on Routing with all new makeRoutes API.

Abell takes a step forward on a low-level API and allows you to opt out of filesystem routing.

By default, if you create about.abell file, it creates /about route. But you can use makeRoutes API in entry.build.js to opt out of it and define the route as a code.

This combined with Vite's glob imports (const allMarkdownContent = import.meta.glob('./*.md')) lets you do some fun dynamic routing things like generating paths from markdown files.

Check out how Abell's Blog Template generates routes from markdown.

Abell is a Framework Agnostic Static-Site-Generator

You can check out Abell's integration examples at github.com/abelljs/integrations.

You can in fact use Abell to turn your existing CSR apps into SSG apps in just 4 to 5 steps.

Checkout my demo of pre-rendering a SolidJS App with Abell @ViteConf 2023

Or a similar demo of doing this with React @React India 2023

You can also take it a step forward and integrate it with other libraries of that framework. Take this example where we are using Abell with React + React Router (with Code-Spliting) + Styled Components

Abell is a Vite Powered Static-Site-Generator

Abell is built with very little abstraction on top of vite. In fact, Abell (except its router) is majorly just a Vite plugin.

This allows Abell to integrate with the rest of the ecosystem using existing Vite (and Vite-compatible Rollup) plugins.

Abell Plugins?

What about Abell Plugins?? Well... Abell does not have a plugin system of its own at all!! It 100% relies on Vite plugins for integrations.

Want to know how to do some common things with Abell? there's probably a Vite plugin for that-

Source Plugins?

makeRoutes API on the other hand removes the need for source-plugins since you can just make an API call and generate page content on the go (Having a file is not a requirement for Abell :D)

import index from './index.abell';
import layout from './layout.abell';

const response = await fetch('https://your-wordpress-site.com/wp-json/wp/v2/posts').then((res) => res.json());
const posts = response.data;

export const makeRoutes = () => {
  return [
    {
      path: '/',
      render: () => index()
    }
    ...posts.map((post) => ({
      path: post.slug,
      render: () => layout(post.content.rendered)
    }))
  ]
}

When NOT to use Abell?

All of these things we talked about make Abell a really good tool for building static websites or kind of interactive websites like portfolios, marketing sites, documentation sites, blogs, etc. For sites like E-Commerce Websites or Dashboards, I would recommend a SSR solution like Next.js. but... if you're going with CSR, I would recommend using Abell to pre-render a few things on build-time for nice perf benefits.

Abell usually shines when you need high flexibility or want something closer to HTML. Compared to tools like Astro, it lacks some high-level abstractions or simple adaptors to abstract out some verbose code. It tradeoffs flexibility for a lower abstraction layer. So if you have an existing Astro site that works perfectly fine for you, don't worry you don't have to migrate it to Abell (Unless you just want to give it a try :D).

We think Astro is a great tool as well and in few cases, the comparison might just come down to syntax-opinion or abstraction-level-opinion.

What's Next?

For the next few weeks, we'll primarily be working on things around the SSG tooling. E.g. -

  • Better Editor Tooling possibly using Volar (There is Basic Syntax Highlighting and AutoComplete at VSCode Abell Language Features but it requires some more work)
  • More Starter Templates
  • More Integration Examples
  • Bug Fixes

Interested in helping with any of these? Let us know on GitHub Discussions.

Learn More about Abell

You can check the documentation of abell at abelljs.org

You can also check my talks on Abell here-

Like Abell So Far?

Thanks!! See you all in a conference or meetup someday ^_^ 🌀