CHICIO CODING

Gihub Pages and Jekyll: chicio coding birth

Fabrizio Duroni

12 May 2017 · 2 min read

So, how I created this blog? Let’s go through the development process of its creation. This is yet another blog post about the creation of a website using Github Pages and Jekyll. But you know, I have to do it.

This will be the first official post of my blog. So, the topic from which I want to start is the development of this website. This is a blog post about this blog (are you serious!? ). This blog has been built using Github Pages. What exactly are they? Let’s see the definition taken from the github documentation:

GitHub Pages is designed to host your personal, organization, or project pages directly from a GitHub repository. To learn more about the different types of GitHub Pages sites, see “User, organization, and project pages.” You can create and publish GitHub Pages online using the Jekyll Theme Chooser. If you prefer to work locally, you can use GitHub Desktop or the command line. GitHub Pages is a static site hosting service and doesn’t support server-side code such as, PHP, Ruby, or Python.

Github Pages supports Jekyll. Also in this case let’s see the definition from the documentation:

Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites.

This seems the perfect combination for a personal site + blog!!! Let’s see what I used to develop this blog:

• Github Pages
• Jekyll
• Node + Gulp as a task/build runner for development
• Bootstrap + Sass for CSS/HTML
• Gsap and Scrollmagic for animation
• Cloudflare as CDN

I also used threejs for the background scene on my homepage. I will talk about it in a different post. First of all I installed node. Then I created the Jekyll basic directory structure. Then I run the command:

$ npm init

to create the package.json (the file that will contain the metadata of my project, including its dependencies).
Then I installed Gulp:

$ npm install --save-dev gulp

I decided to use the following gulp libraries to improve my work (using the same command used for Gulp to install them):

• gulp-concat and gulp-uglify to concatenate all my css and js in a style.min.css, index.min.js and vendor.min.js (the last one for third party library)
• gulp-sass to compile sass into CSS
• gulp-uglify for minification
• child_process to launch Jekyll along side Gulp, as explained by Aaron Lasseigne on his blog post
• critical to dynamically extract the CSS critical path from the various template, in order to be complaint with the Google page speed recommendation.
• browser-sync for live reloading during development
• travis for CI

Below you can find the complete gulpfile:

As you can see I have two gulp task. I use the first from my local environment during development. The second one is used by by travis to make a test build on each commit. All the assets created are saved in the assets folder. Jekyll copies each folder that is not prefix with and underscore. I also installed some gems to improve and automatize some function of my site:

• jekyll-seo-tag, to automatically create meta and JSON-LD
• jekyll-sitemap, to automatically generate the sitemap
• octopress-minify-html, to minify the HTML
• jekyll-paginate, to support pagination
• jemoji, to support emojii in posts

Each of this gem has its own configuration values in the _config.yml or in the front matter using the YAML format.
With this setup it was easy to develop: I just needed to execute the command

$ gulp

that launch the default gulp task and start to write my HTML/CSS/Javascript code. The website is updated on each modification and live rendered in the browser (thank you browser-sync ).
After the implementation made also some infrastructure setup to customize my github pages website. In particular I added two things:

• I bought a custom domain, fabrizioduroni.it, to substitute the default github pages url for user site (“username”.github.io). I bought my domain from the italian dns provider register.it.
• I added CloudFlare CDN in order to:
  • speed up the content loading and reach the 99% score on the Google Pagespeed test
  • add HTTPS and HTTP/2 support

In this way the pages load faster than light .
That’s it. My website + blog is up and running!!