Github gists: revisioned code snippets for free

Warning: This blogpost has been posted over two years ago. That is a long time in development-world! The story here may not be relevant, complete or secure. Code might not be complete or obsoleted, and even my current vision might have (completely) changed on the subject. So please do read further, but use it with caution.
Posted on 26 Dec 2010
Tagged with: [ gists ]  [ github ] 

If you maintain a tecnhnical programmers blog, you occasionaly need to post code snippets. I use a syntax highlighter plugin on my blog to make those snippets look nice and highlighted. It works and it’s easy enough to implement and maintain. But Github might come with a even better solution: gists…

What are gists?

According to the gist.github.com website:

"Gist is a simple way to share snippets and pastes with others. All gists are git repositories, so they are automatically versioned, forkable and usable as a git repository."

So in essence gists are lightweight repositories.Instead of creating a complete repository for only 1 or 2 files all the time, just add them to a gist. You could add small example files, data output, simple classes, SQL query’s. Everything that you like to display on your blog but is too small to keep in a separate repository.

It has lots of advantages over just adding the snippets to your own blog:

  1. You can add multiple files to a single gist. Which means all example files, classes etc are grouped nicely.
  2. You can version your code. Small bugfixes in your code can be changed and you still maintain a history.
  3. People can instantly fork the repository so they can try your code almost instantly.

Adding gists to your blog

Adding gists to your own blog is easy. But first you must take 2 initial steps:

  1. Add a gist plugin to your wordpress blog (there are multiple wordpress plugins for it)
  2. Login or get a Github account (it’s free).

After these steps, adding snippets to your blog is simple:

  1. Create a new snippet at https://gist.github.com/
  2. Add your files to the gist.
  3. Add the snippet to your blog with the special [gists] tag.

The gist plugin will take care of the rest. It will load AND syntax highlight the snippet code and as an extra bonus it will add your snippet code to your html source so google and other search engines can find your blog through keywords found in your snippets.

Example

I’ve created a simpe gist with 2 files. The actual gist can be found on https://gist.github.com/755406. The first file is a simple code snippet, the second one is a SQL query. Both files have a revision history and it’s easy to implement them your own site or blog. You can do this through a plugin or just add the script-code which can be found when you click the “embed” button on the gist-page. It will return the script-code you need to add so it displays the gist:

<script src="https://gist.github.com/755406.js?file=phpinfo.php"></script>

So to be precise: it will display the file ‘phpinfo.php’ from gist 755406.

And the same goes for the SQL query i’ve added to the gist:

Enjoy.