How to Use Jekyll for GitHub Pages

Jekyll is a popular open-source static site generator that transforms plain text into static websites. It’s perfect for posting content on GitHub Pages. This tutorial will guide you through the steps to set up and use Jekyll for your GitHub Pages project.

Prerequisites

• Ruby installed on your machine (Jekyll is built with Ruby).
• Basic knowledge of Git and GitHub.
• Git installed on your local machine.

1. Installing Jekyll

To install Jekyll, open your terminal and run the following command:

gem install --user-install jekyll bundler

If you encounter permission errors, consider using a Ruby version manager like RVM or rbenv.

2. Creating a New Jekyll Site

Once Jekyll is installed, you can create a new site by running:

jekyll new my-awesome-site

This will create a new directory named my-awesome-site with the initial project structure.

3. Navigating to Your Jekyll Site

cd my-awesome-site

4. Building and Serving Your Site Locally

To build and serve your site, run:

bundle exec jekyll serve

Your site should now be accessible at http://localhost:4000. Open it in your web browser to see your new Jekyll site.

5. Configuring Your Jekyll Site

Configuration settings are managed in the _config.yml file. You can set options such as:

• title: Your site title.
• description: A short description of your site.
• baseurl: The base URL of your site.
• author: Your name or handling.

title: My Awesome Site
description: A site about awesome things.
author: Your Name

6. Creating Content

Create blog posts in the _posts directory using Markdown files. The file should be named in the format YEAR-MONTH-DAY-title.md:

touch _posts/2023-03-01-my-first-post.md

In the Markdown file, add the following front matter:

---
layout: post
title: My First Post
date: 2023-03-01
---

This is the content of my first post!

7. Deploying to GitHub Pages

To deploy your Jekyll site to GitHub Pages, push your my-awesome-site directory to a GitHub repository named username.github.io:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/username.github.io.git
git push -u origin master

Make sure to replace username with your GitHub username.

8. Conclusion

By following this tutorial, you have learned how to set up and deploy a static site using Jekyll on GitHub Pages. Jekyll allows for easy management of content in your static site while integrating seamlessly with GitHub Pages for hosting. Explore more features and plugins to further customize your site!

About the Author

Dorian Kane

Author

View All Posts