How this website was quickly developed

This is my very first post on my new blog. I’ve been planning on having a technical blog for a while, and now I finally have a place where I can write and publish articles, and share interesting discoveries with whomever stumbles upon my page .

When I decided to replace my previous page with this new version, I knew that I wanted to accomplish a few things:

  1. The page should be super simple, with minimalistic design.
  2. I should develop it in a few hours: ideally, two.
  3. I wanted to share contacts and basic info,
  4. I wanted to have a blog.
  5. It should be simple to update content and functionalities.
  6. It should work well on all devices.
  7. It should be open source.

With all that in mind, I thought of various approaches and decided to go with the static site generator Jekyll.


Getting started

You can start your site by simply running the following:

gem install jekyll
jekyll new mysite
cd mysite
jekyll serve

The site will be up and running on 127.0.0.1:4000. You can simply modify settings and CSS to get a decent site in shape.

Modifying Jekyll’s default project

Though I had an out-of-the-box version running, I quickly realized I wanted to spice up my tools a bit in order to code quickly and structure my project better.

For assets management (images, javascript and stylesheets) and pipeline, I installed Jekyll Assets. Jekyll Assets takes care of assets digesting, caching, filepaths and makes it all a lot simpler.

It will place an image, for instance, in the correct dist path, write the markup and even take care of caching (the image in the _site folder will be renamed to a safe filename such as image-b764d4990c3ca0bea23f6c401eceb788.png).

All I had to do was to install the Ruby Gem jekyll-assets and add the following to _plugins/ext.rb:

require "jekyll-assets"

I also wanted to code styles using Sass/SCSS. Jekyll Assets makes it easy to include the preprocessor in the build pipeline. I installed sass and included the correct configuration to my _config.xml.

assets:
  css_compressor: sass

Additional libraries

Bourbon can be extremely useful when it comes to Sass. It is a lightweight library that includes useful Sass mixins like prefixer() and transition(). We can rely on Bourbon to provide good implementation of commonly used patterns, cross-browser compatible styles, vendor prefixes and much more. It also makes writing code a lot faster. Plus, an inherent advantage of using a Sass library, instead of a vanilla CSS one (like the default Bootstrap stylesheet), is that only features we actually use will end up in the post-processed CSS file, optimizing its size.

Another useful library I used was Saffron: a collection of mixins that help creating simple CSS3 animations. Though it is not so well documented, it is well structure, which makes it simple to navigate through the source and use their mixins.

Instalation should be reproducible

In order to easily reproduce those steps, I included those plugins and libraries in a Gemfile. Installing became as simple as running:

bundle install

With the basic environment setup ready, it’s time to develop

After having the basic setup, things went pretty smooth and straightforward. I was able to quickly develop and deploy my site.

I already had mocks for both mobile and desktop versions, so I simply worked on coding the markup and stylesheets.

Desktop version

Mobile version

In fact, most of the time was spent fine tuning the animation and styles, and making sure the website remained responsive. I probably spent an equal amount of time (or longer) writing this blog post.

Finally, I decided to add Disqus comments to the blog, and try some basic cross-browser testing with Browserstack, just to make sure it renders fine in most browsers.

Feel free to grab the code

If you’d like to clone the project, visit the repo on GitHub and follow the instructions.


Future work

With a basic page in place, I can keep working on the blog and adding new features gradually. Things I plan to add soon:

  • About page, with a bit of my background, experience and education
  • Travel page, with pictures of places I’ve been to
  • Maybe a special place to feature side projects

Thanks for visiting the blog, and feel free to leave comments or suggestions below.