10 Jan 2023

Introducing prevjs - super easy static builder from MockFlow

New

When we set out to build a static website for one of our sub-sites with html pages, our first step was to select a static site generator from the numerous options mentioned here - https://jamstack.org/generators/ and when we researched this list, the popular ones like next.js and gatsby used React library as their underlying framework for building static sites. And some generators were specific for a particular purpose like blog, documentation site. and a few others had missing features or were not maintained.



After trying most of the tools mentioned above, we found NextJS and Gatsby better tools for this purpose. However it comes with certain catches. Here are our observations:


  • Both started as simple static website generators but now started moving into the app realm. Which makes them powerful but also overwhelming for new users.


  • Based on React Framework. This can be good or bad. While R eact has its benefits, You do not write code inside these libraries like a regular website developer but like an app developer. Which means you can't simple use css classes or easily insert regular JS libraries like jquery.


  • Focuses on the core. What we mean is that they relegate control like hosting and deploying and even image conversion to third party libraries. For example finding a capable webp conversion for our nextjs site took a lot of time to figure out as it does not work out-of-box.


  • It feels it is more directed towards application developers who want to create websites which makes it more complicated and increased learning curve for new users.


Although everything is not sour, they are fantastic tools and have a huge community of developers and users. Would definitely be a choice for react developers looking to develop sites and apps.


Now enters PrevJS


The start

Based on the above facts, we decided to create a slim static-site generator that focuses only on creating websites. Not apps, not fancy frameworks, just good old website development that everybody knows. As like any other static site generator, a good templating library is important. For this instead of creating our own library from scratch, we narrowed down on EJS (Embedded Javascript Templates). Which is great and simple to use. As the name suggests it allows to mix javascript with html to creating dynamic data within a page. There is no learning overhead as long the developer knows basic html and vanilla js.

Indeed PrevJS + EJS became the perfect union for creating static sites.


Focus on website

The essential parts of a website development cycle is Create, Build and Deploy. While the main trait of PrevJS is to be easy as possible compared to other generators. It also wants to be a complete tool from development to deployment with focus on websites. This focus makes all the SEO features like sitemap generation, webp conversion, page pre-fetch, live preview, search index available out of box.


With MockFlow

The Bootstrap website builder in MockFlow allows you to create website templates by simply drag-n-dropping blocks from a catalog of different website parts. After forming your pages, it can be exported to a prevjs recipe.


Availability

PrevJS is an opensource command like software. More details on how to install and use is available at https://github.com/produle/prevjs


To lean about its features, visit https://prevjs.com


npm install @produle/prevjs -g


Future

We already working on interesting features for PrevJS, built-in search functionality for websites including templates. More deployment options like GCloud and Azure. And a cloud service with features like a/b testing and analytics.

Share: