Plenti power for Svelte

Plenti is a promising static site generator based on Svelte.

What? Another SSG…

There are many many many SSG (static site generators). However, Plenti is interesting:

  • easy setup
  • non-proprietary product (that one is always important)
  • clean and simple structure
  • super fast building
  • cheap hosting

I know other Svelte Site Generators provide similar features, but it’s essential to note Plenti claims to be faster and even more straightforward.

The coolest thing is that now you don’t even need NodeJS, Go, or any dependency other than Plenti itself to use it!

As the saying goes, “Fewer dependencies, fewer problems”.

How to install

Just follow the easy setup.

I prefer the manual installation with the binary, but feel free to install it the way you like.

Once installed, open your terminal and type:

plenti -v

You should see the version number if Plenti is correctly installed.

The fastest hello world ever

After installation, just type:

plenti new site plenti-powa && cd plenti-powa && plenti serve -L

Your hello world runs on http://localhost:3000/. It’s built upon Svelte so your website is fast and smooth.

I use the -L option with the serve command to get the hot reload feature, so I don’t have to refresh pages manually all the time.

As it’s a SSG, you have a plenti build command to run before deploying.

JSON for the data, Svelte for the template

As the demo page says :

Template: layout/content/index.svelte Content: content/index.json

Pretty straightforward. Pages, posts, and source data are in the /content/ folder. Data is JSON, templates are Svelte files (~ boosted vanilla JavaScript) located in the /layout/ folder.

are you serious with your JSON files?

Yes.

They do not support markdown yet, and I don’t think it’s on the roadmap. For instance, the future strategy behind is to create a dedicated interface to edit contents instead of manually editing files.

As far as I know, JSON files will be data exports from the content editing system.

I think it would be a great addition as markdown is such a powerful format.

Adding content

By default, the structure of the /content/ folder is your final structure. At the root, you have an index.json file, which is your home page content.

content/blog/post1.json = https://example.com/blog/post1

Source: Plenti documentation

If you need to override it, for example, if you need to put your pages in the /content/pages/ folder, open the plenti.json file at the root of the project and add:

"types": {
  "pages": "/:filename"
}

Otherwise, your pages will render at :

myplentisite.com/pages/mypage

Getting started with the templating part

All the templating is done with Svelte.

The main file of your app is /layout/global/html.svelte. It contains the global HTML that all your pages will use and the routing:

  <main>
    <div class="container">
      <svelte:component this={route} {...content.fields} {content} {allContent} {allComponents} />
      <br />
    </div>

It’s a mandatory file. You can neither remove it nor remove the routing part without breaking everything.

Anything that appears at the first level within the content folder is a type.

If you use the default theme (after a plenti new site) and you look at /layout/content/, you’ll see it applies this logic: 1 template per type:

  • index.json => index.svelte
  • /blog/ => blog.svelte
  • /pages/ => pages.svelte

If you open one of these templates, you’ll see it’s a Svelte template that uses variables. For example, in index.svelte:

<script>
    export let title, intro, components, content, allContent;
</script>

The title and the intro variables come from the JSON file /content/index.json. You can change the JSON file’s value to change text. allContent is a special variable that contains many useful data, especially if you want to make custom loops, for example, to display the latest news.

Using third-party themes

Plenti abstracts many things, including third-party themes. You won’t have to handle submodules by yourself, and you can even use CLI commands for that:

plenti theme add git@github.com:plenti-themes/bigspring
plenti theme enable bigspring

Behind the scene, it writes configurations in the plenti.json file, at the root of your project. It’s the main config file.

The other great feature is the template inheritance.

After enabling the bigspring theme, you can go to the /themes/bigspring/ folder, open the /content/ folder in there and start overriding things in your /content/ folder (at the root of the project).

Seems a smart way to customize contents while using an existing theme. Considering the Jamstack World has thousands of themes for various generators, including Svelte, a great way to contribute would be to port existing themes to Plenti.

Simplicity is a feature

Plenti abstracts and packages many things for you. That’s why you already have a node_modules folder without even running an npm command.

It’s the same core philosophy as with Svelte: making things simpler and readable for those who don’t need all the stuff, but if you need more flexibility, it’s still possible.

Our goal is to keep the tooling to a minimum, so it’s easy to install and use

You can start adding npm dependencies. There’s a package.json file at the root of the project.

Still pretty young

While Plenti looks fantastic and promising, there are many issues and features in progress. Expect some changes with the next versions.

As the GitHub repo says, it needs to grow for now, but keep an eye on it, as it could be a great alternative to other Svelte tools on the market.

Maybe it could pull data from any JSON API, so there could be great combinations in the future between Plenti and existing platforms. For example, WordPress has a JSON API.

It reminds me of Gatsby and its idea of a “content mesh system”. I think they continue to inspire many developers around the world with that vision. Of course, the Plenti project is not at the same level, but it has great potential.

Photo by Vianney CAHEN on Unsplash