Creating a static website for git-flow


This entry is part 1 of 2 in the series Creating a static website

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.

Other articles in the series Creating a static website

  1. Creating a static website for git-flow
  2. Installing Sass, Compass, nanoc 3.x and Foundation 5

This article is filed under the category Static website and has no tags associated with it.
download