Creating a static website for git-flow

For a couple of months I felt the need to create a website for git-flow, you know the awesome tool set that helps you develop software using the git branching model. The reason for having a site is two folded, promote git-flow and have a way of informing people of the development. This will be a series of articles about the road of creating the website, the challenges I met and how I set things up.

Brainstorming

So what is did I want from this website, what does it need to do? I wrote down some ideas, from what I thought you would see on the site, to software it would run.

Site will be dedicated to git and git-flow. As git and git-flow are highly interacted it would make sense to combine them on the site as well.

Fast loading.

First page, an overview of what the site is, some download links to git-flow and git.

The site needs a news section. That would be a way to inform people about the software, like new releases, new ideas etc.

Documentation section. Explain what git-flow is, how to use the software.

SEO Friendly.

Responsive, meaning it would have to look good on all sort of devices.

The site must run open source software and they must have a GitHub page.

Sass & Compass for CSS.

Well that was a nice list, small problem is that I’m not a designer, but I figure I would tackle that part later in the project.

Research

I’ve been a WordPress user/developer for many years, but I wanted something else. Don;t get me wrong, I will keep supporting, working and developing WordPress but I felt the need to do something else for this project. Luckily I do have my own VPS server, with SSH access so I can do whatever I want on the server side.

Fast loading

It doesn’t take to realize that the fastest loading website is a static website but I have no intention to maintain HTML pages, I did that a decade ago and moved on, never to go back again. Over the years I had heard about static web site generators but never looked into them. Mind made up, this is the time to look into it.

Static website generators

I started researching Jekyll and stumbled upon several other static website generators based on Jekyll or completely on their own, written in Ruby, Python, Node-JS etc. Ok more choices to make, which programming language do I want to dive into? I decided for no other reason than just the amount of articles static website generators written in Ruby to go with Ruby. I never wrote a single line of code in Ruby, ok maybe a line or too with Capistrano but that’s about it. To call myself a novice in Ruby would be an exaggeration but I wanted to learn a new language anyway, so this would be a good way.

Now that I decided to go with Ruby, which generator would I go with. Jekyll and Octopress were the ones I found first. Octopress seemed the least daunting, but I decided to go with Jekyll as this would be more of challenge for myself. After more in-depth research on Jekyll several people on the Internet, and you if it’s on the Internet it’s true, claimed Jekyll was really geared towards a blog and not so much for a general site. I wanted a more general site, with some blogging options for the news section, think of sites like Node.js or the Ruby site. Back to doing more research.

I found two more Ruby based generators that sparked my interest:

Middleman

nanoc

I chose nanoc over Middleman, although as I wrote this I don’t really remember what made me choose nanoc, but nanoc has a blogging extension, it’s used to build

Responsive site

There are dozens of responsive frameworks out in the world that can help you with creating a responsive site, Bootstrap is a big one, but I want to maintain my CSS with Sass+Compass. I know there are forks out there that do Bootstrap with Sass but I prefer to have a framework that has native Sass support. Foundation by Zurb is one of them and it is the one I have chosen for this project. Like the static generator part, I have never worked with Foundation, so that’s another nice challenge. Did I mention I’m not a designer, oh well I’ll deal with that one at a later time.

Lets get started

I have chosen my tools and I’m ready to go! Or at least I thought I was, part 2 of the series will explain.