Introducing Project Orca - Part 1

July 18, 2018

In my blogpost Who needs a WordPress website? I wrote about CMS overuse. My conclusion was that using Wordpress, Joomla or any of the readily available open source CMSs is overkill for many small to medium sized businesses. In many cases a static website will be a better choice.

Why a static site?

They are secure, fast, and inexpensive to host. They do NOT need any security patches, updates - no drama, no armageddons.

I have build static sites for corporate clients that explicitly wanted one because they load super fast and are very secure. But some of them also wanted to update page content by themselves.

This was the inspiration for project ORCA. Using Drupal for its superior content management capability in conjunction with a static website.

ORCA is a decoupled Drupal 8 site feeding content to a static website build process

ORCA implements a small/medium size company website. The home page provides an extensive company overview much like a Single Page website but also provides links to specific landing pages, for example the blog landing page.

When building a Drupal site, we organize information into Blocks. We build blocks manually in the block admin page, as Nodeblocks or we use Views. We are building components that are then used by Drupal to assemble a page dynamically.

With static pages we don’t have that luxury and that is where a Static Site Generator enters the picture.

Static site generators build HTML-only page files from templates and raw data. Data may be contained in JSON, YML or Markdown files. They offer some of the benefits of a CMS without the hosting, performance and security issues.

A site generator in combination with a Templating Engine allows us to use components to assemble site pages, except that this “build step” is done prior to uploading a site to the server.

There are hundreds of site generators available. The most prominent one is Jekyll, which can be used to create GitHub pages. Jekyll is written with Ruby but I wanted to use a Javascript based site generator as that is a language I already know. I also wanted something simple so after some searching I found Metalsmith, and what a find it was.

Metalsmith

Metalsmith is a Static Site Generator, it is a simple piece of software that moves files from a source to a destination directory and in between it allows plugins to manipulate the files.

  • First Metalsmith reads files from a source directory and converts the files into Javascript Objects.
  • These Javascript Objects can now be transformed with Plugins and these plugins can simply be chained together. Plugin transformations are applied to the JavaScript objects either by changing the properties or the property values.
  • Finally, Metalsmith converts all transformed JS objects back into files and writes them to a destination directory.

Metalsmith is Nodejs based so there are thousands of plugins already available that may be used in Metalsmith plugins. Also, Metalsmith may be used with Gulp so we can take advantage of all Gulp plugins during the build process. And if there is a problem that has not been solved yet, it is fairly simple to write a plugin.

In Introducing Project Orca - Part 2 we will take a look at how Metalsmith works in detail.