We’re on track to roll out SSL for all CloudFlare customers by mid-October. When we do, the number of sites that support HTTPS on the Internet will more than double. That they’ll also rank a bit higher is pretty cool too.

CloudFlare is the coolest free CDN option out there. They responds so quick to the new Google’s HTTPS as a ranking signal.

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 to verify it afterward.

SSL

Google recently announced that they are taking HTTPS as a ranking signal. StartSSL offers free SSL that is included in root SSL of most major browers. CloudFlare is also going to offer free-SSL to all customers (mid-October). I’m going to wait for CloudFlare a bit since I’m already using CloudFlare for this blog.

Jekyll plugin directory Wiki

I believe blogging help me learn better. In order to write about a subject, first I have to understand it throughly. Blogging is a way to documentating all your thought, your understanding into words.

Many people I talked with afraid of being wrong on the Internet. Don’t be. I do it all the time. I learnt a lot from the feedbacks.

If the feedback is right, you then learn something new, which is great. That’s the whole point, right!

If you’re wrong, please don’t get offended. A feedback could be wrong but it will also help you understand the subject better and get better at defending your view. Either way, it helps.

Actually, being wrong may actually speed up the learning process.

“The best way to get the right answer on the Internet is not to ask a question, it’s to post the wrong answer.”

– Cunningham’s Law

You will be surprised at number of people can’t wait to prove you wrong.

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.

• Pagination at the bottom will like to each page followed by a link to post-url/all/.

• Posts will have paginate: true in their YAML header to enable this feature.

• Posts will be broken up by html comments like <!--page-->.

• The un-broken post will add visual page divisions, probably an <hr>.

• There will be a way to direct read-later services (like Instapaper) to the un-broken post page.

I don’t actually need this plugin as my posts are mostly short posts but I will take this as a fun exercise over this weekend or next. The plugin will be available on GitHub later.

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.

In general, plugins you make will fall into one of three categories:

• Generators
• Converters
• Tags and liquid filters

We shall try with liquid filter first today, which is the easiest one IMO. In this tutorial, we will create a plugin that convert [x] and [] into emoji icon checkbox.

Filters are simply modules that export their methods to liquid. All methods will have to take at least one parameter which represents the input of the filter. The return value will be the output of the filter.

Create a file named Checked.rb in your _plugins folder with content as below.

module Jekyll
  module Checked
    def checked(text)
      text.sub(%r{\[x\]}i, '<span class="ballot_box_with_check"></span>').sub(%r{\[\]}i, '<span class="ballot_box"></span>')
    end
  end
end

Liquid::Template.register_filter(Jekyll::Checked)

We just created a module with a method that take a string as param and replace [x] and [] with a span tag with respective class.

We will then apply this filter on post content (or anything you want to apply this filter on).

{% content | checked %}

In your css file:

.ballot_box_with_check:before {
  content: "\2611\ ";
}

.ballot_box:before {
  content: "\2610\ ";
}

The result looks something like this

And there you have it: your very first jekyll plugin. Be sure to check back for more jekyll tutorials :) .

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.

1. Make changes in the source branch
2. Build and test the site locally
3. Commit changes to source branch
4. 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.

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.

{% include analytics.html %}

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. I just modified it to suit my needs, adding stuff like: grouping post, generate yearly archive.

If you want to take a peak, head over to the plugin’s repo on GitHub.

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). This is actually plenty for my needs.

Install jekyll

Install rvm or rbenv. If you already have one, skip this, then install jekyll

curl -L https://get.rvm.io | bash -s stable --ruby=2.0.0
gem install jekyll

Create your new blog and git init it.

jekyll new example.org
cd example.org
git init
git add .
git commit -m "Initial commit"
jekyll serve --watch

Deploy

I create a script on my repo post-receive. Upon receive my push commit, the script will rebuild the site from source, output it to nginx public folder /usr/share/nginx/html/example.org and purge varnish cache afterword. Purging varnish cache is optional but I do change my CSS/JS occationally now and then so I put it there as well.

You can do this by following this tutorial on DigitalOcean - “How To Deploy Jekyll Blogs with Git”. It’s pretty easy to follow. Use your copy-paste-fu.

Note: If you’re using Ubuntu 14.04 or later, you will have to do to apt-get install nodejs as well. jekyll itself doesn’t depend on nodejs but execjs does.

Others

I wrote a bunch of posts about jekyll as well. Check these out if they interest you.

• BetterTube - A jekyll plugin for embedding YouTube videos

• Static assets combine with jekyll

• Speed up jekyll site generation with rsync

• Setup custom error page for jekyll on nginx

• Create a contact form with jekyll

• How to group posts by month in Jekyll archive page

• Link Post in Jekyll

• Optimizing the hell out of your site for PageSpeed (relevant)

• Using AngularJS with jekyll

• Using GitHub issue tracker as comment system for jekyll

• A better sitemap for jekyll

• Localization with jekyll

• Post scheduling with jekyll

• Monthly/yearly post archive generator for jekyll

Happy blogging. Don’t forget to share your cool jekyll hack on your new hippy blog.