Patrick Pfeifer Software Engineer

How to Build a Website (1/3): Static Page generation with Ruby and Image Magick

Jul 18, 2017 6:55:25 PM

Suppose you are a programmer and your client, who has some tiny or small business, needs a website to advertise that business.

“Sure”, you say. “No problem!”

Suppose further, that you have a hard time fighting your inner perfectionist. You are always striving to exceed expectations. And thus, you decide to add a dynamic menu, a mobile friendly photo gallery and calendar data from a REST endpoint to the site.

The programming language in which such dynamic features are built, today, on the web, is Javascript. The development platform is heavily relying to the ubiquitous Node.js runtime. The end product shall be accessible in all of the world’s web browsers. As a professional, before starting to write code, I wanted to get a clear picture of the technology landscape in which I chose to develop. In this series of blog posts, I will share the insights that I have gained. Besides: To get started with Javascript, the language, Node.js, the headless runtime, there are a lot of excellent books available, and I would heartily recommend reading a few of them.

So, static page generation is a really cool way to build simple websites. It gives you all the benefits of a full-blown content management system, while avoiding any unnecessary complexity. A static page generator, is basically a command-line-cms. Based on a set of inputs, the engine transforms those according to a bunch of customizable policies. As long as the inputs and the policies are not changed, the output will not change. It is a pure function, so to say. And outputs of pure functions can safely be cached. There is no need to call the function twice with the same input. The content of a simple website, by my definition, does not change very often. And it does not adapt itself to the viewer. It serves no targeted ads and no breaking news. Hence, for this scenario, static page generation is a perfect fit.

To keep it maintainable, I wanted to separate the contents, styling and functionality in my project. And there is one obvious way in which those concerns can be separated: Simply map them one-to-one to HTML, CSS and Javascript resources, in that order.

In all three resource types, there are things to be added, that are actually not specific to the site you are creating, but much more so to the consumer devices that you are targeting. E.g. modern desktop and mobile browsers. And of course I did not want to re-invent the wheel, e.g. for building a mobile menu, corporate design and so on. What I wanted to do instead, was to re-use and re-compose the menus and designs that others have already created in unique new way. For Javascript and CSS resources, the problem is mostly solved. I used NPM, Babel ad ES6 modules and Less. For HTML snippets and Images, as I found out, composition, transformation and generation of resources can be very well handled by ruby scripts. At least, that is, if you intend to heavily customize the process, as I do. If you do not, then Jekyll, along and existing extension might actually already do the job for you. I did go a step further and learned some Ruby along the way, which was a lot of fun. Part of the reason for doing this, was that I was delighted to see what the RMagik project has done: It created ruby bindings for the entire ImageMagik library. The library that also provides an excellent set of UNIX command line tools for basic image manipulation tasks, applicable to all image formats that I have so far tried. It allows re-sizing and re-encoding of image assets, can generate interleaved JPG images and so forth.

Have a look at how I have tapped into all of this here and stay tuned for the next posts!