Jekyll

Make your jekyll blog a little bit more SEO-friendly

Content is the king but making the site a bit more SEO-friendly (or should I say Google-friendly?) doesn’t hurt. Load speed Relevant link: Optimize the hell out of your website for PageSpeed. Sitemap Help Google’s bots crawl your site better. jekyll provides it as a plugin. Structure data markup Use Google’s structure data markup helper to generate structure data markup code. Use [structure data testing tool](Structured Data Testing Tool) to verify it afterward.

Paginated post plugin for jekyll

I was wondering if anyone has created one like this before and stumbled across this issue on octopress repo. imathis came up with this proposition for paginated post. The primary page would be the standard post url. Successive pages would be at post-url/2/index.html, etc. The atom feed will still show the full un-broken post. A unified post will live at post-url/all/index.html containing a print-friendly, un-broken version of the post.

How to use jekyll plugins with GitHub Pages

Very cool idea by @randymorris. Basically, actual source will now live in the source branch and generated content (_site folder) will be in master instead. Make changes in the source branch Build and test the site locally Commit changes to source branch git publish-website which consists of the following steps git branch -D master git checkout -b master git filter-branch --subdirectory-filter _site/ -f git checkout source git push --all origin This is actually similar to the approach: develope locally and rsync _site folder with your VPS/host public folder but works with GitHub Pages.

Writing your first jekyll plugin

jekyll documentation is actually a very good source if you want to learn about writing a jekyll plugin. I highly recommend you to read that first. There are many examples at the end of the page as well. Jekyll has a plugin system with hooks that allow you to create custom generated content specific to your site. You can run custom code for your site without having to modify the Jekyll source itself.

Embedding Liquid code snippet with jekyll

If you want to share some Liquid code snippet or say some Django code, jekyll would try to process it as it looks like valid Liquid template and throw some weird errors. The solution is to use raw tag. Again, I cannot use raw tag nested inside raw tag. Though, you would probably never have to do it, unless writing a blog post about something like this. {% raw %}

Monthly/yearly post archive generator plugin for jekyll

Basically, this plugin will generate a archive based on your specified layout so that you can access it at url like example.org/2014/ example.org/2014/08/ At first, I thought this is one of the default feature of jekyll but I was mistaken toto for jekyll. toto was another static site generator that I used before. Anyway, this is what you are gonna get at the end. I’m not the author of this plugin.

Blogging with jekyll

I started using jekyll with Github Pages few years back but Github Pages didn’t allow plugins at the time and I do want to hack a bit around jekyll for my needs so I gradually move to self-hosting. As for static blog doesn’t require much resource, I opted for the lowest package on RamNode which goes for $15 a year (a bit over a buck a month for a 128MB RAM VPS).

BetterTube - A jekyll plugin for embedding YouTube videos

Sample syntax {%raw%} {% youtube http://youtu.be/NiYCgVKioI4 %} {%endraw%} or even shorter {% raw %} {% youtube NiYCgVKioI4 %} {% endraw %} Basically, this plugin will replace your youtube tag with a beautiful, responsive thumbnail of the video instead of loading the iframe and a bunch of other stuff along with that iframe, right on page load (pagespeed, remember?). On click, it will replace the image with the iframe for embedding video and play (autoplay=1).

Static assets combine with jekyll

If you have several css files, each for different purpose, combining it into one would minimize HTTP requests and improve load times significantly. jekyll mades it very easy with include tag. Here’s how you do it. Move all the css files you want to include to _includes folder. You create a new layout in _layouts folder called style.html and includes the needed css there. {% raw %}

Setup custom error page for jekyll on nginx

First of all, create your custom error page. You can either use static html or jekyll template for this. If you decide to use one of your custom layout, the path will be a bit different when jekyll generates static pages. I created a 404.html file that looks like this. --- layout: default title: "404: Page not found" --- Olps. Now if you create one like mine above at root, it will be generated as 404/index.