Gustav Ehrenborg fullstack developer

Email symbol LinkedIn logo GitHub logo Instagram logo

Shoeshine Guides for making your shoes shine generated by Jekyll

Thursday, February 2, 2017
The site

Static site generators are becoming a thing. I selected Jekyll for this project. It is Ruby based which means the config files are Yaml instead of JSON and it uses a Gemfile to handle dependencies. It's really easy to get started with, the command `jekyll new <project-name>` gives you a folder structure and all the files to get started. `jekyll serve` is used to start a local web server to serve the content and `jekyll build` creates static pages which are put in the _site/ folder. This is the folder you'll want to deploy to your web server.

It is surprising how easy it all was, it's the content and the design that is missing, the other technical parts are well taken care of. There's not much oddities going on either. This is an image:

<img src="images/lv7.jpg" alt="Take care of your shoes" title="Take care of your shoes" />

It's just plain old HTML! This is a link, it has some :

<a href="{{ "care-leather.html" | prepend: site.baseurl }}">

This is the main layout file that includes the head and header which are separate files, located in the _includes/ folder. It also displays the content:

<!DOCTYPE html>
<html lang="en">
{% include head.html %}
<body>
  {% include header.html %}
  <div id="wrapper">
    {{ content }}
  </div>
</body>
</html>

Hosting

The site was first hosted on GitHub, using GitHub pages. It's free and it actually has Jekyll support built in. There is no need to run `jekyll build` and then deploy the contents of the _site/ folder. GitHub takes care of that, you just keep the code in a repository as usual and activate the GitHub Pages functionality. GitHub will build it and host the right things.

However, GitHub pages was quite slow, so we moved it to Firebase instead. It has no built in Jekyll support, so you'll have to build the site yourself and only deploy the contents of the _site/ folder.

Finally

Have a look at the site or the code.