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:
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):
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:
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.
After the implementation made also some infrastructure setup to customize my github pages website. In particular I added two things:
In this way the pages load faster than light .
That’s it. My website + blog is up and running!!
Implementing a pull to refresh component in vanilla js for your progressive web app (PWA) it’s really easy using cutting edge web technology (service worker, CSS new properties). Let’s do it now!Read More