what is jekyll html and css

What is Jekyll and how does it work?

WEB_DESIGN | Updated: 02th May 2020 | Author: Lukasz Adam author lukasz lukasz_adam

Today I want to show you something called static site generators.

Instead of looking for a reliable web hosting service and building my page using WordPress, I simply use a static site generator.

It comes with free hosting, it is incredible fast and it is pretty secure because you’re not using a database.

Which means:

There is nothing wrong with WordPress, it is just that I don’t really need it anymore.

Why I don’t Need WordPress

Here is how WordPress works.

You login to WordPress and you set up your content on a pretty user interface. Your content gets saved into a database and when you open up a page, WordPress takes this content from the database and serves it to the user.

Like I said, nothing wrong with that.

But here is the thing:

Why don’t we serve the content directly from the page to the user?

Well, some pages require a database because of user-generated content or because they require a backend, an e-commerce shop for instance.

However, a lot of pages don’t. For example my page. Instead of using WordPress I simply use Jekyll. My free illustrations page get’s approx. 25k visitors per month, and it is a part of my Jekyll page.

What I am trying to say is:

Jekyll can handle this amount of traffic without any problems.

What is Jekyll

Jekyll is a static site generator. It takes all your files and it converts these files into a complete website.

You can create templates, blog posts and different style sheets files. Jekyll is going to build a complete website for you.

The downside is, you don’t have a pretty user interface to change your content, but instead, you need to open up a code editor.

Don’t worry, you don’t need to code. You simply change the content from the code editor that’s it. A code editor is basically a simple text editor.

But I think it is better when I simply show you how to do that.

How to install Jekyll

In order to install Jekyll, you will need to use terminal (this article is for mac only). I know this seems intimidating at first, but it really shouldn’t. I will guide you through this so no need to be afraid.

I’ve also created a video in case you want to watch me doing these things step by step. You’ll find that video at the top of this article.

To install Jekyll you will need ruby and Xcode for mac. That is basically a package to make developing apps available to your system.

Here is how to install that:

To install Xcode you can open up Terminal and simply say:

$ xcode-select --install

That’s it. Now in case you don’t have ruby 2.4, here is how to update it.

Install Homebrew (a package which contains ruby):

Install Hombrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Update Ruby:

brew install ruby

Now you’re ready to install Jekyll.

To do that, you simply say

gem install bundler Jekyll

That’s it. This will install Jekyll on your system. After that, you will be able to create new Jekyll pages.

To make sure this new page will be on your desktop, you can simply say:

CD desktop

CD stands for ‘change directory’ and this means terminal will install all the following files on your desktop.

After that type in:

Jekyll new my-new-site (my-new-site is simply the name of your brand new site, you can call that whatever you want.)

This will create a new Jekyll site.

Now again say cd to change the directory to the Jekyll page.

cd my-new-site

And then run

Bundle exec Jekyll serve --livereload

Now you will be able to open up the Jekyll page and every time you change your code, the page will automatically refresh.

So open up localhost:4000 and there is your new Jekyll website. Everything you do here, you will be able to publish live and host the page for free.

That’s it. Your Jekyll page is ready to be customized. If you want to take a look at how the basic Jekyll structure look like, check out this video.


Similar articles

Do It Yourself SEO Best Way To Learn JavaScript Self-Taught Web Designer

More FREE Stuff?

Join my Instagram Group now and don't miss any upcoming Illustrations, Icons & Tutorials!