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

wolf4earth
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 thi...
New
AstonJ
Yew looks really interesting!! What is Yew? Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssem...
New
vLev
As a 16y/o with enormous amounts of time during quarantine, I decided to learn neural networks. To further understand the concept, I deci...
New
First poster: bot
Simple.css is a classless CSS template that allows you to make a good looking website really quickly. By classless I mean that there are...
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
Open source CSS framework for data visualization. Contribute to ChartsCSS/charts.css development by creating an account on GitHub. ...
New
CommunityNews
WebAssembly-Powered FM Synthesizer. An 8-operator, polyphonic FM synthesizer running completely in the web browser via Rust compiled to ...
New
First poster: bot
A function for creating fast, lightweight web components (2.01 KB gzipped) A function for creating fast, lightweight stores for applicati...
New
First poster: bot
This thread was posted by one of our members via one of our news source trackers.
/js
New
First poster: AstonJ
Try it here: https://david.li/paint/ This thread was posted by one of our members via one of our news source trackers.
New

Other popular topics Top

Devtalk
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
1036 18873 386
New
axelson
I’ve been really enjoying obsidian.md: It is very snappy (even though it is based on Electron). I love that it is all local by defaul...
New
AstonJ
poll poll Be sure to check out @Dusty’s article posted here: An Introduction to Alternative Keyboard Layouts It’s one of the best write-...
New
PragmaticBookshelf
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
DevotionGeo
The V Programming Language Simple language for building maintainable programs V is already mentioned couple of times in the forum, but I...
New
AstonJ
We’ve talked about his book briefly here but it is quickly becoming obsolete - so he’s decided to create a series of 7 podcasts, the firs...
New
New
PragmaticBookshelf
Author Spotlight: VM Brasseur @vmbrasseur We have a treat for you today! We turn the spotlight onto Open Source as we sit down with V...
New
hilfordjames
There appears to have been an update that has changed the terminology for what has previously been known as the Taskbar Overflow - this h...
New
First poster: bot
zig/http.zig at 7cf2cbb33ef34c1d211135f56d30fe23b6cacd42 · ziglang/zig. General-purpose programming language and toolchain for maintaini...
New