Starting a blog as a developer

For normal bloggers it’s easy

They choose a platform they like (Wordpress, Blogger, Tumbler, … ), pickout a good looking template and start blogging.

For a developer, with technical pride, this flow could be much longer as we want to build something ourselves and it could result in a situation where building the technical part takes more time than actually writing blog posts.

So… That’s why I also started with researching the technologies I could use instead of thinking about what I wanted to blog about. My goal was to have a lightweight site that’s easy to maintain, easy to write blog posts and preferablly no server side rendering. A static site generator is exactly what qualifies these requirements and my eye fell on Jekyll as this is currently the most popular one with the biggest community.

Blog Specs:

  • Jekyll
  • UglifyJS for minifying JavaScript
  • CleanCSS for minifying CSS
  • SASS for managing the CSS
  • Hosted (for free!) on GitHub Pages

Build & Deploy process

Basically it’s just a normal Jekyll implementation with one hook added inside the plugins to start a node process to minify the JavaScript and CSS every time Jekyll finishes with a build.

/_plugins/build.rb

Jekyll::Hooks.register :site, :post_write do |site|
    system('node build.js')
end

build.js

var CleanCSS = require('clean-css');
var UglifyJS = require('uglify-js');
var fs = require('fs');

var stylesheetLocation = '_site/css';
var jsLocation = '_site/js';

var clean = function() {
  // minify CSS
  var css = fs.readFileSync(`${stylesheetLocation}/main.css`, 'utf8');
  new CleanCSS().minify(css, function (errors, minified) {
    // minified.styles 
    fs.writeFile(`${stylesheetLocation}/main.min.css`, minified.styles, function() {
      console.log('CleanCSS completed');
    });
  });
};

var uglify = function() {
  // minify JS
  var minifyResult = UglifyJS.minify([ `${jsLocation}/tvanro.js` ]);
  fs.writeFile(`${jsLocation}/bundle.js`, minifyResult.code, function() {
    console.log('UglifyJS completed');
  }); 
};

clean();
uglify();

Jekyll outputs the generated site into the _site directory and thanks to Github Pages the deploy process are just a few simple git add/commit/push commands when I initialize the tvanro.github.io repository inside this folder.

cd _site
git add .
git commit -m 'add "Starting a blog as a developer" post'
git push origin master

** BOOM MAGIC ** We’re live!