Building a Tumblr theme with GruntJS

Building custom themes for Tumblr

To create themes for Tumblr one has to create a single HTML file and paste the contents into a editor on Tumblr(or create it in that editor). If you like me want to separate the files into at least different files for LESS or CSS, Javascript and HTML you need a tool to generate the concated file. Doing that without a tool grows tiresome really fast.

Grunt to the rescue.

GruntJS is a task-runner written in Javascript. It is intended to automate tiresome tasks in web projects. There are a lot of great plugins written for Grunt. A few of them has been really helpful when trying to automate the Tumblr theme process.

The Gruntfile I created does the following: compile less files, add a list of css files as inline style, copy the built file to clipboard and remove the generated files. Running grunt will place the theme in your clipboard so you can head over to Tumblr and paste it into the editor. Even better it is possible to run grunt watch to do this whenever a file is saved.

The cookiecutter template

I have created a cookiecutter template with a Gruntfile that generates the theme and places it in the clipboard like I described above. To use the cookiecutter project template run the command below. If you haven't heard of cookiecutter take a look at the documentation.

cookiecutter https://github.com/relekang/cookiecutter-tumblr-theme.git

In the future

It would be awesome if all it took to update the theme was grunt deploy. We will have to stick with pasting it for now. That said any feedback, requests or pull-requests are highly appreciated.