wolf4earth

wolf4earth

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.

Most Liked

wolf4earth

wolf4earth

I’m not deep enough in the elm community to comment on the usage of elm-ui in any known pages.

I know for a fact that elm-ui generated some waves, and Richard Feldman mentioned it in this talk as a potential “killer app” for elm, like rails was for ruby:


What I can say to the comparison with Jekyll is limited to my experience with Hugo. I’ve used Jekyll only briefly but from what I can tell it’s quite similar to Hugo, from a philosophy standpoint. As such I’ll assume that a comparison between elm-pages and Jekyll is fundamentally similar to a comparison between elm and Hugo.

Given this is true, I can say that the fundamental approach of elm-pages and Hugo/Jekyll differs in how they actually generate the final result: HTML pages.

Jekyll and Hugo are both based on templates. As such you more or less write HTML and sprinkle some template magic on top (speak partials, loops, etc.), with all the pitfalls this brings to the table (typos, duplication, etc.).

With elm-pages the generation is based on code, you don’t deal with templates when using elm-pages. This shouldn’t be surprising if you’ve ever had contact with elm before: when building a page with elm, you stay in “elm-land”.

This has a number of advantages and of course also disadvantages. Advantages include:

  • static typing: elm has a great type system and extremly helpful compiler errors (seriously, they’re amazing)
  • composability & flexibility: as you’re writing code you’re free to split and reuse it as you see fit
  • context switching: no need to switch between HTML and code (and even CSS if you want)
  • static HTTP requests: this is a neat feature of elm-pages, basically you can send an HTTP request at build time and then transform the response to content for your page (I’m not aware of any Jekyll/Hugo equivalent)

But as said before, there are of course disadvantages:

  • themes: AFAIK elm-pages doesn’t have a “theme” functionality as Jekyll or Hugo do
  • plugins: as elm-pages is by far not as popular as Jekyll or Hugo, so of course this is falling behind, on the other hand as everything is “just elm” you’re free to use all the elm libraries out there

I think all of this boils down to this:

elm-pages gives you the tools to build a statically generated website but requires a DIY attitude, Jekyll and Hugo offer an opinionated approach to static website building but require buy-in into their way of doing things.

At the end of the day it’s a question of how much flexibility you want to trade for productivity. And for me this question is currently clearly answered with “please give me more flexbility”.


Does this paint a clearer picture, @AstonJ?

wolf4earth

wolf4earth

It’s roughly at 5:20:

Where Next?

Popular Frontend topics Top

First poster: bot
passiomatic/elm-designer. A code generator for Elm UI. Contribute to passiomatic/elm-designer development by creating an account on GitH...
New
First poster: bot
HTML Boilerplate is the gold standard of HTML base templates but I’ve always wanted something simpler. We don’t need to force decisions ...
New
CommunityNews
Tailwind CSS Tools For Developers. A collection of tools designed for developers, to save you and your team time when building websites w...
New
First poster: bot
Local PDF uses Webassembly to edit your PDFs inside your Browser. Your files won’t leave your System, they will not be sent to another se...
New
First poster: bot
Open source CSS framework for data visualization. Contribute to ChartsCSS/charts.css development by creating an account on GitHub. ...
New
First poster: bot
This thread was posted by one of our members via one of our news source trackers.
/js
New
First poster: bot
Instead of pulling you into a library-specific magical world, CalDOM let you fully access the DOM directly while keeping the reactivity. ...
New
First poster: bot
This release represents a huge improvement for elm-pages in terms of features, developer experience, and performance. It introduces a com...
New
First poster: bot
Pablo is a small, open-source JavaScript library for SVG, the web standard for vector graphics. It can be used for vector-based art, game...
New
CommunityNews
Announcing Parcel CSS: A new CSS parser, compiler, and minifier written in Rust!. I’m very excited to announce @parcel/css, a new CSS pa...
New

Other popular topics Top

AstonJ
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
New
AstonJ
You might be thinking we should just ask who’s not using VSCode :joy: however there are some new additions in the space that might give V...
New
AstonJ
I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
New
AstonJ
Just done a fresh install of macOS Big Sur and on installing Erlang I am getting: asdf install erlang 23.1.2 Configure failed. checking ...
New
Exadra37
I am asking for any distro that only has the bare-bones to be able to get a shell in the server and then just install the packages as we ...
New
mafinar
Crystal recently reached version 1. I had been following it for awhile but never got to really learn it. Most languages I picked up out o...
New
PragmaticBookshelf
Create efficient, elegant software tests in pytest, Python's most powerful testing framework. Brian Okken @brianokken Edited by Kat...
New
DevotionGeo
I have always used antique keyboards like Cherry MX 1800 or Cherry MX 8100 and almost always have modified the switches in some way, like...
New
AstonJ
If you’re getting errors like this: psql: error: connection to server on socket “/tmp/.s.PGSQL.5432” failed: No such file or directory ...
New
New