Build A Static Website Using Jekyll

We recently published a post about why static sites make sense in many cases. Today, we're going to look at Jekyll - one tool for building static sites - and why it might be a good fit for you.

If you’ve thought about building a fast, secure, and simple website without too much backend development, Jekyll might be a good fit. Whether you’re a developer, blogger, or just someone curious about static site generators, Jekyll offers a beginner-friendly way to create websites.

In this guide, we’ll walk you through what Jekyll is, why it’s popular, and how to set up your first Jekyll-powered site.

What Is Jekyll?

Jekyll is a static site generator (SSG) that transforms your plain text content - written in Markdown, HTML, or Liquid - into a full website. Rather than relying on a traditional CMS (like WordPress) with databases and dynamic processing, Jekyll generates simple HTML files. This makes your site:

• Fast – no server-side processing needed.
• Secure – no databases, no backend vulnerabilities.
• Easy to host – works seamlessly with GitHub Pages or any static host.
  

Who Is Jekyll For?

• Developers who want full control over their site.
• Bloggers who prefer writing in Markdown.
• Portfolio and resume websites.
• Documentation websites.
• Anyone who values performance and simplicity.

If you’re comfortable with the command line and don’t mind editing text files, you’ll feel right at home.

Prerequisites

Before getting started, you’ll need a few tools installed:

• Ruby – Jekyll is written in Ruby.
• RubyGems – Ruby’s package manager.
• Bundler – Manages Ruby dependencies.
• Node.js and Yarn (optional) – For themes that include JS tooling.
• Git – Useful for version control and GitHub Pages deployment.
  

How To Build A Website In Jekyll

Step 1: Install Jekyll

Once Ruby and RubyGems are set up, open your terminal and run:

bash
CopyEdit

gem install jekyll bundler

Step 2: Create a New Jekyll Site

To scaffold a new Jekyll site, use:

bash
CopyEdit

jekyll new my-awesome-site
cd my-awesome-site
bundle install

Step 3: Preview Your Site Locally

To preview your site on a local server:

bash
CopyEdit

bundle exec jekyll serve

Visit http://localhost:4000 in your browser to see the site live.

Step 4: Understand Jekyll’s Structure

Here’s what the generated folders and files do:

Step 5: Write Your First Blog Post

Inside _posts, create a file named:

perl
CopyEdit

2025-07-08-my-first-post.md

And add the following content:

markdown
CopyEdit

layout: post
title:  "My First Jekyll Blog Post"
date:   2025-07-08 10:00:00 +0000
categories: [jekyll, tutorial]

Welcome to my first post on Jekyll! I’m excited to start blogging with this amazing static site generator.

Step 6: Customize Your Site

Edit the _config.yml file:

yaml
CopyEdit

title: My Awesome Site
email: you@example.com
description: >-
 A simple blog using Jekyll.
baseurl: "" # If your site is in a subfolder, add it here
url: "https://yourusername.github.io"
theme: minima

Save changes and restart your server to see the updates.

Deploy your site!

Now that you have a Jekyll site created, there are a few ways you can host it. You can build the site out on your computer and then upload it to your Reclaim Hosting account via FTP. Another method is to host it on Github Pages and map your domain there.

Bonus: Use a Jekyll Theme

You can change the default theme by modifying _config.yml:

yaml
CopyEdit

theme: jekyll-theme-cayman

Then run:

bash
CopyEdit

bundle install

Find more themes at jekyllthemes.io or on GitHub.

Tips & Best Practices

• Stick to Markdown for posts—it’s clean and portable.
• Use Front Matter in posts to define metadata like title, date, and categories.
• Add categories/tags to organize posts.
• Customize layouts and includes to match your branding.
• Store your site in GitHub or another VCS for easy deployment and backups.

Common Errors and Fixes

• Could not locate Gemfile: Make sure you’re in your site’s root directory.
• Blog post not found: Ensure the filename is formatted like YYYY-MM-DD-title.md.
• CSS or assets not loading: Check your baseurl and url settings in _config.yml.

Final Thoughts

Jekyll is a fantastic tool for developers, bloggers, and anyone who wants a fast, flexible static website without the overhead of a traditional CMS. With just a little setup, you can create, customize, and deploy a really nice website all from your own machine.

Resources

• Official Jekyll Documentation
• Kinsta Jekyll Tutorial
• GitHub Pages Guide
• Jekyll Themes Gallery