May 09, 2018

Jekyll Site Improvements

I’ll talk about some of the things I’ve done to make this site a bit more my own, or upgrade it a bit. You can also follow along in real-time by following the source

Customized fonts and colors

This was one of the first things I did, and one of the reasons I moved away from Blogger - it was very difficult to customize Blogger’s appearance, With Jekyll, it’s much easier, and Tale has extremely nice scss support, and a particularly nice variables.scss file. I’ve never dealt with scss before, but it was super easy to figure out and change. Commit 9faf7e0

Customized layout

Since Jekyll is a normal content site with a good templating engine, it’s pretty easy to customize page layout too, just by editing the layout files. You can also add custom layouts for specific posts, which I’ll cover when I talk about Mathjax. I made a few changes early on in commit 492a6d5 and commit 78a49e2.

Thumbnail generation

One of the things I really wanted in my new site was a seamless way to integrate photos. I still haven’t gotten it where I want it (I wrote up a draft on that), but one thing I did add was a thumbnail generation script in commit 46473e3. Unfortunately, it does need to be triggered manually.

Mathjax support

This was my first foray into custom front matter, adding a math: true tag to my front matter enables a code block that loads mathjax. This is pretty cool - I could just enable mathjax on every page, but by only loading it when needed, I can make pages more lightweight and load faster. That was added to _layouts/post.html in commit 627c82e

Google Analytics

I wanted at least a little bit of metrics on how many people actually looked at this site, so I added Google Analytics. I should probably add a customization so that analytics is only added on the live site, because I definitely pollute my data when I’m editing the site locally. That’s a task for later, though. Analytics was added in commit 8a78a67.

Debugging Page

I didn’t actually have anything to debug here, but again while browsing the Jekyll docs, I found some stuff I wanted to try. This is roughly equivalent to a “dumpfile” that you might have in other post-processors, but you can peek at it if you navigate to /about-technical.

Jekyll Plugins

I was browsing through the available Jekyll plugins and decided to add a few. They were all ridiculously easy to add, which has been awesome.

XML Feed

I found one to generate an Atom XML feed, which would be great for anyone that wants to follow with an RSS reader (I use feedly). Turns out it was ridiculously easy to add, just two lines in commit 19bc218.

Sitemap

Adding a sitemap is useful for search engines to correctly crawl your webpage. My secret goal is to push this blog way up on Google results for “Landon Carter” or “Landon Carter Blog” or similar. There are a lot of other Landon Carter’s in the world - I need to surpass them all, at least on Google. Anyway, adding a sitemap was literally just another line in _config.yml in commit 52e38fd.

SEO

Search Engine Optimization adds some meta information to page headers so that search engines know what they’re looking at. It also helps with sharing things on Facebook or other social media sites. This one was slightly more involved, at 3 lines of code in commit b3c3383. I can also add custom SEO tags, like I did for my dinner party post. I added a custom image so I could share it on Facebook with that specific image selected, you can see that change in commit a7ce057.