Dirty clean code. Creative Stuff. Stuff.
Github Pages and Jekyll: chicio coding birth
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
- 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:
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 emoji 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. To start the development environment I just have to execute the shell command below.
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 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!!
Better organize tests and run them against multiple configuration with Xcode Test Plan
Recently I added a lot of Unit and UI tests to RangeUISlider, one of my open source projects. Let's see how I grouped them and run them against multiple configurations with Xcode Test Plan.Read More
Unit testing in Kotlin with JUnit 5 and MockK
I recently discovered MockK, a mocking library created for Kotlin. Let's see how it is possible to write modern unit tests with MockK + JUnit 5.Read More
Spring Boot + Kotlin Rest client cheatsheet: RestTemplate and Webclient
During the last months I worked a lot with Spring Boot backend applications. In this post I explain how you can consume a REST api from a Spring Boot application using RestTemplate and (the new) WebClient.Read More