Getting started with Saber

Getting started with Saber, the static site generator we used to create this blog

cover
Photo credit: Gia Oris

Static site generator have been around for almost a decade, and there are lot's of them. Whatever your favourite development language and framework, you can probably find a static site generator for you.

Saber is relatively new, but it's already feature rich and stable. I chose it for the StaticForms blog and help pages because it's built on the Vue.js framework, which I'm reasonably familiar with, is pretty easy to get up and running with, generates sites very quickly, supports blogging out-of-the-box and exposes the full power of the Vue.js framework if you need to extend it.

Saber has a getting started guide but, for me at least, it still took a bit of trial and error before I got things working.

This post is intended to be a step by step guide to getting your first Saber site up and running.

Pre-requisites

Install Node

If you don't already have Node.js installed, You can download the latest version from the Node.js web site.

If you do have it installed, check that you're running a recent version of Node.js.

node -v

Saber requires Node.js version 8.0 or above. The current version, as of May 2020, is 14.2.0, though the current Long Term Support version is 12.16.3 and you should probably use this if you're building a production site.

Install Yarn

Yarn is an alternative to npm for package management. It still uses the npm registry, but includes a few enhancements that make managing packages quicker and more reliable. You don't have to use Yarn, as everything you can do with Yarn you can do with npm, but I personally prefer it.

Yarn is cross-platform and you can install the latest version for your platform from https://yarnpkg.com/en/docs/install.

Creating a project

The simplest way to create a new Saber site is to use yarn create site:

yarn create site < Site Name >

Once that's completed, there'll be a new directory matching <Site Name>, so switch in to that...

cd < Site Name>

...then run Yarn to install all the dependencies.

yarn

That's it! Now you can just run the development server to to spin up your new site.

yarn dev

To view it, open your browser to http://localhost:3000/.


Photo by Gia Oris on Unsplash