Joseph Ryan

So it begins...

I’ve spent the past few days learning about the jekyll ecosystem, and I think that I finally have a good enough lay of the land to get my site up and running. Trawling through the myriad of themes, plugins, and deployment methods is rather exhausting, so I’m going to document the process in hopes that I’ll never have to do it again.

Theme

Because content is irrelevant and what really matters is having a neat looking website, the most important decision is choice of theme. I want something clean and dark, and after agonizing over a bunch of choices I’ve picked @sharu725’s dark-side theme. My other favorite from the ones I considered is clean-dark by @streetturtle. The latter is definitely more full featured, but I want to be able to understand most of what’s going on in my site so I’m going with the simplest option that still looks good. The nice thing about understanding it is that I can tweak things. So far I’ve changed a few lines of css to make the accent color a nice shade of blue and altered the way that headers are rendered. I’m also trying to change the mobile tab color, but I can’t really test that until this goes live. (update: it works at least on android with chrome)

Plugins

My theme came with disqus comments and google analytics built in. Any other features I want will come from the huge collection of jekyll plugins. The worst part is that there are usually several plugins that do the exact same thing, so I have to pay more attention to make sure I’m getting the most elegant/modern/working/featureful one.

Inline code highlighting

Jekyll already has support for syntax highlighting, however it forces all code to go in a new paragraph like this:

puts "Hello, #{reader_name}. Check out this really long line of text which hopefully wraps correctly on mobile or at least scrolls correctly!" 

This would be annoying if I had a bunch of short code snippets that I wanted to highlight, so I got a plugin that lets me do it like this instead: puts "Hello #{reader_name}". I wish I could just use backticks instead of liquid for code segments, and I may try to add that in the future.

Github @ mentions

I already used this one to mention the theme designers above. This way I can reference cool people like @jvns and @pervognsen with links to their github profiles instead of having to track down their personal sites.

Jemoji :pineapple:

This lets me specify emoji the same way you would in slack like :emoji-name:. Now I can express how angry I am about my favicon not displaying properly… :rage:. There’s also this nice gist that I can use to look up a specific one if I forget it.

Responsive images

I remember when working on my old website it was a pain to optimize all my images. This plugin does all the resizing at build time so that you can spend less time watching a page load and more time looking at my cats:cats

Sitemap and feed

Apparently sitemap makes it easier for search engines to index the contents of the site, and it was trivial to add so why not. Same reasoning for the RSS feed, the plugin doesn’t need any configuration and there’s a chance it’ll be useful to someone.

Extras

There are a few other plugins I’ve played with and decided to leave out for now. I’ll list them here in case I change my mind:

Deployment

At first it sounds really cool that you can just push your markdown to github and let them handle all of the site generation, but then I realized that they (understandably) won’t run 99% of plugins so they aren’t exposed to arbitrary code. I was about to resign myself to just generate it locally and push the entire static site to github, but someone (cough @rrbutani cough) told me about using Travis CI to build it, and who can resist the allure of free compute. It also can do nice things like blocking an update if you introduce broken links.

Despite how much time I spent configuring everything, I’m still impressed by how easy it was to get a functional personal site that looks better than Stallman’s ever will. The best part is that the combination of jekyll + travis + disqus + github pages + namecheap’s edu program lets me run my site completely for free (I do have to pay for the domain after the free year is up but that’s like the cost of dinner for another year)