Gangmax Blog

Add 'QR-Code' Plugin to Octopress

Today when I was revisiting Octopress and reading the 3rd party plugins list, I found an insteresting one “QR-Code“, which can display the QR code of your post URL in the Octopress sidebar.

So I installed it on my octopress instance. If it works, you should see it now on the right side of this page. Here’s how to make it work.

  1. Get the latest “QR-Code” code:
git clone
  1. Copy the “qrcode.html” to your octopress directory:
cp ./Octopress-dynamic-QR-Code-aside/qrcode.html ~/octopress/source/_includes/custom/asides/
  1. Modify your “_config.yml”:
# Add "custom/asides/qrcode.html" to the "default_asides" array.
default_asides: [custom/asides/qrcode.html, asides/recent_posts.html, asides/github.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]
  1. If you want you can change the size and the color of the QR-Code image by editing the “custom/asides/qrcode.html”:
<img src="|0&chco=4D5794&chl= ... ">
  1. You can use “gpick“ to pick your favorite color on Ubuntu:
apt-cache show gpick
sudo apt-get install gpick
  1. Run “rake generate” and “rake deploy” to see the effect. Note that the effect can not be reviewed until publishing, for only at that time the real URL of your post can be generated.

And you can see, in fact this plugin uses the Google Chart API to generate the QR code image. It’s a very fascinating idea.