Template for Sculpin and Netlify

On the look out for available templates on the interwebs for deployment of a static site on Netlify build with Sculpin and Grunt I stumbled on some intriguing templates but none with that exact combination. There are templates available for different static site builders and build tools on Netlify’s dedicated repository of templates, like a lot with Hugo, typically integrated in a Gulp workflow.

One template, the Kaldi Hugo Template which itself is based on the Victor Hugo template has Netlify CMS as an npm dependency. This allows for a local installment of the CMS, which is funny but can also be a bit confusing, and in my experience unnecessary. 1

Hugo is a static site builder rapidly growing in popularity with very fast performance due to the Go rendering engine. But the Go language is also making it difficult to debug for someone new to the language. And we all make typos and syntax errors so this can be an issue. I just had to make my own template with Sculpin – which I love – but where to start?

Static Site build with Sculpin

I thought about it for a while and in the end it made more sense to me combining the Kaldi Hugo Template with the skeleton template for Sculpin, rather than to start from scratch. Sculpin works out of the box when following the instruction from the quick start guide. Sculpin comes with all you need for a website, complete with pagination, blogposts with categories and tags, which in itself is already impressive. It is also a reliable tool, making it a joy to work with. It is written in PHP and uses Twig templates that can give feedback in the terminal on syntax errors, which can be quite helpful from time to time. The syntax for the Twig template tags doesn’t differ that much from any other templating language, it can be inside markdown files with Yaml front matter for metadata on top, so converting the templates from the Kaldi Hugo template to the new Kaldi Sculpin template was really quite straight forward.

Grunt workflow

Using Grunt in stead of Gulp was what I wanted, so that’s what I used for the compiling of the Sass into CSS, the concatenation and minification of javaScript, and for the concatenation of several SVG icons into one partial. I can work much faster in Grunt, doing anything really, and I like the more declarative syntax.

Deployment on Netlify: CMS Integration

Trickiest bit was to integrate Netlify CMS by editing the source/cms/config.yml file: any syntax error can trip you up and make the CMS show an empty space where the entry in the admin should be. But ones you get the setup right the rest of the workflow, editing – deploying, can be a smooth process.

Simplicity

It’s exciting and beautiful to be able to edit those blogposts written in markdown right in the browser within an admin complete with preview panel. In the end the template I baked can be seen as a simplification of the Kaldi Hugo template, (but also with some additions like a collapsible navigation for small screens, pagination, categories and tags). It’s more like simplification-in-the-sense-of templating without too much fancy functions, ending up maybe a little less DRY than the original Hugo template because of this …. Also the implementation of the integration of Netlify CMS into the setup was done in the most minimal way: I really do prefer simplicity over complication.

There is smartness all around but it’s simplicity that lacks too often in webdevelopment, but that’s the way I like it!

As far as I can see the easiest way to get started with Sculpin deployed with Netlify at the time of writing is to download this Kaldi Sculpin Netlify Template and make it your own. You can see a preview how it looks over here on Netlify.

If you follow the instructions in the readme, edit the package.json and config files to reflect the name of your own new repo and so on, one should be able to kickstart a Sculpin project with Netlify CMS in considerable less time than it took me initially.

NOTES

  1. A local install of the admin only reflects the local website, so you have to do a git pull origin master to see the edits made on the remote server, which makes sense, but can add up to the confusion when by accident you would edit posts locally in the admin in stead of on the remote server. So yeah, I don’t know, I think I can live without that part ….

RESOURCES

This article was also published on Codepen