How I Made This Very Website
Pt. 1 - Meta-Blog Madness!!!

Yes, I know writing a blog post about making the blog on with post is hosted is maybe a little bit too meta. But how we do anything that we would associate with ourselves should merit some reflection, and I have to blog about something, right?

It’s been too long since I blogged. I was blogging about JavaScript about two years ago at joelcodes.tumblr.com, and it was a lot of fun. I was pretty excited about what I’d learned in JavaScript, like how to use closures and the this keyword, but between work, school, and getting married, I stopped writing.

Which, you know, don’t. Never stop never stopping.

Fast-forward to now

I’ve grown in the last two years as a software developer, maker, and all-around panda-hatted creative, and I felt that I wanted to have a portfolio / blog website that matched that. My objective was to display my technical abilities, experience, communication skills, and personality in a clear way. And while I want to show that I care about design, you’ll notice that “ability to design a website” was not on that list. So I outsourced. I sifted through dozens and dozens of great HTML themes on ThemeForest, and landed on one that I liked, called “I’m Mat”. HTML/CSS in hand, it was now up to me to make some content. This is a job for a CMS!

(shudders audibly and visibly)

Don’t get me wrong, I don’t think CMS’s are bad. I’ve worked with a lot of them. It’s just that, I don’t want to launch a full web app with a database and server code and the CMS’s very opinionated way of defining themes and content. It’s a great turn-key system if that’s what you want, but, stated simply, it was gonna be overkill. I just want HTML pages that are generated from data content.

My first attempt was to use Gulp.js and Razor. I’ve mostly worked at .NET shops, so I was familiar with Razor’s native C# incarnation, and there’s a JavaScript version of it out there that I had managed to make pages with. It was pretty easy to turn all the pieces into partials and layouts, then load them up with data and generate my home page. Bam! Unfortunately, I ran into two problems:

  1. The data is assigned procedurally within the page, so it’s not easy to take it and do something like a “latest posts” section, and
  2. The JS razor template is kinda buggy. For instance, I could nest for loops, but not for-each loops, resulting in the following hack.
@for(var i = 0, skill = skills[i]; skill; skill = skills[++i]){
<div class="row">
  <h4 class="col-xs-12">@skill.section</h4>
  @for(var j = 0, language = skill.languages[j]; language; language = skill.languages[++j]){
	<!-- Language Markup -->
  }
  @for(var j = 0, library = skill.libraries[j]; library; library = skill.libraries[++j]){
    <!-- Library Markup -->
  }
  <div class="clearfix"></div>
</div>
}

Yeah, that’s how you do a for-each using for syntax. Gross.

Site Generator

So, this was good enough to make the static pages, but not the blog, or portfolio. I needed something better. It has occurred to me that the greatest successes in our modern age are the product of a smart google search, and I remembered the phrase “flat file cms” from all my hours of redditing. A flat file CMS is like a regular CMS, but rather than serving up pages on request, it generates the whole site at once. The big appeal for me is NO DATABASE. I love databases, don’t get me wrong, but it’s not the right tool for the job. And since I’d like to run from a command line interface, it would be better in Ruby or Node. I’m a little prejudiced against PHP, truth be told, but I can talk about that later.

After looking through this list, and looking through some of the front runners, I picked Jekyll. It seemed to have the most plugins and options, and I got it to work.

That really covers my what, and I’ll get into the how in the next post. Thanks for reading!

"index-pl.html"