Create Your Simple Blog Using Jekyll

Published in

Ralali Tech Stories

4 min readJul 19, 2019

Transform your plain text into static websites and blogs. — Jekyll

Blogging skill becomes essential nowadays. Some of you as user -either for personal or company sites- might have driven your attention not only for developing content, but also building an interesting interface and operating more effective tools or plugin for it. We have various kinds of Content Management System (CMS) on the table. You might mention Joomla, Wordpress, or like so.

But now, we have this awesome Jekyll in the club. Let’s get closer to know it!

What Is Jekyll?

Jekyll is a site-generator that is made using Ruby, a dynamic, open source programming language with a focus on simplicity and productivity. With the help of Jekyll, you can create a simple blog for personal, project or organization sites without using a database, as written in the Jekyll official website “Transform your plain text into static websites and blogs”.

On the other side, this kind of CMS we’re talking about is a framework software who was written by Tom Preston-Werner, GitHub’s co-founder, also presents three advantages such as simple, static and blog-aware.

Simple

No more databases, comment moderation, or pesky updates to install — Just your content — Jekyll.

We can create blog content, like CMS for WordPress without using a database.

Static

Markdown, Liquid, HTML & CSS go in. Static sites come out ready for deployment — Jekyll.

In the process of making the content, we can use the markdown file which will then be transformed by this software into static HTML.

Blog-aware

Permalinks in categories, pages, posts, and custom layouts are all first-class citizens here — Jekyll.

The next feature that will be discussed is customization. We can easily change the layout, categories, and pages.

Well, rather than just talking about theory, it’s time for us to try it.

But before that, some things must be installed first

1. Install ruby on your operating system, then after successfully, pressing command ruby -v` to check versions and make sure if ruby have done installed in your computer.

2. Install RubyGems, and then enter this command with gem -v` to check versions of gem, same with the step one.

3. Last but not least, type this command gem install bundler jekyll` for install jekyll.

After getting to know the 3 advantages of Jekyll, this time you will also know two ways to make a project with Jekyll, let’s check it out!

With Defaults Templates

Open your terminal or command line, then type the following command.

jekyll new <your_project>
cd <your_project>
jekyll serve // for running server

Manually

Open your terminal or command line, then type the following command.

Create your project directory for example blog-jekyll, then create a file named index.html` and save it in the blog-jekyll` directory.

The example index.html file is as below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

The next step is to open the terminal and go to the blog-jekyll project directory that was created, then type the jekyll build` command to build the static HTML file, and wait for it to finish.

If this step is complete, it means that you are ready to make a static blog using Jekyll.

The next step: we will try to display it on the main page. make the `_posts` directory in your project, then create the content using the following format year-month-day-title.markup like this 2019–07–06-journal-blog.md. then fill in the front matter format, for example as follows.

---
layout: post
title: Hey Ralalian
---

# Hello World
Welcome to this blog.

Next is how to modify the index.html file to be as follows.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <h1>Main Page</h1> 
    {% for post in site.posts %}
       <li>{{ post.title }}</li>
    {% endfor %}
  </body>
</html>

Okay, by stepping to this stage, you have created a simple blog using Jekyll. to see the changes, back to the terminal and type the request with command jekyll serve to run the server.

For more references on jekyll, please visit here!

Create Your Simple Blog Using Jekyll

Written by Adiatma Kamarudin