picostitch
crafting (and) JavaScript

PicoSSG v6 is out! πŸŽ‰ – The Anti-Framework Static Site Generator

PicoSSG is a simple static site generator that allows you to build static sites with ease. It is designed to be minimal, fast, and easy to use, making it perfect for small projects or personal blogs. It has just two features and a bit more than 500 lines of code. It can convert markdown into HTML and process Nunjucks templates.

New Package Name: @pic0/ssg

In short this is how you run PicoSSG now:

   npx @pic0/ssg -c content -o output

Even though the rename happened shortly after releasing v6, I see it as a major change worth noting. The package name changed from the clunky @wolframkriesing/picossg to https://www.npmjs.com/@pic0/ssg. I never liked having my name in the package name, but hadn't found a better option before. The obvious pico was already taken, so I had reserved _pico and pico_ for a while – neither ideal. Now, @pic0/ssg feels right.

⚠️ Note: If you’re using PicoSSG, update your package.json to the new name. I'll keep the old package online and in sync for now, but it will eventually stop receiving updates.

As a user you might care about the following way more.

Improved Error Messages

PicoSSG v6 comes with much better error messages. When a variable was not found or a Nunjucks error occurs, the error messages were not informative nor helpful. They might have look like this:

Error Message Example

Since v6 you will get informative, helpful error messages that point you to the exact line and file where the error occurred.

The if is missing a condition, so it points to where the error is and gives the error message that nunjucks would give you (that one could be better, I agree). Error Message Example

A missing block name: Error Message Example

Or one space too much between % and }: Error Message Example

Now index.md becomes index.html too

Before v6 PicoSSG would process index.md and output the new file name index, since the md extension was processed and removed. But since this is a static site generator, it should output index.html like all other tools do.

The underlying logic now is that if a file ends up without any extension after processing, it will get the default .html extension. File names like style.css.njk are still to be processed into style.css, and alike.

Docs and Internal Changes

Besides the above various docs updates had been done e.g. describing the new flow in file-mapping.

For those who like to customize PicoSSG processing or dive into the internals, there are some changes worth noting:

The internal _file.numLinesFrontmatter now tells you how many lines long the frontmatter block is, including the --- lines. The property _file.extensionsToProcess was introduced and tells which extensions are processed for a file. The property _file.hasFrontmatterBlock was removed, you can still find out if a frontmatter exists by looking into _frontmatter if you need to know it.

The code was refactored to only process the files data as given, use _file.extensionsToProcess and be more flexible this way. Multiple template paths can be given now in the config.templatePaths, actually needed for the docs-kit (more on that on some later point in time). I introduce a user function preCreateProcessors() that can be used to modify the config object. The implementation now also adds the to-copy files to the files map, so the user can modify these too and knows they are processed.

If you got all the way here, you are probably also interesting in the blog post I wrote over at PicoSSG about "PicoSSG v6 Dependency Sizes".
Spoiler alert: after PicoSSG install, the node_modules folder has 5.1MB with 12 packages in it.