Elmstatic: an Elm-to-HTML static site generator

[alexkorban]

I made an Elm-to-HTML static site generator. Still very early stage and experimental but I’ve been using it for my site for a while, and I’m pretty excited about it because I enjoy being able to use style-elements and elm-css instead of plain HTML/CSS (especially CSS!).

It has these features:

• Pages generated from Elm code, possibly arranged in some kind of a hierarchy (you can use style-elements, html or any other package that generates Html msg values)
• CSS generated from elm-css stylesheets in Elm code (but you can use plain old stylesheets if you like)
• Any page can be designated to be the index page
• Page templates for posts and lists of posts (fully customisable)
• Posts are written in Markdown
• Posts can have multiple tags
• A page with a list of posts is generated for each tag
• RSS is generated for the posts
• Code highlighting via Highlight.js (but you can set up whatever you want)

In terms of implementation, it’s JavaScript packed into an NPM package (npm i -g elmstatic) that relies on elm-static-html-lib to generate both HTML and a global CSS stylesheet.

I hope there are a few people out there who might also want to use Elm for their site or blog! In any case, I’d appreciate any feedback.

There are a lot more details in this post: https://korban.net/posts/elm/2018-05-03-introducing-elmstatic-elm-static-site-generator/

The source is here: https://github.com/SupremumLimit/elmstatic

[ianmackenzie]

Looks very nice! Is there a way (or might there be in the future) to mix bits of Elm code into the Markdown posts? I’d love to be able to write posts which would be a mix of Markdown text and bits of Elm code to provide things like interactive inline examples. Right now the only options I see are to either write the entire post as an Elm app with a bunch of Markdown string literals, or embed interactive examples in iframes, both of which are kind of awkward.

[alexkorban]

Instead of iframes, you could embed divs into your Markdown, and then add some JavaScript to start an Elm app for each of these divs. You’d have to produce the corresponding elm.js somehow, of course. Would that be simple enough?

I think it would be quite a lot of work to do it in a more automated fashion. It’s simple enough to get the generator to insert the relevant JS, but it’s rather more confounding how to make this work on the Elm side. Some of the source would have to be converted into HTML/CSS, and other source would be part of regular Elm app(s). It’s an interesting idea but I wouldn’t take it on any time soon.

[ianmackenzie]

Intriguing idea! I’ll have to think a bit about exactly how that would work, but it does sound like a good approach.