A Simple Template for Hakyll, SASS, and Foundation

For simple web sites a static web site generator is often sufficient. Jekyll is such a well know generator. In our company we use JBake, because of its good integration in the Java infrastructure. More information on that is found here:  Integration of JBake in Maven – Static Websites.

In my nonbusiness life, I like to play with Haskell. This is why I used Hakyll for a small personal web site. I wanted it to be responsive and choose to use Foundation. To do some styling of the Foundation classes I needed to use SASS and embed it into Hakyll. It took me about two hours to put everything together. To save this time in the future, I extracted a small template with everything in it.

You can find this template on GitHub: https://github.com/tnfink/simple-hakyll-sass-foundation-template. It is based on the Haskell Tool Stack, which must be installed beforehand.

To get the template up and running, first clone it:

git clone https://github.com/tnfink/simple-hakyll-sass-foundation-template.git

Then you need to build it. The first time it takes a little bit longer, because stack downloads the needed third party packages.

cd simple-hakyll-sass-foundation-template
stack build

If everything went fine, you have a web site generator built with Haskell. Now run it with an embedded web server:

stack exec site watch

The site is now available at: http://127.0.0.1:8000/

The project structure is pretty simple. The directories htmls, js, and images contains artifacts, which are directly copied into the generated site. The site uses only one template: templates/default.html. This template is used by two pages located in pages. The complete Foundation SASS distribution is included in scss/3rdParty/foundation. The site-specific styling is in scss/project/styling.scss.

In site.hs all the Hakyll wiring is done. If you understand Hakyll it should be easy to understand how it works. Even without a thorough comprehension of Hakyll the code should be readable.

For my small project, this setup was a good choice. You can look at the result here. The only annoying thing for me, is that an error in the SASS files breaks the watch server of Hakyll. This is probably because of the integration of the binary SASS library. With plain Haskell libraries, errors do not stop the watch server.