BecomingAweso.me

Jekyll : The making of BecomingAweso.me

Published on 20 February 2010

“Oh, I’ll make my website soon.”

This is the mantra I’ve been repeating for the past few years, and I’ve held it off for various reasons. Other projects were more interesting. I wanted to dedicate some time to learn PHP. I had school, trips, whatever.

Well recently was hired at RIT to maintain RIT’s CLAWS, where I’m working in mostly in PHP (as well as XML, SOAP, and a mess of other stuff), and that gave me the kick I needed to get started on a site. I also got a handle on CSS and just how the website paradigm flows and such.

The last kicker was recently, Steve Losh wrote about switching his website over to a statically generated website with Hyde. I noticed that Hyde’s Ruby analogue Jekyll was also worked on by Nick Quaranto, whom I go to school with.

By working on a large PHP application, I immediately realized it would be complete overkill to make a personal website. In light of simplicity, I also liked the idea of a statically generated site. It was portable, easy to back up, easy to add posts (only vim required), and more secure, amongst other things.

The Plan

Much like my favorite Linux Distribution, Arch Linux, I wanted my site to adhere to the KISS philosophy- Keep It Simple (Stupid).

Simplicity in Design

I was inspired a lot by Steve Losh’s website, which has a very minimalist appearance. I was also inspired by the Arch Linux website which isn’t necessarily minimalist, but I think does a great job laying out a lot of information in a simple manner.

I wanted to have a mostly blank canvas. I’ve been on a minimalist kick lately, and like my room, I wanted my website to feel empty.

Simplicity in Content

I wanted a website that wasn’t clutterred with too much. I don’t need a blogroll. I don’t need to release a new blog post every day. I don’t need a favorite sites section, and who is seriously going to want me on an RSS feed?

I was to divide the site into few, meaningful parts.

Materials

The Server

I had already been serving up a placeholder site with Nginx. Nginx is simple and lightweight. Perfect for my site.

I added a virtual server to point to a directory of working content, and added a symlink to any media so I can test a development version of the site, and share the same links as the site when it goes live.

Which static site generator?

In the end, I chose Jekyll. It seemed to me to be documented better and more widely used than Hyde, and I had no previous experience with any templating languages, so I had no reason to jump on the relatively new Hyde.

CSS?

I had limited experience in CSS. I started just crafting it by hand, but then I noticed Steve mentioning porting his site over to LessCSS. I took a look at Less’s website, and I liked the sound of it, so I used it.

This has it’s advantages and disadvantages. I think my previous experience in programming combined with the CSS paradigm and what’s allowed by Less made it kind of messy (lots of indents), but in the end it allowed me to maintain and edit my CSS with less thinking.

Action

I started off sketching up a website by hand. I grappled with ideas like a super minimal command-line like interface. I had some more abstract ideas, but I ultimately settled for a simple, but pretty layout.

My First Template

I looked at a lot of examples on the Jekyll site. I looked at the source from the ones that I liked and seemed to function similar to the way I wanted mine to (since my site is slightly more complex than just a blog).

Writing the first template wasn’t very hard. In fact, I quite liked having a template because it reminded me of Object Oriented Design (without the need of a language like PHP). By separating the global elements, and using inheritance, maintaining the site would be easy- essentially because it allows the site to adhere to DRY.

Organizing The Site

To write the site, I took a bottom up approach. I wanted the site to look sane in a non-css browser (such as text based ones I use from time to time), and then take that information and place it gracefully with CSS. Take a look at the site without styles, you’ll see what I mean.

Filling It Up

Filling my site with some content was probably the hardest part. I suppose that’s why I’m not an english major; making content (like an about me) was like writing an essay, wheras just making the site was like coding out a project.

Thankfully now that it’s over, I only really have to revise it, and I can just write blog entries as I please.

Concluding

I’m really glad I sat down and actually finished this site. I feel like now I can direct people to my website, I can reach out to others with informational blog posts, I can host content I created easily. I feel like now I can actually hand out a business card and have it be useful.

But lastly I’m sure this has solidified my belief that I’m never going to be a web designer. I didn’t enjoy this as much as I did learning about and writing a genetic algorithm or any of my school projects (apart from the rewards that I mentioned in the paragraph before). I could definitely do web apps- but only if I was a back end developer :P