July 02, 2013

Announcing: This blog

And notes on blog workflows

I’ve been meaning to get this blog up for a really long time. I designed it a while ago as an experiment with randomly generated color schemes. It’s been through a lot of iterations and I felt like those needed to be documented, just in case anyone’s where I’m at right now and feels like they could use advice.

###history

etc. started out as a place to keep various snippets of junk: text, images, quotes, what have you. It was conceived as a sort of micro-blog, purely because I like making lists of things. Some of the original content was things like “songs with trumpet solos” or my Instagram photos of secret lunch spots in the city.

The color scheme thing started when I wanted to categorize each type of content, similar to how Tumblr does. I was having a hard time finding a harmonious color scheme when I thought, hey, why not just randomly generate one? So I hooked it up to the colourlovers API and that was awesome.

I left it alone for a long time after that while I thought about what content to put on it. Slowly I was starting to develop my own blog and I realized I needed a place for longform text as well. I decided to ditch the microblogging idea and just have etc. be a place for blog-like content. So I redesigned it (the original design was a grid of squares) and redid all the typography and everything.

###implementation I had the design for a while before I ever coded anything. It was always going to be a wordpress plugin: I figured wordpress had the functionality I wanted and was straightforward enough to be worthwhile. I’m pretty sure I was wrong about that.

Sometime after I hadn’t done anything in a long while, Darrell Silver advised me to not use Wordpress for anything, citing his main reason as ‘PHP sucks’. His secondary reason was that I shouldn’t care about self-hosting, and he recommended I use Tumblr.

So on one down day during the school year I sat in the lab and coded up etc. as a Tumblr theme. It was unintuitive at first: the distinction between different pages confused me. Static files were clumsy (you had to upload them to a special server via a web form). But it was finally up and working. And I could write content for it.

###frustrations Tumblr, as I anticipated, was too limiting for my desires. I wanted subtitles on my index page. I wanted to add custom classes to my section-headers (and having to edit the raw HTML in their editor was maddening). I wanted to add images in different places. I wanted to be able to quickly make iterations on my static CSS files, and not have to re-upload them every time.

Actually, I found a solution for that last one: Dropbox. I’d generate a public link off files in my dropbox folder, append ?dl=1 to the end of it, and then point my <link> url to it. Then any changes I made locally were automatically synced to dropbox’s servers and sent out to my site.

###enter Jekyll I heard about Jekyll when David Sleight started using it on his blog. I didn’t fully comprehend its capabilities until recently I was checking out the documentation though. It was everything I needed: Writing in markdown, local development, templating, and automatic blog functionality. I was so excited to get it up and running I almost didn’t sleep for two days.

Jekyll’s quickstart is pretty amazing, and their documents are super comprehensive. However there were a few pitfalls and things I didn’t understand the first time that could be smoothed over.

  1. In layouts, you have access to YAML front-matter variables, but they’re stored on the page object and not the post one. It half makes sense and half doesn’t: I’m not quite sure what the distinction is between posts and pages (maybe there isn’t any).
  2. Liquid Templates can’t mix logic and filters. Which is super frustrating for my specific use case. I wanted to render dummy posts in case the total number of posts was below 10. To do this I needed to compare the output of site.posts | size, which you can’t do as it gives a comparison error, because it outputs a string and not a number.
  3. Architecturally I’m not quite sure what to abstract out in my layouts. I have one index page and one single-post page. They repeat a fair amount of html, but I can’t modularize the <head> tag because the pages each require different css. If anyone knows a good way to do this, let me know.

###finally Now all that’s left to do is write content. I have some things I’m planning to port over from my old Tumblr blog, but most of this will be new. A lot of it will be game reviews. Some of it will be design community discussion, because that’s always ripe with (silly) controversy. And some of it will just be fun.

@RobertVinluan