Jekyll on Windows

By   Calendar icon Dec 03, 2018   Level 1 icon

Description:

We explain here how to create a static website with Jekyll under Windows 10, using WSL.

Preferencesoft

There are many ways to create a website. We can create HTML pages in advance and upload them to the server to get a site called static or use the server language to generate HTML pages on the fly, dynamically. This first method is the oldest, but in recent years static site generators have appeared. They try to make the content more dynamic thanks to JavaScript plugins. It can be compared to a rather primitive CMS that manages the content of the site, once the style and structure of the pages designed. The best known and long used most is Jekyll which generates websites from templates written in a language called Twig and many often-free themes.

Installing Jekyll under Windows 10

Jekyll is a software designed for Linux and officially is not supported by Windows. So, we will install it on the Windows subsystem for Linux (WSL) and Ubuntu. We have already explained how to install Ubuntu with WSL, we just must install Ruby and Jekyll. Let's run Ubuntu and in the Bash Windows, install the necessary packages, as indicated at the following address:

https://jekyllrb.com/docs/installation/windows/

Let's check us out and now create a MyWebSite website (blog):

jekyll new MyWebSite

Everything seems in place, we will be able to develop our website.

You can destroy this directory, since we will not work with the bash shell later, but with the Windows command shell or PowerShell.

rm -rf MyWebSite

To work, we will use Visual Studio Code. This will allow us to easily edit the files and launch the server in PowerShell.

Construction of a Website

The HTML language is not very pleasant to edit, a practice is to use another language more readable using a few special characters (spaces, carriage return, *, etc.). There are several, but the Markdown language is the most used. The text of a page is written in such language and then converted to HTML code and inserted into a template. Jekyll automatically manages this conversion.

Let's get into a working directory, open a PowerShell window (with Visual Studio Code), and create a Web Site with the following command:

wsl jekyll new MyWebSite

Let's go to the MyWebSite directory:

cd MyWebSite

To have an overview of the site in the browser, just launch the server with the command:

wsl bundle exec jekyll serve

and enter the url to http://localhost:4000 in the browser (or press Ctrl + left click of the mouse on the url under VS Code).

Installing a theme

The default theme installed by Jekyll is minima.

To change themes, go to the MyWebSite directory and do the following:

  • Add this line to your Jekyll site's Gemfile:
    gem "jekyll-athena"
  • And add this line to your config file _config.yml:
    theme: jekyll-athena
  • And then execute:
    wsl bundle

Jekyll offers several official themes available on github at https://github.com/jekyll/jekyll/wiki/Themes.

Github supports the following themes:

https://pages.github.com/themes

We can find on other github themes often under MIT license so free, but which requires to insert a link to the license or to the github page of the developer.

Some Jekyll themes are installable by the gems. But to customize a theme, it is necessary to download the entire theme.

On the other hand, the themes are not all interchangeable.


Software

Categories

Share

Follow


KodFor Privacy Policy