Building a static website has never been easier, especially with tools like Jekyll. Jekyll is a simple, blog-aware, static site generator that takes Markdown, HTML, or Liquid files and transforms them into a static website or blog. It’s a powerful and flexible way to create fast, lightweight websites without needing to worry about complex backend servers or databases. In this post, we’ll walk through the steps to build a static website using Jekyll.

Why Choose Jekyll for Static Websites?

Before diving into the setup, let’s first talk about why you might choose Jekyll for your project:

  • Simplicity: Jekyll is straightforward to use and configure, making it perfect for developers and non-developers alike.
  • Markdown Support: Jekyll allows you to write content in Markdown, which is simpler and more readable than raw HTML.
  • Performance: Static websites are incredibly fast because they don’t rely on server-side processing. Jekyll generates pre-built pages that can be served directly from a CDN.
  • Version Control Friendly: Jekyll works well with Git, making it easy to deploy via platforms like GitHub Pages.
  • Free themes: There are many, and I really mean, many free themes for Jekyll

Step 1: Install Jekyll

To get started, you’ll need to have Ruby and the necessary dependencies installed on your computer. Here’s how to set everything up:

  1. Install Ruby:
    • First, install Ruby from the official website: https://www.ruby-lang.org.
    • On macOS, you can install Ruby using Homebrew: 
      brew install ruby
  2. Install Jekyll and Bundler: Once Ruby is installed, you can install Jekyll and Bundler (which helps manage project dependencies) by running the following command: 
    gem install jekyll bundler
  3. Verify Installation: After installation, verify that Jekyll is installed properly by running: 
      jekyll -v

    This should return the version of Jekyll that’s installed.

Step 2: Create a New Jekyll Site

Now that Jekyll is installed, you can create a new website project with just a single command:

jekyll new my-awesome-site

This will create a new directory called my-awesome-site with a default Jekyll site structure. The folder contains all the essential files you’ll need to get started, including:

  • _config.yml: The configuration file where you can define site-wide settings.
  • _posts/: A folder for your blog posts (Jekyll uses Markdown to create blog posts).
  • _site/: The folder where Jekyll generates the static website. This folder will be used for deployment.
  • index.md: The home page of your site.

Step 3: Customize Your Website

At this point, you have a functional Jekyll site, but you probably want to customize it to fit your own brand and style. Here’s how you can do that:

  1. Edit _config.yml: This file controls the global settings of your Jekyll site. Open it and customize the following: 
    title: My Awesome Site
description: This is a website built with Jekyll.
url: "https://example.com"  # The base URL for your site
theme: jekyll-theme-cayman  # You can choose from several pre-built themes

    You can add more settings, like navigation menus, Google Analytics, and social media links, depending on your needs.

  2. Create Pages: Jekyll allows you to create custom pages in Markdown. To create a new page, simply create a .md file in the root of your site. For example, to create an “About” page, create a file called about.md:
---
layout: default
title: About Us
---

# About Us

Welcome to our website! We are a company focused on building great things.

This file will automatically be rendered and linked from the navigation menu (if you configure your navigation links in _config.yml).

  1. Add Blog Posts: Jekyll makes it easy to create blog posts. To add a new post, go to the _posts/ directory and create a new .md file. Jekyll uses the following naming convention for posts: 
    YEAR-MONTH-DAY-title-of-your-post.md

    For example, 2024-11-23-my-first-post.md might look like this:

---
layout: post
title: "My First Post"
date: 2023-11-23
---

Welcome to my blog! This is my first post. Stay tuned for more updates.

Once you create the post, Jekyll will automatically generate the post page and add it to the site.

Step 4: Preview Your Site Locally

Once you’ve made changes to your site, it’s time to preview it locally. Jekyll comes with a built-in development server that allows you to view the website before deploying it.

To run the local server, navigate to your Jekyll site folder and run:

bundle exec jekyll serve

This will build your site and start a local server at http://localhost:4000. Open this URL in your browser to preview your site.

Step 5: Deploy Your Jekyll Site To github pages

After building and customizing your site, it’s time to deploy it. There are several ways to do this, but one of the easiest is to use GitHub Pages, which integrates seamlessly with Jekyll.

  1. Create a GitHub Repository: Create a new repository on GitHub and push your Jekyll site files to the repository.
  2. Push Your Code to GitHub: Initialize a Git repository in your site folder, add your files, and push them to GitHub
  3. Enable GitHub Pages: In your GitHub repository, go to Settings → Pages, and choose the branch to deploy from (usually main or master). GitHub will automatically detect your Jekyll site and build it for you.

After that Your site will be live at https://your-username.github.io/your-repository-name.

Conclusion

That’s it! You’ve just created and deployed a static website using Jekyll. By following these simple steps, you can quickly build and launch a fast, secure, and customizable static site. Whether you’re building a personal blog, a portfolio site, or a small business landing page, Jekyll makes it easy to create and manage your content.

If you’re interested in customizing your Jekyll site further, check out the official Jekyll documentation for more advanced features like theming, plugins, and deployment options.

Happy coding!