Build a Static Site with Jekyll

Written by Pranav Chakkarwar
Published on 06 Jan 2022 & updated on 03 Jun 2022

Jekyll - A static site generator

A static site generator creates a static HTML website from a template and raw data. In essence, it automates the job of generating and maintaining individual HTML pages and prepares them for serving to users ahead of time. A static site is ideal for something like a blog, where the material doesn’t need to be updated frequently. We can use a content delivery network to cache the site, thus storing a copy of it on hundreds of servers around the world. The CDN can then offer the site to any user from the server that is closest to them. This helps us save money on servers while allowing users to access the site faster.

Jekyll is my choice because it claims to be “blog-aware”, offering features that will make it easier for us to maintain our code and keep the blog running smoothly. It also offers hundreds of community-created plugins, including a feed generator, a sitemap generator, an admin panel, among others. I assume you have some basic knowledge of HTML, CSS, and JS as I cannot cover that here.

Creating a fresh site with Jekyll

Here are some important ones.


Jekyll’s directory structure

Crafting some pages

My blog features an index.html page with information about me and the latest blog entries, a blog page with all the posts, a contribute page where you may support my selfless work, a contact page with my end-to-end encrypted contact form, and a search page to search through all the published articles. Once your site is built, you can use the name of the file to visit these pages.

You’re free to make as many of these files as you’d like.


Each page will use the data defined in default.html of the _layouts directory, unless you specify otherwise. Jekyll uses YAML to customize the title, description, meta image, layout, and any other metadata for each of all pages. An example YAML of my index.html page is shown below.

title: Pranav
description: I'm a minimalist writing on privacy...
layout: default
image: /images/metaimg.jpg

To make a page available at a different URL than its file’s name, use permalink in your YAML. The YAML below will make a page available at, regardless of the page’s name.

title: A new page
description: Just a page
layout: default
image: /images/image-name.jpg
permalink: custom-url

Build your website

To build your site jekyll uses some commands that must be typed into the terminal of the directory containing your website. The jekyll build command will build your site using the layouts, config.yml customizations, YAML in individual pages, and export it to the _site directory. You can serve the _site directory locally using the jekyll serve command, and your site will be available at localhost:4000 through your browser.

This _site directory contains all the files you’ll need to launch your website using a cloud provider.

Reply via Email

click to reveal

My thoughts, in your Inbox!

If you subscribe via email, your data will be handled as per the newsletter policy.

Other options to subscribe >