How this website was quickly developed
Arthur Camara · 08 Jul 2015
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:
- The page should be super simple, with minimalistic design.
- I should develop it in a few hours: ideally, two.
- I wanted to share contacts and basic info,
- I wanted to have a blog.
- It should be simple to update content and functionalities.
- It should work well on all devices.
- 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.
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.
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
All I had to do was to install the Ruby Gem
jekyll-assets and add the following to
assets: css_compressor: sass
Bourbon can be extremely useful when it comes to Sass. It is a lightweight library that includes useful Sass mixins like
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:
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.
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.
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.