My Blog Development Workflow

You learn something new everyday. In an effort to get this blog underway, I learned a lot. It completely changed the way I develop code.

Being someone who creates REST interfaces for frontend developers, I assumed I knew quite a bit about frontend development. This proved to be woefully wrong. The past few days I have spent learning about the frontend side of things. My objectives were:

  1. Learn all the tools needed to get a good workflow for a blog (the what and why)
  2. Use those tools properly as they were intended (the how)

In the end these are the tools I ended up using (and the stuff the tools rely on) and how I'm using them:a

1. For my frontend and writing my posts

Jekyll

Jekyll is a static blog manager. It takes blog posts written in HTML or Markdown and converts it to a static site

gem install jekyll

Foundation 5 (Using SCSS so I can customize)

Manages the CSS for my blog. Its mobile-first so it takes care that the blog looks nice on any screen. Foundation runs via SASS and allows me to not worry so much about the UI elements. Installation instructions can be found here

Pygments

Since I will be wrting quite a bit of programming code on this blog. Pygments allows me to display the code according to the way its supposed to look.

pip install pygments

2. For general development sanity and happiness

Grunt

This allows me to build my Jekyll, compile my Foundation (via Compass) and compile pygments using a single command `Grunt`. This command will run a file called a gruntfile. This is useful because there are probably going to be a few more libraries before this goes online. Thus I can compile the entire site with one command.

npm install grunt -g

3. The programs the tools rely on

Compass

Compass is a SASS compiler (among other things but I'm using it for that). Compass directly compiles my SASS to CSS whenever I run compass compile

gem install compass

Bower

Bower is used for frontend development. It allows you to get all your Javascript libraries wrapped up in a neat little bow. (I know very little about Bower and I'll write a proper post when I know more)

npm install bower

4. The basic languages these use

Sass

This allows you to extend the functionalities of CSS by adding features like loops and class inheritence etc. When compiled SASS becomes CSS (so its basically writing CSS but just simulates more features on top). You can get started here

Ruby

Ruby is an Object Oriented Programming language that can be used to do anything. Ruby has a modular approach which directly lets me install 'gems' from the internet. You can download it here

Python

Another Programming language like Ruby. I won't go into the differences here but from an "essentials" perspective their pretty similar. You can download it here

Node.js (which runs on Javascript)

Node.js is a wrapper that lets you run Javascript applications without a Browser (@ShreyasRane). You can download it here

08 Apr 2014