Jekyll – A Beginners Guide to static website

When it comes to web development all the beginner geeks relate it to the HTML, CSS, JavaScript for the static web pages. As far as static pages are concerned, that time was no more when you need to manually create HTML code and design and develop static web pages with the help of HTML, CSS, JavasScript. If you need dynamically or need to interact with the database through your web then you need some sort of backend support language PHP, Python, or Ruby. For now, I will just focus on Static web pages development, Modern developers use Static generators (No I am not talking about that electrical generator, Joke apart), to develop, and deploy the modern static Application. There are lots of generators there in the market like Hugo, Next. If you want to look at some of them you can visit Static Generators.

In this post, I will be answering some FAQs about Jekyll.

What is Jekyll?

The wiki says: “Jekyll is a simple, blog-aware, static site generator for personal, project, or organization sites. Written in Ruby by Tom Preston-Werner, GitHub’s co-founder, it is distributed under an open source license.”

Let’s break that definition into beginner friendly pieces.

• Static Site Generator: By static site, one means, a website that has same content to offer to every visitor. For example, all-most all blogs and resume/portfolio websites are static in nature. While a website like Youtube or Linkedin changes their content every millisecond for each of their visitors differently.
  Point to be noted is, if some content has to be changed in the static site it is possible but it will be for everyone, not personalized.
• Blog-aware: It stands for functionalities and requirements of a blog. Like a group of paragraphs to be called as a Blog post, it must be in proper format, has author name, date published on, proper topic highlighting, syntax highlighting etc.
• Ruby: Guys, I had never written a single line of code in Ruby (it is a programming language), Jekyll is written in ruby but to use Jekyll, one doesn’t need to know ruby. I will show this to you later in the post.
• Github: It is a code sharing and collaboration platform but again it is not necessary for Jekyll.

Why Jekyll?

I strongly want to answer this question every time I start something new.

• It is free.
• It is secure and light-weight
• If you don’t know how to program, you don’t want to learn it for now but want to have own website with some content to showcase your skills.
• It is completely editable by users and poses zero restrictions on design.
• It uses Markdown (see it later in the post), which is beginners friendly.
• Unlimited features and future scopes.
• You want to write and want it on the web.(something like a blog)
• You don’t need a lot of styles and those first time has seen formatting options, on already set up and famous blogging websites.

Then Jekyll is the right choice for you.

Where to get it?

Get it installed on your machine and set up the project directories from the official installation guide

I hope you have installed correctly and now you are ready to go. See from this installation, you will be getting Ruby running on your machine.

Then from below steps we will install Jekyll as a gem of Ruby in our installation, then use Jekyll only for our static site.

How to start it?

Open Terminal and write,

gem install jekyll bundler

jekyll new (Name of project, without spaces and brackets)

Your directory structure now might look like this

Congrats, you have successfully set up your first static site. Now test it and see how it looks.

Write in the terminal, first navigating to the same directory as of project:

jekyll build

jeykll serve

It will set up a development web server on your localhost, copy the URL shown in terminal (http://localhost:4000) and paste it in your web browser. This is the default site that comes up with Jekyll.

How Jekyll works?

It is based on Gems (another tech word, don’t worry, I will explain it too), in fact, it is a Gem itself.

Gem: It allows you to package up functionality and share it across other projects or with other people. Take this as a library or module or a header file if you know a bit of programming. In short, it is a Package Manager.

Easiest definition: Jekyll is something that turns your text files written in a specified format, into a cool looking webpage with proper linking and structured content with a unified style over every page.

It takes your markdown/yaml written content and with the help of its templating engine, Liquid, converts them to .html files with predefined layouts written in config.yml.

It only requires you to focus on content and rely upon rest of the formatting and styles on templating engine.

The Liquid, Markdown, and YAML deserve and require a separate post to describe them all. But for this time you could have a look at it: What is Liquid? , What is Markdown? , What is YAML?

What is config.yml  and how to edit Jekyll?

Notice the directory structure properly, there is a file named,<em>config.yml</em> the gist of all of this project lies around it. It is very important to know what it does. See, when you set up a new project, some folders get created, namely:

_posts
_layouts
_site and some others too.

Read about the Directory Structure

config.yml– this file contains all the dependencies that are required for a particular project, that is global variables, theme-used, gem required etc. Make sure to restart the server if you made any changes in the config.yml file, to occur.

Global variables– by this I meant something that remains constant all over the website, like Project title, your contact information that includes email, phone, and social usernames.

Theme-used– A theme is just pre-written CSS and formatting that one can use. Minima is the default theme that comes with Jekyll, but there are more than 100 of free theme available online, that can be used by just installing and using its name in the config.yml file.  Every theme comes with a number of layouts that can be used for styling different purpose pages in the same site. For example, the minima theme comes with post, page, and home layouts. Just use post layout for post purposes and home for the homepage, no need to write dedicated CSS.

Where is Jekyll being used presently?

I would love to list them all here but they are just too much, some of them are:

• Netflix Devices https://devices.netflix.com/en/ 
• Bitcoin https://bitcoin.org/en/
• UN World Statistics https://worldstatisticsday.org/
• Spotify for Developers https://developer.spotify.com/
• Digital Democracy http://www.digital-democracy.org/
• The Markdown Guide https://www.markdownguide.org/
• Check here for the rest https://jekyllrb.com/showcase/

Get Jekyll themes and plugins

Well Jekyll themes are so popular that a single google search will land you up to right places like http://jekyllthemes.org/ and https://jekyllthemes.io/

Plugins: these add special functionality to your sites like SEO optimization and Google AdWords integration, Check this for more https://github.com/planetjekyll/awesome-jekyll-plugins

What are some Jekyll like stuff, like any other options?

Sure in today’s world you are not bound to use one thing only. In fact, every language has some static site generating engines to be used like,

Python: Pelican, Nikola, Tinker
Javascript: 11ty, Hexo
Ruby: another one is Octopress.
and many more.

Github-pages integrate best with Jekyll themes and support them. This made Jekyll first choice when hosting your blog site over gh-pages.

If you are convinced enough to use Jekyll and want to continue with it comment down your email address and I will send you some online resources to go forward with it.