Introducing Contentz

Contentz, a Pure Static Site Generator which let you focus on the content and gives you a highly optimized website.

A few weeks ago I wrote an article, in Spanish, describing what I would expect
from my ideal static site generator, today I'm presenting
Contentz. I call it a Pure Static Site Generator
because it only load a few JavaScript lines to use Service Workers to cache
offline the whole site and for analytics or slides support, instead of loading a
lot of JavaScript as other modern SSG do.


I originally made my website and blog using Next.js with
its static export feature, but building it on each deploy take a few minutes and
required me to generate the JS bundles of each article every time.

¡I tried Gatsby and the template took me more time than my website! Since I
didn't wanted to wait that long I decide to migrate, fast options like Jekyll or
Hugo didn't supported a few features I had already built like generating a
service worker for offline first cache, or didn't allowed me to use MDX to
extend Markdown.

That's why I created Contentz, it has support for MDX, but only server side, it
import and use component to render HTML and it never generate a JS bundle for
the individual page, this make the build process way faster.

Starting to Use It

To start using Contentz you could either manually install it or let it
initialize your website and auto install.

$ npx contentz init my-blog

Once installed you will have a little configuration file called config.yml
with this content.

title: my-blog
description: Just another Contentz site
language: en
incremental: false # Change to `true` if your server support keeping `.cache` and `public` folders

In this file you could start configuring more thing, like your website domain
using domain: (required for the RSS feed). You will also
have a pages and articles folders.

Contentz support both, custom pages or blog articles. To create a new blog
article you could use the built-in command write.

$ contentz write my-first-article.mdx

This will create a file my-first-article.mdx inside articles. If you have
the environment variable EDITOR configured it will try to open it
automatically. The content will always be:

title: Just Another Contentz Article
date: 2019-04-22T22:27:46.764Z
published: false # Change to `true` to list it

Here be dragons

Now let's change published to true and build the website.

$ contentz build

This will create a public directory with your whole website generated.

Incremental Build

One of the core features of Contentz is the Incremental Build support. By
default if you run contentz build it will only generate the changed files or
the related files to those who changed.

This mean if you only change a single article of your blog it will not build the
whole blog again, it will only do it for such article and the list of articles.

This could be disabled setting incremental: false inside config.yml. This
could be useful if you don't control what files are keep between deployments and
can't keep the .cache and public directories.

Offline First

Contentz generate a Service Worker configured to automatically cache any HTTP
request to the same site and serve it fist from network and then from cache.
This means after the user access a page of the website it will be automatically
cached, if the user lost internet connection and tries to access again it will
load from cache, but while the user has internet access it will keep updating
the cache with the latest content.

Open Graph Generator

Create an Open Graph for each page or article is a boring task.
Even companies like ZEIT automate it!
Contentz has an open graph or social image actually, since it works as Twitter
Card too, generator.

To use it run the following command:

$ contentz social articles/my-first-article.mdx home

Now Contentz will generate the social image for your article and the home page.
Those files will be stored in the /static/_social folder, you should add them
to Git to avoid generating them on every deploy.

Final Words

There are more features
you could read in the documentation, if you want
to add more features issues and
pull requests are welcomed.

If you start using it in your own website
let me know on my twitter!