shadr.us

Exploring GitHub Pages

I’ve been playing around with GitHub Pages and I think I’m liking Jekyll (and Pygments) a lot. As someone who builds code all day long, typical blogging software (like Wordpress) always makes me feel a bit far removed from my content. I prefer getting a little closer to the metal (but not too close). So far, this has been the perfect mix for me.

Pages

GitHub allows you to easily create an host your own site. I would go through how to set that up, but it’s so ridiculously simple and well documented on their website, there’s really no reason. Once you’ve set up your GitHub account, just visit GitHub Pages for more info.

Pygments

I want to write more articles about Javascript and Ruby. I’ve read enough horribly formatted articles to know that if you’re going to have code examples, you need to have the syntax properly highlighted. B&W that streams over the right margin into home mortgage adverts just doesn’t cut it. Therefore, it’s essential that I have well formated code. Also, I’m lazy, so I’ll need it to be simple. Jekyll’s integration with Pygments is just that, simple and seamless.

For Example, when I type:

{ % highlight javascript % }
(function anon() {
  // do stuff in here.
  // A very long line mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

  if (this.istrue && /foo/.match('foo')) {
    return true;
  } else {
    // Do something else
    things.each(function (thing) {
      thing.setName('The Thing');
      thing.setDescription("Something old, something new, something borrowed, something blue.");
    });
  }
})();
{ % endhighlight % }

Pygments produces:

(function anon() {
  // do stuff in here.
  // A very long line mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
  
  if (this.istrue && /foo/.match('foo')) {
    return true;
  } else {
    // Do something else
    things.each(function (thing) {
      thing.setName('The Thing');
      thing.setDescription("Something old, something new, something borrowed, something blue.");
    });
  }
})();

Which looks pretty nice.

iPhone

I also wanted a site that would look really nice on the iPhone. Really, there’s not much to that. Just keep the content simple—try to keep things to one column. Set a width with your CSS:

#wrapper {
  max-width: 500px;
  min-width: 500px;
  width: 500px;
}

And include one simple statement at the top.

<meta name="viewport" content="width=500" />

Now when my page is loaded on an iPhone, it looks really nice.