ebullient·works

[ About · Archive · Tags ]

Jekyll templates with Docker containers

It took me a few tries (divided attention, grr), but I realized that after messing with blogs for over 10 years, I’ve seen all the things! Way back in the beginning was Movable Type (which I didn’t realize was still a thing), followed by PHP-based CMS like Textpattern and Nucleus CMS, and then a brief flirtation with Blogger (someone made me do it). I have somehow avoided ever having to maintain templates for WordPress (?!). These systems all come back to some pretty basic concepts around templating.

The one snag was loathing having to do anything with ruby. I have never had anything but grief and pain installing ruby anywhere. But hey! We have docker now! Put it in a container and forget about it. WOOT!

I had to cheat a little bit (but only a little), because you have a chicken and egg problem if you’re creating a Jekyll blog from scratch. You can use the source docker image for that, per Jekyll Docker Usage: Running:

  • Create a new jekyll site:

    docker run --rm --label=jekyll --volume=$(pwd):/srv/jekyll \
       -it -p 127.0.0.1:4000:4000 jekyll/jekyll:pages jekyll new .

  • Serve content:

    docker run --rm --label=jekyll --volume=$(pwd):/srv/jekyll \
       -it -p 127.0.0.1:4000:4000 jekyll/jekyll jekyll serve

You get the idea. The docker-compose.yml file makes it easy to set up the container with the mounted volume without thinking about it. Then edit away, and watch your blog rebuild. Not too shabby.

2017-09-12 Edit: At some point, to make life easier, the listening host inside the container was set to 0.0.0.0. I’ve also added some tricks to allow one container to build/update dependencies before my custom project container serves

Docker files for running jekyll without hurting yourself:

  • [docker-compose.yml]({{ ‘/files/2017-04-jekyll/docker-compose.yml’ | relative_url }})
  • [Dockerfile]({{ ‘/files/2017-04-jekyll/Dockerfile’ | relative_url }})

Templates with Flexbox (CSS)

I browsed through a bunch of templates, and decided pretty early that they were all more complicated than I thought was necessary. The most significant non-standard thing for the Game On! blog is that there are multiple authors, and that those authors must be described in a certain way to make the generated atom/RSS feed happy (yes, I looked).

I went back to basics and built the templates up from scratch. I used flexbox, both on the Game On! blog and on my own, for a nice, fluid, responsive UI with minimal HTML (because really, who wants to maintain all those crap filler tags anyway? You’re right, not me). There was a lot of cutting and pasting as there are only so many ways to write a Liquid template to show an index of all Jekyll posts, but in the end, a lot was left on the cutting room floor.

Dealing with Tags (and no plugins)

I like tag indexes, as I use tags a lot. There are a few posts about how to manage a tag index with jekyll and no plugins (important if you’re hosting on github, which I am). Some of them require interesting manual update steps to create individual files per tag, which I think is pretty ick to maintain. At least one Atom plugin aims to help with maintaining files for tags, but.. meh. Maybe someday.

For right now, I cheated / went low-tech. You get one page that indexes the posts by tag (where the post might be on there multiple times, but whatever).

The result

Well, you’re looking at it! One thing sacrificed on my blog is a twitter feed. I’m not sure I care all that much. My twitter feed has been taken over by politics anyway. :sigh:

Blog behavior crossed with DNS: what’s in a name?

One thing I enjoyed stumbling was a blog post from netlify discussing whether you should, or shouldn’t be running your blog from the apex domain. I confess they changed my mind, and now my blog is running at http://www.ebullient.dev/!

References:

Things to look at next: