Elm-pages: A statically typed site generator

I’m currently in the process of rebuilding my personal website/blog from scratch. At the moment my website is using hugo, and while I think hugo is great to quickly build a site following a specific structure (blog posts etc.) I felt it was super fiddly to add additional pages which don’t fit into this structure.

As such I was looking for something more flexible which at the same time would be interesting to use. So I googled for static site generators, sifted through all the different options on StaticGen (which is a great ressource btw) and came across …

Announcement blog post here

I’ve dabbled with elm quite a few times in the past and visited the occasional meetup in Cologne, but I never built something of significance. So I thought: what is better than building my own website with it without having to build it completely from scratch!

While I’m not quite done yet, I’ve invested a bunch of hours in elm-pages and I must say: it’s a joy. Here are some of the great things it offers:

Compiler errors for asset typos

By running elm-pages develop you get a generated (and live updated) Pages module which contains references to files in your content/ and images/ folders, which get exposed as a pages and an images function.

Let’s assume I have the following files in images:

images/
  logo.png

images/article/foo/
  splash.png

I can now reference the path to these images by using images.logo or images.article.foo.splash. And in case I have a typeo (e.g. lgo instead of logo) the very helpful elm compiler will tell me about it.

HTML generation in pure elm

This is of course a personal taste thing, but the HTML generation for your pages gets written in pure elm. So if you want to use markdown for your articles, you write the support for markdown in elm. In the case of markdown this mostly consists of a bit plumbing to call into the elm-markdown package.

It also means that you can write the actual HTML generation code using the great elm-ui library.

But the real power of this approach only becomes apparent when you try to add support for a different kind of page type (for example a Talk or Project page type) or want to support a new document type (such as AsciiDoc) to write your blog posts. Again you do all of this by writing pure elm code.

All this time you have the awesome elm compiler helping you with this, so if you add a Project page type (by adding a ProjectMetadata option to the Metadata union), the elm compiler will tell you exactly where you need to make changes to support this new type.

Extend your site with statically typed confidence!

First class SEO (search engine optimization) support

I can’t say much about this yet, but elm-pages ships with built-in type-level support for SEO. Take a look at this part of the announcement blog post.