What is Cuttlebelle?

Cuttlebelle is a static site generator that uses react for layouts, let’s you use one layout per page-partial and cleanly separates content from code.

You can extend Cuttlebelle with react components that can make use of the power of the npm ecosystem.

npm install cuttlebelle --global

+ cuttlebelle@1.0.0

cuttlebelle

🐙 Cuttlebelle v1.0.0

🔔 INFO: Generating pages

🚀 Successfully built 629 pages to site/ in 4.027s

Separate content and code

Modularize each page into partials
Each section of your page becomes a markdown file with front-matter. The content can be written in YAML or markdown. A layout is nominated per partial.
```
- - -
layout: cta
link: Buy our product now
url: http://your-product.com
- - -
# Look at our range of products
We have **many** of them.
```

Write your layout in react

The layout is written in JSX as a react component. Each variable in your front-matter becomes a prop of the layout.

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
/**
 * The Cta component
 */
const Cta = ({ link, url, _body }) => (
  <section className="cta">
    { _body }
    <a className="btn" href={ url }>{ link }</a>
  </section>
);
export default Cta;

Why another static site generator?

Multiple layouts

Each page is divided into components that have their own layouts. Think of it like little Lego™ blocks that make up your site.

With that you can build completely new page layouts by assembling them from your smaller partials without having to touch code.

Focus on content and simplicity

Keeping your content free of any code empowers more users to change the content of your site. And because we chunk it all up into partials, content authors are able to build completely new layouts all by them-self without ever touching more complex code.

Separating content and code also means searching through your content is easier and you can reuse layout as well as content blocks easily.

Easy templating

Cuttlebelle uses JSX as the templating language. This makes it very convenient to build simple layouts all the way to super complex ones that fetch data from online APIs.

Now you can start testing your layouts with Jest or any other react tester.

Secure without lock-in

Building static sites means only HTML, CSS and JS will be uploaded to your server. No plugins that may leave your site vulnerable to attacks. With Cuttlebelle you’re also not locked into any CMS and are able to move to another solution as your websites scales.

All your content is in easy digestible markdown files and can be exported to javascript objects.