Posts

Showing posts with the label fazri01

How Does the Jekyll Files and Folders Structure Shape Your GitHub Pages Project

By -

When you start building a static site using Jekyll on GitHub Pages, understanding the Jekyll files and folders structure becomes your first key step. This structure defines how your content, layouts, and configurations work together to generate your site. In this guide, we’ll explore how each part of a Jekyll project functions, why it matters, and how you can manage it effectively for long-term scalability.

What Are the Essential Jekyll Folders

At its core, Jekyll converts plain text into static websites. It relies on a specific folder structure to understand where your layouts, posts, and configuration files are stored. Every Jekyll project includes several default folders that serve a unique purpose. Let’s break down what each one does and why it matters for your GitHub Pages project.

The _posts Folder

This is where all your blog posts live. Each file inside _posts follows a naming convention: YEAR-MONTH-DAY-title.md. Jekyll uses this format to automatically generate URLs and sort your posts chronologically. For example, 2025-10-23-welcome-to-my-blog.md would generate a permalink like /2025/10/23/welcome-to-my-blog/.

The _layouts Folder

Layouts define the general structure for your pages and posts. You can think of them as templates that wrap your content. For instance, you might have a layout for a post, one for a page, and another for your homepage. These layouts often use {{ content }} placeholders to tell Jekyll where to inject your content during the build process.

The _includes Folder

This folder stores reusable pieces of HTML. Common examples include headers, footers, or navigation menus. Instead of repeating code across multiple layouts, you can include a file like this:

{% raw %}{% include header.html %}{% endraw %}

This approach makes your code cleaner and easier to maintain, especially as your project grows.

The _config.yml File

This is the brain of your Jekyll project. It defines global settings such as the site title, description, permalink structure, plugins, and more. Every time you build your site, Jekyll reads this file first to understand how to process your project.

Which Files Are Crucial for Configuration

While _config.yml is the heart of your project, several other files also play important roles. Let’s explore them briefly:

  • Gemfile: Defines Ruby gems (libraries) needed by your project, such as jekyll-feed or minima.
  • .gitignore: Ensures that unnecessary files like temporary build artifacts are not pushed to GitHub.
  • index.md or index.html: Acts as the homepage of your website.

Each of these files contributes to the overall configuration and stability of your project. A well-organized structure keeps everything predictable and makes collaboration easier.

How to Organize Your Content and Posts

Content organization is a major factor in both usability and SEO. In Jekyll, you have multiple ways to organize content beyond the _posts folder. For instance, you can use _pages or _collections to handle non-post content such as documentation, tutorials, or case studies.

Using Collections

Collections allow you to group related content that isn’t time-based. You can define collections in your _config.yml like this:

collections:
  tutorials:
    output: true

Then create a folder named _tutorials and add Markdown files inside it. Jekyll will automatically build these as individual pages. Collections are perfect for product documentation, portfolios, or categorized guides.

Front Matter

Every Markdown file in Jekyll starts with YAML front matter — a block of metadata at the top of the file enclosed in triple dashes (---). This metadata defines properties such as layout, title, category, and tags. Example:

---
layout: post
title: "My First Tutorial"
category: jekyll
tags: [jekyll, github-pages]
---

This structure gives Jekyll the context it needs to properly render and classify your content across the site.

How Layouts and Includes Work Together

Layouts and includes form the foundation of your site’s design system. A layout defines the skeleton of a page, while includes fill in reusable parts like headers or navigation menus. For example, you might define a layout named default.html that includes multiple snippets:

{% raw %}
<!DOCTYPE html>
<html>
  <head>
    {% include head.html %}
  </head>
  <body>
    {% include header.html %}
    <main>
      {{ content }}
    </main>
    {% include footer.html %}
  </body>
</html>
{% endraw %}

By separating reusable elements into includes, you keep your code DRY (Don’t Repeat Yourself). This modular approach makes updates faster and reduces the risk of inconsistencies across pages.

Managing Assets and Data in Jekyll

Beyond layouts and posts, your project also contains assets such as images, CSS, and JavaScript. These typically reside in the assets/ or public/ folder. Jekyll processes these files without modification unless you integrate a preprocessor like Sass.

The _data Folder

The _data directory is an underrated but powerful feature. It allows you to store structured data in YAML, JSON, or CSV files and use them throughout your templates. For example, a team.yml file could contain:

team:
  - name: "Alice"
    role: "Developer"
  - name: "Bob"
    role: "Designer"

You can then loop through this data in your layout:

{% raw %}{% for member in site.data.team %}
<p>{{ member.name }} - {{ member.role }}</p>
{% endfor %}{% endraw %}

This method makes your site scalable without hardcoding repetitive content.

Deploying and Updating on GitHub Pages

Once your Jekyll site is ready, deploying it to GitHub Pages is seamless. Simply push your project to a GitHub repository and enable Pages under repository settings. GitHub automatically detects Jekyll and builds your site from the main or gh-pages branch.

If you’re using a custom domain, you can create a CNAME file in your root directory containing your domain name (for example, example.com). GitHub Pages will handle the rest, including automatic SSL setup.

Updating Your Site

To update your site, just modify your Markdown files or layouts and push the changes. GitHub Pages rebuilds your site automatically. For major changes, such as updating dependencies, you can run bundle update locally before pushing to GitHub.

Best Practices and Optimization Tips

To keep your Jekyll site fast and SEO-friendly, here are a few key recommendations:

  • Use descriptive filenames: Search engines read URLs; use clear, keyword-rich file names.
  • Minimize images: Optimize image sizes to improve page load speed.
  • Enable plugins wisely: Only use necessary Jekyll plugins to keep builds efficient.
  • Structure metadata: Ensure each post has relevant title, description, and tags.
  • Test locally before publishing: Use jekyll serve to preview and fix issues before pushing updates.

Sample Folder Overview

Folder/File Description
_posts/ Stores blog posts with date-based filenames
_layouts/ Holds page templates for posts and pages
_includes/ Contains reusable snippets like headers or footers
_data/ Stores structured data used in templates
_config.yml Global configuration for your Jekyll site

By maintaining a clean and organized structure, you ensure your site grows smoothly as your content expands.

Building a website with Jekyll and GitHub Pages isn’t just about creating static content—it’s about creating a sustainable, well-structured foundation. Once you understand how these files and folders interact, you can confidently customize your site’s layout, automate updates, and scale your content efficiently. Take time to organize your Jekyll structure early; it will save you countless hours later as your site evolves.

Ready to take the next step? Explore how to integrate plugins, optimize metadata, and add multilingual support to your Jekyll site to make it even more dynamic and discoverable.

Read more
Subscribe to: Comments (Atom)