Adding Tags to Jekyll Now

Tags: code github jekyll markdown

Jekyll Now

I thought I'd start off by writing about something fresh in my mind: the technical aspects of this blog! I've decided to use a static page blog using Jekyll and hosted by Github. In addition, I'm using a out-of-the-box solution called jekyll-now. I've chosen Jekyll for a variety reasons, but the main ones are:

  • Jekyll is very customizable. Jekyll is simple to use, which makes it easy for me to build with it.

  • Jekyll is fast. The generated static sites should be served much quicker than dyanmic sites like Wordpress.

  • I have lots of ownership. I see the code for the entire solution, so I know or can learn how things happen.

  • Easy Github integration. My personal website is hosted through Github Pages, so adding a Jekyll blog to it is super simple if I also host with Github.

  • Last but not least, I feel like a 'hacker'. Rich text editors? Psh, I'll be learning Markdown.

Thoughts on the Current Layout

So after following Barry Clark's great jekyll-now tutorial, I really liked what I saw. The layout is minimal, elegant, and beautiful. There is a main feed that shows you a list of blog posts with a sizeable snippet to allow readers to the first portions of the posts.

Adding Tags

One feature that I didn't see was tagging. I decided to follow Theby's jekyll-now branch, which adds a tagging feature in. It takes tag indices from posts and generates corresponding pages (a page for each tag, a list of tags on each poss) for those tags. For example, for this post I added tags: [code, github, jekyll, jekyll-now, tagging] to generate these tags.

Problems on Live Version

Theby's code worked great for sites without a base_url (sites without a base_url are assumed to just be hosted at username.github.io.), but for my blog, I'm hosting it at http://txizzle.github.io/blog because my blog is a separate project repository being pushed through Github's project pages. I changed some of the tag-generation links in Thelby's branch:

I basically replaced all <a href="/tag/"> </a> into <a href="/old_blog/tag/">. Not too much of a change! I'm just changing some href links, a fairly semantic change. This change allowed my blog to work locally; clicking tag links works for every location tag links appear (on posts, on the main page, and on the tag feeds).

However, the tags have not worked when I've pushed my blog online! If you try clicking the tags above this post, you'll get a 404 Error. Why is this happening? I'm not certain. It may be that the tag generation code is not working, so the tag_index pages are just never generated. I don't know if this is the case, because the <a href> html links still redirect to the URL that I expect. There's just nothing there. Anyways, I've asked Theby what's up, and will update with anything I find. Keep posted 'til next time! This blog will look great(er) in no time.

Update: It turns out the issue is that Github does not run Ruby plugins (how I'm generating the tags) when you push to Github Pages! Charlie Park had a great article on how to work around this. Essentially, I generate the site locally, and push the generated files directly onto Github (as opposed to having Github both generate and serve the files). Cool! Tags work now. I'll make them more aesthetically pleasing when I customize this blog more.

Written on November 14, 2015