Getting Started with Jekyll: A Simple Tutorial

Welcome to this beginner-friendly tutorial on Jekyll, a powerful static site generator that’s perfect for building blogs, personal websites, and more!

What is Jekyll?

Jekyll is a free and open-source tool that takes your content written in Markdown (or other formats) and uses templates to generate static HTML, CSS, and JavaScript files. This means you get a fast, secure, and easily hostable website without the need for server-side processing.

Key Advantages of Jekyll:

• Simplicity: Easy to learn and use, especially if you’re familiar with Markdown.
• Speed: Static sites load very quickly since they don’t require database queries.
• Security: Reduced attack surface compared to dynamic websites.
• Version Control: Easy to track changes and collaborate using Git.
• Hosting: Works seamlessly with platforms like GitHub Pages, Netlify, and others.

Prerequisites

Before we begin, make sure you have the following installed:

• Ruby: Jekyll is built using Ruby, so you’ll need to have it installed. You can find installation instructions for your operating system on the official Ruby website.
• RubyGems: This is the package manager for Ruby, and it usually comes bundled with Ruby.
• Bundler: A Ruby gem that manages dependencies. You can install it with: gem install bundler

Step 1: Installing Jekyll

1. Open your terminal (or command prompt).

2. Install the Jekyll gem using the following command:

   1
   gem install jekyll bundler
   

   This may take a few moments.

Step 2: Creating a New Jekyll Site

1. Choose a directory where you want to create your website.
2. Navigate to that directory using the cd command in your terminal.

3. Run the following command to create a new Jekyll project named “my-jekyll-site”:

   1
   jekyll new my-jekyll-site
   

4. Now change directory into the folder you just created

   1
   cd my-jekyll-site
   

Step 3: Understanding the Project Structure

Let’s take a look at the key files and folders created by Jekyll:

• _config.yml: The configuration file for your website. Here you set things like the site title, theme, and other settings.
• _posts: This folder contains your blog posts. Each post should be a Markdown file with a specific naming convention (e.g., YYYY-MM-DD-your-post-title.md).
• index.html: The main landing page for your site (usually uses Liquid templating).
• Gemfile and Gemfile.lock: These files are used by Bundler to manage your project’s dependencies.

Step 4: Running Jekyll Locally

1. Inside your project directory, run the following command:

   1
   bundle exec jekyll serve
   

2. Jekyll will start a local server. Open your web browser and go to http://localhost:4000. You should see your new Jekyll website!

Step 5: Creating Your First Blog Post

1. Inside the _posts folder, create a new file named 2023-10-27-my-first-post.md.

2. Open the file in your text editor and add the following content:

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   ---
   title: "My First Blog Post!"
   date: 2023-10-27
   ---
   
   # Hello World!
   
   This is my first blog post using Jekyll. How exciting!
   
   I'm learning how to use Markdown and build static websites. It's fun.
   

3. Save the file, and after a few seconds, your local site on http://localhost:4000 will reflect these changes.
4. You’ll see the new post on the home page (if you haven’t altered the index.html file)

Step 6: Customizing Your Site

• Modify _config.yml: Change the title, description, and other settings.
• Edit index.html: Customize your home page using HTML and Liquid templating.
• Add more blog posts: Create more Markdown files in the _posts directory.
• Explore Themes: Find free Jekyll themes online or create your own to change your site’s appearance. Look to Jekyll Themes for great options

Conclusion

Congratulations! You’ve created your first Jekyll site and blog post. This is just the beginning; Jekyll offers endless possibilities for customization and expansion. Continue experimenting, and refer to the official Jekyll documentation for more details.

Happy blogging!