If you’re looking to create a fast, secure, and easy-to-maintain blog or portfolio site, Jekyll with GitHub Pages is an excellent choice. In this post, I’ll walk through how I set up this very site.

Why Jekyll?

Jekyll is a static site generator that offers several advantages:

  • Performance - Static HTML files load incredibly fast
  • Security - No database or server-side code means fewer vulnerabilities
  • Version Control - Your entire site lives in Git
  • Free Hosting - GitHub Pages hosts Jekyll sites for free
  • Markdown Support - Write posts in Markdown instead of HTML

Basic Setup

1. Install Jekyll

First, ensure you have Ruby installed, then install Jekyll:

gem install bundler jekyll

2. Create Your Site Structure

Your Jekyll site needs a few key files and directories:

├── _config.yml          # Site configuration
├── _layouts/            # HTML templates
├── _includes/           # Reusable components
├── _posts/              # Blog posts
├── _sass/               # Sass partials
├── assets/              # CSS, JS, images
└── index.md             # Homepage

3. Configure _config.yml

This file controls your site’s settings:

title: Your Site Title
email: your@email.com
description: A brief description
baseurl: ""
url: "https://yourusername.github.io"

markdown: kramdown
plugins:
  - jekyll-feed
  - jekyll-seo-tag
  - jekyll-sitemap

4. Create Layouts

Layouts are templates that wrap your content. Start with a default layout:

<!-- _layouts/default.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

5. Write Your First Post

Create a file in _posts/ following the naming convention: YYYY-MM-DD-title.md

---
layout: post
title: "My First Post"
date: 2024-11-10
---

Your post content here!

Deploying to GitHub Pages

  1. Create a repository named username.github.io
  2. Push your Jekyll site to the repository
  3. GitHub automatically builds and deploys your site

Advanced Features

Custom Domain

Add a CNAME file with your domain name and configure your DNS settings.

SEO Optimization

Use the jekyll-seo-tag plugin for automatic meta tags:

{% seo %}

Analytics

Integrate Google Analytics by adding your tracking ID to _config.yml.

Conclusion

Jekyll offers a powerful yet simple way to create and maintain a professional website. The combination of Markdown for content, Liquid for templating, and Git for version control creates an efficient workflow.

The learning curve is gentle, but the possibilities are extensive. Give it a try!

Resources

Happy coding!