Posts

Showing posts with the label Understanding the Directory Structure

What is in My Jekyll Folder

If you've just started with Jekyll and GitHub Pages, opening up your project folder might feel a bit like a treasure hunt. There are a bunch of files and folders, some starting with an underscore and some not. It can be confusing at first, but each part has a specific job. Understanding this structure is the key to building a clean, well-organized website that is easy to manage and grow over time. This guide will walk you through the most important files and directories so you can start creating with confidence. We’ll break down what each piece does, how they work together, and why a good structure is so important for your site's long-term health.

Table of Contents

Jekyll’s power comes from its convention-over-configuration philosophy, meaning it expects certain files to be in certain places to work correctly. By learning this system, you’ll spend less time figuring out where things go and more time focusing on your content. Whether you're building a simple blog or a documentation site, this foundational knowledge will be your best friend. This setup also makes it very easy for GitHub Pages to understand how to build your site without any extra steps, making the entire process seamless.


The Main Files and Folders

The Jekyll Configuration

At the very heart of any Jekyll site is the _config.yml file. This file is your control center. It's where you define global settings for your website, from the site's title and description to the base URL and permalink structure for your posts. Think of it as the brain of your operation; it tells Jekyll how to behave and how to process all the other files. You can also specify which plugins to use and how to handle different types of content here. It's important to keep this file clean and organized because any change you make here will affect the entire site. For example, if you want to change your site’s name, you do it here, not on every page manually.

Another crucial file is Gemfile. While not a core Jekyll file itself, it manages the software libraries, or "gems," that your Jekyll site depends on. This is where you would list the Jekyll gem itself, along with any plugins you want to use, like a sitemap generator or an image optimization tool. The Gemfile.lock is automatically generated and locks the specific versions of these gems, ensuring that your site builds consistently every time, whether you're building it on your local machine or on GitHub Pages. You don't usually need to edit this file, but it's good to know why it's there.

The Posts and Pages

Content is king, and in Jekyll, your content lives in a few key places. For blog posts, all your files go inside the _posts directory. These files must follow a specific naming convention: YYYY-MM-DD-your-post-title.md. This format is not just for organization; it's how Jekyll determines the post’s date and URL. Jekyll automatically processes these files and turns them into blog posts on your site. The content itself is written using Markdown, which is a simple, easy-to-read text format that converts to HTML.

For all other content that isn't a blog post, you create files or folders directly in the root directory. These are your "pages." A file named about.md in the root directory will become an "About Us" page at the URL /about/. Similarly, you can create subdirectories like docs/ and place files inside, and Jekyll will mirror that structure in your final website. This simple system makes it very clear where your content lives and how it will appear on the web.

.
├── _config.yml
├── _posts/
│   ├── 2024-01-01-my-first-post.md
│   └── 2024-01-05-my-second-post.md
├── about.md
├── contact.html
└── index.md

Other Important Parts

Templating with Layouts

How does Jekyll know what your pages should look like? This is where the _layouts directory comes in. Inside this folder, you'll find HTML templates that define the overall structure of your site. For example, you might have a default.html layout that includes the header, navigation, and footer for your entire site. You might also have a post.html layout for blog posts and a page.html for static pages. These templates use a powerful templating language called Liquid to pull in content from your Markdown files. By using layouts, you avoid repeating the same HTML code on every single page, making your site much easier to maintain.

When you create a new post or page, you simply specify which layout it should use in the YAML front matter at the top of the file. This tells Jekyll to take your content and insert it into the correct template. This separation of content and presentation is a core principle of Jekyll and helps you keep your site organized and consistent. If you ever want to change the look of all your blog posts, you only need to edit one file: the post.html layout.

Reusable Components with Includes

Sometimes you have small chunks of HTML that you want to reuse across multiple layouts or pages, like a footer or a social media icon list. Instead of copying and pasting this code everywhere, you can place these reusable components inside the _includes directory. Each file in this folder can then be "included" wherever you need it using a simple Liquid tag. This keeps your code clean and helps you avoid redundancy. If you need to update a component, you just change the file in _includes, and the change will be reflected everywhere it’s used.

For instance, you could have a file named _includes/footer.html that contains your site's footer. Then, in your _layouts/default.html file, you would just add {% include footer.html %}. This method is incredibly useful for building complex websites while keeping the code manageable and easy to follow. It also makes it much easier to collaborate with others since the code is logically separated into smaller, more focused pieces.

What About My Assets?

Any file that doesn't start with an underscore—like your CSS stylesheets, JavaScript files, or images—is a static asset. Jekyll will simply copy these files directly to the final website folder without processing them. A common practice is to create a folder at the root level, often named assets or images, to store all of these files. For example, you might have an assets/css/style.css file and an assets/images/logo.png file. When Jekyll builds your site, these files will appear in the exact same location inside the final _site directory.

This simple approach to handling assets means you don't have to worry about any special configuration for them. You can link to them from your pages just like you would on a regular HTML site. Just make sure to use a relative path. For example, to link to a stylesheet in your layout, you would use <link rel="stylesheet" href="/assets/css/style.css">. By keeping all your assets in one or two dedicated folders, your project stays organized and easy to navigate.


What Happens When I Build the Site?

Once you have all your files and folders set up, you need to "build" your site. This is a process where Jekyll takes all your source files—the Markdown posts, the layouts, the includes, and the static assets—and processes them into a fully functional static website. The final result of this process is a new directory named _site. This folder is the final destination for your website; it contains pure HTML, CSS, JavaScript, and images—everything a web browser needs to display your site.

The _site directory is what gets deployed to GitHub Pages. You should never edit any files inside this folder directly because it gets completely erased and rebuilt every time you run Jekyll. This is why it’s often a good practice to add _site/ to your .gitignore file. By understanding that your work is in the source files and the _site folder is just the output, you can avoid a lot of confusion. This clear separation of source and output is a key concept that makes Jekyll so effective for building static websites.

Decoding Jekylls Directory Structure

Starting a new Jekyll project can feel a bit like learning a new language. You open the folder and see a set of files and directories, some with underscores and some without. This structure isn't random; it's a carefully designed system that makes building a website simple and efficient. Understanding what each part does is the first and most important step to mastering Jekyll and creating a great site on GitHub Pages. This guide will walk you through the essential components, explaining their purpose and how they all work together to turn your content into a beautiful, functional website. Once you grasp this structure, you'll find that managing and growing your site is a smooth and logical process.

Table of Contents

Jekyll operates on a principle called convention over configuration, which means it expects certain files to be in certain places. This might seem restrictive at first, but it's what makes Jekyll so powerful. By following these conventions, you don't need to spend time manually setting up every detail. The system knows what to do with a file in the _posts directory versus one in the root directory. This clear separation of concerns—content, design, and configuration—is the secret to Jekyll’s success. Let's break down this structure so you can start your project with a solid foundation.


The Three Pillars of Content

The _config.yml File Your Sites Brain

At the root of your Jekyll project, you will always find the _config.yml file. This file is the central nervous system of your entire site. It's written in YAML format and controls all the global settings. Here, you define your site's title, a short description, the base URL for your GitHub Pages site, and the permalink structure for your posts. This is also where you tell Jekyll which plugins to use and which files or folders to ignore. It is a single source of truth for your site's configuration, so any change you make here will be reflected across your entire website when you build it.

For example, if you want all your blog post URLs to follow a pattern like /blog/post-title/ instead of the default, you would set that rule in _config.yml. Keeping this file organized and well-documented with comments is a great habit. It makes your site's settings transparent and easy to change later on, whether you're working alone or with a team. A good _config.yml file is the key to a manageable and scalable Jekyll site.

The _posts Directory for Your Blog

If you're building a blog, the _posts directory will be where you spend most of your time writing. This folder is specifically for your blog posts. Each post is a Markdown file, and it must follow a strict naming convention: YYYY-MM-DD-your-post-title.md. Jekyll uses the date at the beginning of the filename to automatically sort your posts and generate the correct date on your live site. The title part of the filename is used to create a clean, SEO-friendly URL. This simple system ensures that all your blog posts are organized consistently and are easy for both you and search engines to understand.

Inside each post file, you must include what is known as YAML front matter at the very top. This is a block of key-value pairs enclosed by triple-dashed lines (---). The front matter is where you set post-specific metadata, such as the title of the post, the author, and which layout to use. Jekyll uses this information to process the file and insert your content into the appropriate template. By keeping all your posts in one place with a consistent format, your blog becomes incredibly easy to manage and update.

Pages The Rest of Your Site

What about content that isn't a blog post? This is where pages come in. Pages are any other files, usually Markdown or HTML, that you place directly in your project's root directory or in subfolders. For example, your home page might be index.html or index.md, and an about page could be about.md. If you have a contact page, you might create a file called contact.html. Jekyll processes these files and creates a corresponding page on your website with a URL that mirrors the file path. For instance, about.md will become the /about/ page on your site.

This flexible system allows you to build a wide variety of static content beyond a simple blog. You can create subdirectories to organize your pages, such as /docs/ for documentation or /portfolio/ for your projects. Jekyll will respect this structure and generate a corresponding file hierarchy in the final output. This clear separation between posts and pages keeps your project organized and prevents clutter, especially as your site grows with more content.


Templates and Assets for Design

Layouts and Includes for Reusability

Jekyll keeps your content separate from your design through two key folders: **_layouts** and **_includes**. The _layouts folder contains the HTML templates for your pages. For example, you might have a default.html layout that defines the overall structure with your header and footer, and a post.html layout that adds special styling for blog posts. When you specify a layout in your page's front matter, Jekyll takes your content and "pours" it into the correct template. This prevents you from having to copy-paste the same HTML code on every single page.

The _includes folder is for smaller, reusable bits of code. Think of things like a navigation menu, a footer, or social media links. Instead of writing that HTML code in every layout, you can put it into a file in the _includes folder and then use a Liquid tag like {% include footer.html %} to add it wherever you need it. This makes your layouts much cleaner and easier to read. Most importantly, if you need to update your footer, you only have to do it in one file, and the change will automatically appear everywhere.

Static Assets Images, CSS, and JS

Not every file needs to be processed by Jekyll. Files that don't start with an underscore, like your images, CSS stylesheets, and JavaScript files, are treated as static assets. Jekyll simply copies these files directly to the final output folder without any changes. A common practice is to create a folder called **assets** at the root of your project to store all of these. Inside assets, you can create subfolders for css, js, and images. This keeps your project tidy and makes it easy to find what you need.

For example, if you have a main stylesheet at /assets/css/style.css, you can link to it from your layouts using that exact path. This clear separation between your processed content and your raw assets is another reason why Jekyll projects are so manageable. You know exactly where to look for your code and your content, making development a much more pleasant experience.


The Final Output Folder

When you run the Jekyll build command, all of these pieces come together to create your final website. This final, static version of your site is placed in a directory called **_site**. The _site folder contains nothing but pure HTML, CSS, and JavaScript—the complete, ready-to-serve version of your website. It is the folder that GitHub Pages will read and publish to the web. It is crucial to remember that you should never edit anything inside the _site folder. It is meant to be a temporary output directory that is deleted and rebuilt every time you make a change and run the build command. To prevent this folder from being accidentally uploaded to your repository, it's a best practice to add _site/ to your .gitignore file.

Jekyll Files and Folders An In-Depth Look

When you first create a Jekyll site, you'll notice a handful of files and folders right away. Some have names you might recognize, like a configuration file, while others, with their leading underscores, might seem a bit mysterious. It's a common feeling, but each of these components plays a vital role in building your static website. This article will take a close look at every key file and folder, explaining its purpose in a way that's easy to understand. By the end, you'll know exactly what everything does, which will give you the confidence to start building and customizing your GitHub Pages site. This knowledge is the foundation for creating a clean, organized, and scalable project from the very beginning.

Table of Contents

Jekyll’s power lies in its simplicity and its predictable structure. The system is designed to be smart about how it processes your files. For example, it knows that a file in the _posts directory is a blog post and will treat it differently than a file in the root directory. It also knows that files starting with an underscore are special and should not be copied to the final website as-is. This predictable structure is not a bug; it's a feature. It streamlines the entire process of converting your source files into a live, static website, especially when you're relying on a service like GitHub Pages to do the heavy lifting for you.


The Core Configuration Files

_config.yml The Master Control

The _config.yml file is the single most important file in your Jekyll project. This is where you set up all the global parameters for your site. You can define the site’s title, a short description, the author’s name, and a base URL. It's also where you can configure how URLs (permalinks) for your posts should be structured, which is a great feature for SEO. Additionally, you use this file to specify which plugins Jekyll should use and which folders or files to ignore during the build process. A well-maintained _config.yml file is the cornerstone of a healthy Jekyll site, as it ensures all your settings are in one central, easy-to-find location.

The file is written in YAML, which is a human-readable data serialization format. Its simple structure of key-value pairs makes it easy to understand and edit. For instance, to set your site’s title, you would simply write title: "My Awesome Site". Because this file affects the entire website, you should always double-check your changes after editing it to make sure everything is working as expected. Think of it as the project’s main instruction manual; it tells Jekyll exactly how to build your site.

Gemfile and Gemfile.lock for Dependencies

Jekyll is a Ruby gem, and to make sure your project can be built consistently, you need to manage its dependencies. This is the job of the Gemfile and Gemfile.lock. The Gemfile is where you list all the Ruby gems your project relies on, including Jekyll itself and any plugins you might be using. For example, you might add a gem for creating a sitemap or for handling comments. When you run the bundle install command, Ruby reads this file and downloads all the necessary gems.

The Gemfile.lock file is then automatically generated. Its purpose is to record the exact versions of every gem that was installed. This is incredibly useful for ensuring your site builds the same way on your local machine and on the GitHub Pages server. You should never edit Gemfile.lock manually; it is a file that is managed automatically by Bundler, the Ruby gem manager. By including both these files in your repository, you guarantee that anyone who clones your project will be able to build it correctly without any version conflicts.


Your Content in Posts and Pages

_posts for Your Blog Articles

The _posts directory is where Jekyll finds and processes your blog posts. Every file in this directory must be a Markdown file with a very specific naming convention: YYYY-MM-DD-your-post-title.md. The date part is crucial, as it allows Jekyll to automatically sort your posts chronologically. The title part, with words separated by hyphens, is used to create a clean URL slug. This simple convention is what makes it so easy to manage a blog with dozens or even hundreds of articles. You simply create a new file in this folder, and Jekyll knows exactly what to do with it.

Inside each post file, you must include a block of YAML front matter at the top. This is a section enclosed in three hyphens (---). The front matter is where you define metadata like the post's title, author, date, and which layout to use. You can also add custom metadata here, like tags or categories, which can then be used to organize and display your content on your site. This structured approach to content is one of the key reasons Jekyll is so effective for blogging.

Creating Pages The Easy Way

Not all content is a blog post. For static content like an About page, a Contact page, or a custom landing page, you create files or folders directly in the root of your project. For example, a file named about.md will become your /about/ page. A file named contact.html will become your /contact.html page. This straightforward system means the structure of your files directly reflects the URL structure of your website, making it very intuitive. You can also create subdirectories to organize your pages, such as /docs/getting-started.md, which will create the page at /docs/getting-started/.

This flexibility allows you to build a wide variety of static websites, not just blogs. You can mix and match Markdown and HTML files depending on your needs. For instance, you might use Markdown for content-heavy pages because it's easy to write, but use a pure HTML file for a complex contact form. This simple, file-based approach to page creation is what makes Jekyll so accessible for beginners and powerful for more advanced users.


The Design Folders for Your Site

_layouts and the Structure of Your Site

The **_layouts** directory is the home for all your website’s HTML templates. These layouts define the overall look and feel of your pages. You might have a default.html layout that includes the header, footer, and navigation bar, and then more specific layouts like post.html or page.html that build upon the default layout. This system of nested layouts allows you to create a consistent design across your entire site without repeating code. When you specify a layout in your page's front matter, Jekyll takes your content and inserts it into the correct template, generating the final HTML file.

_includes for Reusable Code Blocks

The **_includes** folder is where you put small, reusable snippets of code. Think of things like a sidebar widget, a social media icon list, or a complex footer. Instead of copying and pasting the same HTML code into multiple layouts or pages, you can put it in a file inside _includes and then use a simple Liquid tag to include it wherever you need it. This keeps your code DRY (Don't Repeat Yourself) and makes your site much easier to maintain. If you need to make a change to a common element, you only have to edit it in one place, and the change will be reflected everywhere.

_sass for Advanced Styling

If you're using a CSS preprocessor like Sass, the **_sass** directory is where your source files go. Jekyll is built with Sass support, so it will automatically process any .scss or .sass files in this folder and compile them into a single CSS file. This allows you to write more modular and maintainable stylesheets using variables, mixins, and nested rules. The final, compiled CSS file will then be placed in a directory like /assets/css/, ready to be used by your layouts.


The Output and the Ignored

When you run the Jekyll build command, all of these pieces come together to create your final website in the **_site** directory. This is the output folder that contains all the static files you need to deploy. It’s crucial to remember that this folder should never be edited manually. It's a temporary directory that is recreated every time you build your site. Finally, files and folders that you want Jekyll to ignore, such as your node_modules directory or a draft folder, can be specified in your _config.yml or with a leading underscore, like _drafts. This helps keep your project clean and prevents unnecessary files from being included in your final website.

Navigating the Jekyll Directory The Key to Mastering GitHub Pages

If you're using Jekyll to build a website on GitHub Pages, the directory structure is your most important tool. It’s not just a random collection of files and folders; it's a logical system that tells Jekyll exactly what to do. Learning this structure is like learning the blueprint of a house. Once you understand where the foundation is, where the walls go, and what the purpose of each room is, you can build and expand it with confidence. This guide will help you navigate your Jekyll project folder by folder, so you can stop guessing and start creating. A clear understanding of this system is the key to building a clean, scalable, and easy-to-manage website that performs well on GitHub Pages.

Table of Contents

Mastering the Jekyll File System

Jekyll's design is all about convention. This means the names of certain folders and the placement of certain files are not just suggestions—they are expectations. Jekyll looks for a folder named _posts to find your blog articles and for a folder named _layouts to find your templates. This predictable structure is what allows Jekyll to automate much of the website creation process. By working with this system, rather than against it, you can take full advantage of Jekyll’s power and build your site much faster. Let's start with the most important part of your project: the root directory.


The Root Directory Your Sites Home

The Importance of _config.yml

At the very top level of your project is the root directory. Here, you'll find a handful of critical files. The most important of these is **_config.yml**. This file is your website's main settings panel. It’s where you define site-wide information like the title, description, and base URL. It's also where you can set up how Jekyll should generate your pages, such as the URL format for your blog posts. Because these settings are global, any changes you make in this file will affect your entire website. Keeping this file organized and well-documented is crucial for long-term project health. Think of it as the main control center for your website, dictating how everything else should work.

You can also use _config.yml to specify which files or directories Jekyll should ignore during the build process. For example, you might have a _drafts folder for unfinished posts that you don't want to publish yet. By telling Jekyll to ignore this folder, you can keep your draft content in the same project without it being published live. This file is the first thing Jekyll reads when it starts building your site, so it's essential for getting your project off on the right foot.

Your Content Posts and Pages

The root directory is also where your primary content lives. This is a key distinction in Jekyll. Your main website pages, such as an "About" page or a "Contact" page, are created by simply placing a Markdown or HTML file directly in the root directory. For example, a file named about.md will automatically become the /about/ page on your website. This system is very intuitive, as the file structure directly mirrors the website's URL structure. It makes it easy to find and edit the content for specific pages.

In contrast, your blog posts are stored in a dedicated folder named **_posts**. This is the key difference between posts and pages. Jekyll processes posts differently by using the date in their filename to sort them. This separation of content into pages for static content and posts for chronological content is a fundamental concept in Jekyll and helps keep your project well-structured and easy to manage. When you know where to put your content, the rest of the process becomes a breeze.


Inside the Special Folders

_layouts and the Look of Your Site

To give your website a consistent look and feel, Jekyll uses templates stored in the **_layouts** folder. A layout is an HTML file that acts as a blueprint for your pages. For example, you might have a default.html layout that includes the header, navigation, and footer. Then, you could have a post.html layout that uses the default layout but adds specific styling for a blog post. By specifying which layout a page or post should use in its YAML front matter, you can apply a consistent design without having to repeat the same HTML code on every file. This makes your site much easier to maintain and update.

.
├── _layouts/
│   ├── default.html
│   └── post.html
├── _posts/
│   └── 2024-01-01-hello-world.md  <-- This post uses a layout
└── about.md                     <-- This page uses a layout

This templating system is one of Jekyll’s most powerful features. It allows you to separate your content from your presentation. If you ever want to change the look of your entire website, you only need to edit a handful of layout files, and the changes will be automatically applied to all the pages and posts that use them.

_includes for Efficiency

The **_includes** folder is where you put small, reusable bits of HTML code. If you have a piece of code that you want to use in multiple layouts or pages—like a footer, a navigation bar, or a social media icon block—you can save it as a file in the _includes directory. Then, using a simple Liquid tag like {% include footer.html %}, you can insert that code wherever you need it. This keeps your code clean and manageable, following the "Don't Repeat Yourself" (DRY) principle. If you need to make a change, you only have to edit the file in the _includes folder, and it will update everywhere it’s used.

Managing Assets Like a Pro

For files that Jekyll doesn’t need to process, such as your images, CSS files, and JavaScript files, you should store them in a dedicated folder. A common practice is to create a folder called **assets** at the root of your project. Inside this folder, you can create subdirectories like css, js, and images. Jekyll will simply copy these files to the final _site directory, keeping their folder structure intact. This means you can link to them in your pages and layouts using a simple relative path like /assets/css/style.css. This method keeps your project organized and prevents clutter in the root directory.


What to Do With the _site Folder

Finally, when you build your Jekyll site, all these files and folders are compiled into a final, static website inside the **_site** directory. This folder is the output, and it contains all the HTML, CSS, and other files that a web browser needs to display your site. It is extremely important that you do not manually edit any files within this folder. Every time you run the build command, the _site folder is completely erased and rebuilt from scratch. The _site folder is what gets deployed to GitHub Pages, but you should never commit it to your Git repository. It's best to add _site/ to your .gitignore file to prevent it from being accidentally uploaded.

Beyond the Basics Understanding the Anatomy of a Jekyll Project on GitHub Pages

You've successfully set up a basic Jekyll site and understand the core files like _config.yml and the _posts directory. That's a great start. But a Jekyll project is more than just these few files. To truly unlock its power and build a clean, scalable website on GitHub Pages, you need to go beyond the basics and understand the deeper anatomy of the Jekyll project. This guide will take you on a tour of the more advanced files and folders, explaining their purpose and how they can help you build a more robust and organized site. By understanding how all the pieces fit together, you can create a project that is not only easy to manage but also flexible enough to grow with your needs.

Table of Contents

Jekyll is designed for developers and content creators who want full control without the complexity of a database. Its file-based structure allows for a clear separation of content, logic, and design. Understanding this structure is like learning how to read a blueprint. Once you can read it, you can build anything. We'll start by revisiting some core concepts with a new level of detail and then move on to the more specialized folders that can take your Jekyll site to the next level. This knowledge is what separates a good Jekyll user from a great one.


The Root of the Matter Critical Files

_config.yml and Gemfile

While you may already be familiar with **_config.yml** as the central control for your site, it’s worth noting its full potential. Beyond setting the site title and description, you can use it to define global variables that can be accessed anywhere on your site. For example, you can set social media handles or API keys here, making them easy to update later. The Gemfile, often overlooked by beginners, is equally important. It is the core of Jekyll's dependency management system. It lists all the Ruby gems, including Jekyll and any plugins, that your project needs. The accompanying Gemfile.lock file locks the exact versions of these gems, guaranteeing that your site builds the same way every time, regardless of where it's being built. This is a crucial safety net, especially when relying on a service like GitHub Pages to build your site automatically.

Front Matter The Metadata of Your Content

Every Jekyll file that you want Jekyll to process—whether it's a post, a page, or a collection item—must begin with **YAML Front Matter**. This is a block of key-value pairs enclosed by triple-dashed lines (---). The front matter is how you provide metadata about your content. It’s where you specify the title of the page, which layout to use, and any other custom variables you want to use. You can also use it to set a permalink for a specific page, overriding the default behavior. For example, a post can have permalink: /my-cool-post/ in its front matter to give it a custom URL. This front matter is incredibly powerful, allowing you to control how each individual piece of content is rendered without changing the core template files.

---
title: "My Awesome Post"
layout: post
author: "Jane Doe"
date: 2025-08-12 10:00:00 -0500
---

This simple block of code at the top of your files is what enables Jekyll to perform its magic. It allows you to inject dynamic data into static templates, turning a simple Markdown file into a complete, styled HTML page.


The Special Folders Deep Dive

_layouts and the Template Hierarchy

The **_layouts** folder is the heart of your site’s design. A layout is a complete HTML template, often containing the <head>, <body>, and other structural elements. You can have a hierarchy of layouts to create a consistent design. For example, you might have a default.html that sets the basic page structure, and a post.html layout that extends it with a sidebar or a comment section. In the front matter of your post, you would specify layout: post, and Jekyll would automatically use the post.html template, which itself could inherit from the default.html template. This hierarchical system is a powerful way to keep your site's design consistent while allowing for variations on different types of pages.

Layouts in Action

Your post.html file might start with --- layout: default --- to indicate it should use the default.html template. This creates a chain of inheritance, where the final page is built from multiple templates. This is a core principle of modular design that makes your site easy to maintain.

_includes for Modular Design

The **_includes** folder is where you store small, reusable pieces of code that you want to insert into your layouts or pages. Think of it as a toolbox of components. Instead of copying and pasting the same HTML for a navigation bar or a footer into multiple layout files, you can put that code into a file in the _includes folder and then use a Liquid tag to include it. For example, a file named _includes/nav.html could contain your navigation menu, and you would add {% include nav.html %} to your layouts. This modular approach keeps your code clean and makes your site much easier to update. If your navigation menu ever changes, you only need to edit one file.

_data Customizing Your Site with Data Files

For more advanced Jekyll sites, the **_data** folder is a game-changer. This folder is where you can store data in YAML, JSON, or CSV files that can be accessed across your entire site. For example, you might have a list of team members in a file named _data/team.yml. You could then loop through this data in a layout or an include to dynamically generate a team page. This is a powerful way to separate your content from your code. Instead of hardcoding a list of team members in your HTML, you can manage the list in a simple data file and let Jekyll handle the rest. This approach is excellent for creating reusable components like navigation menus, product lists, or testimonials.


Managing Assets and the Final Output

Finally, there's the distinction between your source files and the final output. Files that don't start with an underscore, like your assets folder, are considered static. Jekyll will simply copy them to the final **_site** folder, which is the complete, static version of your website that gets deployed to GitHub Pages. It's a best practice to keep your assets—like images, CSS, and JavaScript—organized in a dedicated folder. This makes it easy to manage your files and keeps your project tidy. Remember, the _site folder is the final output and should never be edited manually or committed to your Git repository. It is a temporary folder that is rebuilt every time you make a change to your source files.

From Zero to Hero A Walkthrough of the Jekyll Directory for GitHub Pages Beginners

If you're a beginner, a Jekyll project folder might seem a little intimidating at first. You'll see a mix of files and folders, some with underscores and some without, and it's not immediately obvious what each one does. This guide is a step-by-step walkthrough designed to take you from a complete beginner to someone who confidently understands the Jekyll directory structure. We will break down each key file and folder, explaining its role in a simple and straightforward way. By the time you're done, you'll know exactly where to put your content, how to change your site's settings, and where to find your website's templates. This foundational knowledge is all you need to start building your own website on GitHub Pages and move from zero to hero.

Table of Contents

Your First Steps with Jekyll

Jekyll is an incredibly powerful tool because it automates much of the website creation process. It knows how to take your raw content and templates and turn them into a complete, static website. This is made possible by its predictable directory structure. You don't have to tell Jekyll where your blog posts are; it knows to look in the _posts folder. You don't have to specify where your templates are; it knows they're in the _layouts folder. Learning this system is the most efficient way to get up and running, so let's start with the files you'll see as soon as you open your project folder.


The Root Directory What You See First

The _config.yml File Your Sites Settings

When you look inside your Jekyll project, the most important file you will see at the top level is **_config.yml**. This is your site's main settings file, written in YAML. It’s where you define all the global information about your website, such as the title, description, and author. You also use this file to set your website's base URL, which is very important for GitHub Pages, and to configure your post's URL structure (permalinks). Any change you make here will apply to your entire site. For a beginner, this is the first place to look when you want to change your site's name or other core information.

This file is also where you tell Jekyll which plugins to use and which files or folders to ignore. For example, if you want Jekyll to ignore a folder of images you're not ready to use yet, you can add its name to the exclude list in this file. The _config.yml file is the single source of truth for your site’s behavior, making it a critical file to understand from the very beginning.

Posts, Pages, and index.md

In Jekyll, content is divided into two main categories: posts and pages. Pages are for static, standalone content like your home page, an "About" page, or a "Contact" page. You create a page by simply placing a Markdown or HTML file directly in the root directory. For example, your home page is typically named index.md or index.html. An "About" page could be about.md. When you build your site, these files become pages at the corresponding URLs, like /about/.

Posts, on the other hand, are for chronological content, like blog articles. All of your posts must be placed inside the **_posts** directory. These files must be named using a specific format: YYYY-MM-DD-your-post-title.md. This naming convention is not just for organization; it's how Jekyll knows the date of your post and what to name its URL. By keeping your blog articles in this separate folder, you keep your main directory clean and make it easy for Jekyll to handle your content automatically.


The Special Folders for Design and Structure

_layouts Your Site's Templates

How does your content get its final look? That's the job of the **_layouts** folder. This directory contains all the HTML templates for your website. Think of a layout as a blueprint for a page. You might have a default.html file that contains the common HTML for your header, navigation, and footer. Then, you might have a post.html file that uses the default.html layout but adds a special sidebar or comment section for blog posts. By using layouts, you avoid repeating the same HTML on every single page. Instead, you just tell a page or post which layout to use in its YAML front matter, and Jekyll does the rest.

This system is a great way to ensure consistency across your entire site. If you decide to change your site's navigation, you only have to edit the code in one place—the layout file—and the change will appear on every page that uses that layout. This is a fundamental concept for building a professional and maintainable website.

_includes Reusable Code Snippets

The **_includes** folder is like your personal toolbox of HTML components. This is where you put small, reusable snippets of code that you want to use across multiple layouts or pages. Common examples include a footer, a social media icon block, or a navigation bar. By placing these snippets in a file inside the _includes directory, you can then add them to a layout using a simple Liquid tag, like {% include footer.html %}. This keeps your code clean and organized. When you need to make an update, you just change the file in _includes, and the change automatically appears everywhere that snippet is used.

This folder is a fantastic resource for beginners because it helps you start thinking about modular design. Instead of writing the same code over and over again, you can create a single component and reuse it wherever you need it, making your site more efficient and easier to manage.

Assets for Images and Styles

When you're building a website, you will need images, CSS stylesheets, and JavaScript files. For these, it's a best practice to create a folder at the root of your project, often named **assets**. Inside, you can create subfolders for css, js, and images. Any file that does not start with an underscore is considered a static asset, and Jekyll will simply copy it directly to the final website without processing it. This means you can link to your files using a simple path. For example, your stylesheet might be located at /assets/css/style.css. This approach keeps your project organized and prevents your root directory from becoming cluttered with unrelated files.


Building and Publishing Your Site

Once you've added your content and set up your templates, you'll need to "build" your site. This is when Jekyll takes all of your source files and compiles them into a complete, ready-to-publish website in a new directory named **_site**. This folder contains all the static HTML, CSS, and images that a web browser needs. It is the folder that gets deployed to GitHub Pages. It's very important to know that you should never edit files inside the _site folder. It is a temporary output directory that is deleted and rebuilt every time you run the build command. To make sure you don't accidentally commit it to your Git repository, it's a great habit to add _site/ to your .gitignore file.

The Blueprint of a Jekyll Site Demystifying the Directory Structure

Imagine a Jekyll project as a blueprint for a building. Each file and folder has a specific purpose, from the foundation to the individual rooms. For beginners, this blueprint might look complex at first, but once you understand what each part does, it becomes a powerful and intuitive system for creating websites. This article will act as your guide, demystifying the Jekyll directory structure. We'll walk through the purpose of each component, from the core configuration files to the folders that hold your content and design. By grasping this blueprint, you'll be able to build a well-organized and scalable website on GitHub Pages, avoiding common mistakes and ensuring your project is easy to manage from day one.

Table of Contents


Unveiling the Blueprint

The beauty of Jekyll's design lies in its predictability. The system is built on a set of conventions that allow it to automate much of the website generation process. By placing a file in the _posts directory, you're telling Jekyll, "This is a blog post." By putting a file in the _layouts directory, you're saying, "This is a template for my website's design." This clear separation of concerns makes Jekyll a highly efficient tool. It lets you focus on writing content and designing your site without worrying about the underlying technical details. Let's start with the most critical parts of the blueprint: the foundational elements.


The Foundational Elements

_config.yml and Gemfile

At the very root of your project, two files serve as the foundation of your site. The first is **_config.yml**. This file is your website’s central control panel. It holds global settings that apply to your entire site, such as the title, description, and base URL. It's also where you can configure important features like the URL structure for your blog posts and which plugins Jekyll should use. All of these settings are critical for how Jekyll builds your site. A well-organized _config.yml file is the cornerstone of a manageable project.

The second file is the **Gemfile**. This file manages your project's dependencies, listing the Ruby gems, including Jekyll itself, that your site needs to run. The accompanying **Gemfile.lock** file locks the exact versions of these gems. This is an essential safety feature, as it ensures that your site will build consistently on any machine, from your local computer to the GitHub Pages servers. You should never edit the Gemfile.lock file manually; it is automatically generated and managed by Bundler, a Ruby tool.

Your Site's Content Posts and Pages

Jekyll organizes your content into two main types. For chronological articles and blog posts, you place your Markdown files inside the **_posts** directory. These files must follow a strict naming convention, like YYYY-MM-DD-your-post-title.md, so Jekyll can automatically sort them by date and create clean URLs. This system keeps your blog content neatly organized and easily accessible. For static, non-chronological content like an "About" page or a "Contact" page, you simply place the Markdown or HTML files directly in the root directory. Jekyll will process these files and create a corresponding page on your site with a URL that matches the file path.

This separation of posts and pages is a key concept that simplifies content management. You know exactly where to put a new blog post and where to put a new static page. This clear organization prevents clutter and makes it easy to find what you're looking for, even in a large project.


The Design and Logic Framework

_layouts The Template for Your Site

To define the look and feel of your website, Jekyll uses templates stored in the **_layouts** folder. A layout is a full HTML file that serves as a blueprint for a page. For example, you might have a default.html layout that includes the header and footer for your entire site. Then, you can have a post.html layout that uses the default layout but adds a special section for blog posts. By specifying which layout a page or post should use in its YAML front matter, you can apply a consistent design across your site without writing the same HTML over and over again. This is a powerful feature for maintaining a professional and unified look.

_includes The Toolkit for Reusability

The **_includes** folder is where you put small, reusable chunks of HTML. Think of things like a navigation bar, a social media icon block, or a contact form. Instead of copying and pasting this code into every layout, you can save it as a file in the _includes directory and then insert it into your layouts with a simple Liquid tag like {% include navigation.html %}. This modular approach keeps your code clean and efficient. If you ever need to change your navigation bar, you only have to edit the file in _includes, and the change will be reflected everywhere it's used.

.
├── _layouts/
│   ├── default.html
│   └── post.html
├── _includes/
│   ├── header.html
│   └── footer.html
└── ...

_sass for Advanced Styling

For more advanced styling, the **_sass** folder is where you store your Sass (Syntactically Awesome StyleSheets) files. Jekyll has built-in support for Sass, so it will automatically process these files and compile them into a single CSS file. This allows you to use features like variables, nested rules, and mixins, making your stylesheets more modular and easier to manage. The final compiled CSS file is then placed in a directory like /assets/css/, ready to be used by your layouts.


Understanding the Build Process

Once you've arranged your files and folders, you'll run the Jekyll build command. This command takes all your source files and compiles them into a final, ready-to-deploy website inside the **_site** directory. The _site folder is the final output, containing pure HTML, CSS, and JavaScript. This is the folder that you publish to GitHub Pages. It is crucial to remember that you should never edit files inside this folder directly. The _site folder is a temporary output that is completely erased and rebuilt every time you run the build command. To prevent accidentally committing this output folder to your Git repository, it's a best practice to add _site/ to your .gitignore file.

Jekyll Directories Explained Where Everything Goes on Your GitHub Pages Blog

When you start a Jekyll project, you'll see a collection of folders and files, some with an underscore in their name and some without. This is the core of Jekyll's powerful and simple system. Each directory has a specific job, and understanding these roles is the key to building and managing a clean, organized blog on GitHub Pages. This article will explain what each of the main directories does, so you know exactly where to put your content, where to find your design files, and how Jekyll processes everything to create your final website. By the end, you'll have a clear mental map of your Jekyll project, making it much easier to work with.

Table of Contents

The beauty of Jekyll lies in its conventions. It's a "zero configuration" tool in many ways because it already knows what to do with a file based on where it's located. For example, it expects blog posts to be in a folder named `_posts`. This means you don't have to tell Jekyll where to find your content; it just knows. This predictable structure is what allows Jekyll to automate the process of building a static website, making it a perfect choice for blogging and documentation. Let's start by looking at the special folders that are at the heart of Jekyll's system.


The Underlined Folders The Heart of Jekyll

_posts The Home of Your Blog

For any blog, the _posts directory is where all the magic happens. This is the dedicated home for all your articles. Every file you place here must be a Markdown file with a very specific naming convention: YYYY-MM-DD-your-post-title.md. The date at the beginning of the filename is used by Jekyll to automatically sort your posts and generate a clean URL. The title part of the filename is used to create the final URL slug. This system ensures that your blog is always organized chronologically and that your URLs are clear and SEO-friendly. Inside each post file, you will also use a YAML front matter block at the top to set the post's title, author, and which layout it should use.

By keeping all your blog content in one place, the _posts folder makes it incredibly easy to manage and find your articles. It also signals to Jekyll that these are time-stamped, chronological pieces of content that should be processed differently than a static page, such as your "About" page.

_layouts Your Site's Templates

The _layouts directory is where your website's design comes to life. This folder contains all the HTML templates, or layouts, that define the overall structure of your pages and posts. You might have a default.html layout that provides the basic HTML, including the header, navigation, and footer for your entire site. You could then have a more specific post.html layout that uses the default layout but adds a dedicated space for the post's content and maybe a comment section. This approach allows you to create a consistent look and feel across your entire website without repeating a lot of HTML code. If you need to change your navigation bar, you only have to edit the layout file, and the change will be applied everywhere.

This separation of content from design is a key principle of Jekyll. Your blog posts and pages contain only the content, while the layouts provide the framework. This makes your site much easier to maintain and update.

_includes for Reusable Snippets

For smaller, reusable pieces of code, Jekyll uses the _includes directory. This is where you can store HTML snippets like a site-wide footer, a social media icon block, or a contact form. Instead of copying and pasting this code into every layout, you can save it as a file in the _includes folder and then use a simple Liquid include tag to insert it wherever you need it. For example, {% include footer.html %} will place the content of your footer file right there. This practice keeps your code clean, modular, and easy to maintain. If you ever need to change a reusable component, you only have to edit the file in _includes, and the change will be reflected everywhere it's used.


The Root and Your Static Files

The _config.yml File Your Site's Settings

At the root of your project, the _config.yml file is the most important configuration file. It’s where you define global settings for your site, such as its title, description, and base URL. This is also where you can set the permalink structure for your posts and tell Jekyll which plugins to use. Because these settings are global, any changes you make here will affect your entire website. It's the central control panel for your project and should be kept clean and well-documented.

The Role of Pages

For static content that isn't a blog post, you simply place your Markdown or HTML files directly in the root directory. These are your "pages." For example, a file named about.md will become the /about/ page on your website. You can also create subdirectories to organize your pages, such as /docs/getting-started.md, which will become the /docs/getting-started/ page. This simple file-based approach to creating pages makes it very intuitive and easy to manage the non-blog content on your site.

Assets and Other Static Content

Your website also needs static assets like images, CSS stylesheets, and JavaScript files. Any file or folder in the root directory that does not start with an underscore is treated as a static asset. Jekyll simply copies these files directly to the final website folder without any processing. A common practice is to create an assets folder at the root of your project and put subdirectories inside it for images, css, and js. This keeps your project organized and ensures that your files are easy to find and link to.


The Output and the Final Product

Once you run the Jekyll build command, all of these files and folders are processed and compiled into a single, complete, and static website inside the _site directory. This is the final output of your project, containing all the HTML, CSS, JavaScript, and images that a web browser needs. The _site folder is what gets published to GitHub Pages. It is crucial to remember that you should never edit anything inside this folder directly, as it gets completely erased and rebuilt every time you build your site. To prevent accidentally committing this temporary folder to your Git repository, always add _site/ to your .gitignore file.

Structuring Success How to Organize Your Jekyll Project for GitHub Pages

When you start a Jekyll project, the way you organize your files and folders sets the stage for future success. A well-structured project is easier to navigate, simpler to maintain, and much more scalable as your website grows. It also makes your project more intuitive for anyone else who might need to work on it. This article will provide you with best practices and actionable tips for organizing your Jekyll project effectively, ensuring you build a clean and professional website on GitHub Pages. By following these guidelines, you can avoid common pitfalls and create a site that is a pleasure to work with, both for you and for the Jekyll build system.

Table of Contents

Jekyll's predictable file structure is one of its greatest strengths, but it still requires some thoughtful organization on your part. While Jekyll will work even with a messy folder, a clean structure makes a huge difference in your workflow. It helps you quickly find what you're looking for, whether it's a specific blog post, a stylesheet, or a layout file. A good structure is the foundation of a successful website, so let's start with the most important part: organizing your content.


Organizing Your Content The Right Way

Consistent Naming Conventions

One of the simplest yet most effective things you can do is to adopt a consistent naming convention for your files. For all your files and folders, it is a best practice to use only lowercase letters and hyphens to separate words. For example, use about-me.md instead of About Me.md. This prevents issues with URLs and file paths, which can be inconsistent across different operating systems. For your blog posts, you must follow Jekyll's strict convention: YYYY-MM-DD-your-post-title.md. This format is not optional; it's how Jekyll determines the post's date and generates its URL. By following this rule, you ensure your blog is always sorted correctly and that your posts are processed without error.

Separating Posts from Pages

Jekyll makes a clear distinction between chronological content (posts) and static content (pages), and you should, too. All of your blog posts belong in the _posts directory. For all other static content, such as your "About" page, "Contact" page, or a custom landing page, you should place the files directly in the root directory. You can also create subfolders to organize your pages, such as /projects/my-first-project.md. This approach keeps your root directory clean and makes it easy to understand the purpose of each piece of content. When you look at your project folder, you can immediately tell which files are static pages and which are blog posts.


Best Practices for Design and Reusability

Centralizing Your Layouts and Includes

To keep your site's design consistent and easy to manage, you should centralize your design files in the _layouts and _includes folders. Put all your HTML templates in the _layouts directory. You can create a hierarchical structure, such as a default.html layout that other layouts inherit from, to avoid repeating code. For small, reusable snippets of HTML—like a navigation bar, a footer, or a social media icon block—use the _includes folder. By placing these components here, you can insert them into any layout or page using a simple Liquid tag. This makes your code modular and much easier to maintain; if you need to update your footer, you only have to do it in one file.

.
├── _layouts/
│   ├── default.html
│   └── post.html
├── _includes/
│   ├── header.html
│   └── footer.html
└── ...

Managing Static Assets Cleanly

Your website's static assets, such as images, CSS, and JavaScript files, should be kept in a dedicated folder. The most common and recommended practice is to create a folder named assets at the root of your project. Inside it, you can create subdirectories for each type of asset: /assets/css/, /assets/js/, and /assets/images/. This prevents these files from cluttering your root directory and makes it easy to find what you're looking for. Jekyll treats any folder not starting with an underscore as a static asset and copies it directly to the final website, so this simple organization system works perfectly out of the box.


Keeping Your Project Clean and Professional

The Power of .gitignore

For any project using Git and GitHub Pages, a .gitignore file is essential. The most important thing to add to this file is the _site/ folder. This is the temporary output directory that Jekyll creates when it builds your site. You should never commit this folder to your Git repository, as it is automatically generated and can be quite large. Including _site/ in your .gitignore file prevents it from being tracked by Git, keeping your repository clean and focused on your source files. You can also add other temporary or generated files, such as your .sass-cache/ folder or your Gemfile.lock, if you prefer not to track them.

Avoiding Unnecessary Files

Another tip for keeping your project clean is to be mindful of what you place in your root directory. Only the most essential files, such as your _config.yml, Gemfile, and main pages, should be at the root. Avoid placing draft posts, old notes, or other temporary files here. If you need a place for drafts, you can create a folder named _drafts. Jekyll knows to ignore this folder by default, allowing you to work on new posts without them being published. By following these simple rules, you can ensure your Jekyll project is not only well-structured but also professional and easy to manage for years to come.

Inside Jekyll A Comprehensive Guide to its Directory Structure


If you want to master Jekyll and build a professional website on GitHub Pages, a deep understanding of its directory structure is essential. It's the blueprint that dictates how your website is built. This article provides a comprehensive tour of every significant file and folder in a Jekyll project. We will go beyond the basics to explain the function of each component, from the core configuration files to the advanced data and styling directories. By the end of this guide, you'll have a complete mental map of a Jekyll project, giving you the confidence to manage, expand, and troubleshoot your site effectively. This knowledge is what turns a beginner into a skilled Jekyll user.

Table of Contents

Jekyll’s architecture is built on a "convention over configuration" philosophy. This means that by placing files in specific folders, you're telling Jekyll how to process them. This system automates much of the website creation process and provides a logical framework for your project. The clear separation between content, design, and configuration is the key to building a scalable and maintainable website. Let's start our tour at the root of the project, where the most important files reside.


The Root The Project's Command Center

_config.yml The Master Settings File

At the root of your project, the _config.yml file is your site's master control panel. This single file is where you define all the global settings that apply to your entire website. It’s where you set your site’s title, a short description, and its base URL. You also use it to configure important features like permalinks, which control the URL structure of your posts and pages. For example, you can set a permalink to /blog/:title/ to ensure all your post URLs are consistent. This file is also where you specify which plugins to use and which files or directories to ignore during the build process. A well-organized and well-documented _config.yml file is the foundation of a healthy Jekyll project.

Gemfile and Gemfile.lock Managing Dependencies

While not a core part of Jekyll's directory structure, the Gemfile and Gemfile.lock are critical for any Jekyll project. The Gemfile is where you list all the Ruby gems your site depends on, including Jekyll itself and any plugins you might use. The Gemfile.lock file is automatically generated and records the exact versions of these gems. This is crucial for ensuring that your site builds consistently on any machine, including the GitHub Pages servers. By including both these files in your repository, you guarantee that your project is reproducible and free from version-related conflicts.


The Underlined Directories The Core Components

_posts The Blog Engine

The _posts directory is the dedicated home for all your blog posts and articles. Every file in this folder must follow a strict naming convention: YYYY-MM-DD-your-post-title.md. This format is what allows Jekyll to automatically sort your posts chronologically and generate a clean URL. Inside each post file, you include YAML front matter at the top to provide metadata like the post's title, author, and the layout it should use. This structured approach makes it easy to manage a blog of any size and is a key reason Jekyll is so popular for blogging.

_layouts and _includes The Design System

Jekyll’s design system is built on two primary directories: _layouts and _includes. The _layouts folder contains your full HTML templates. A layout is a blueprint for a page, defining its overall structure, from the header and navigation to the footer. You can create a hierarchy of layouts, such as a default.html layout that other layouts like post.html and page.html inherit from. This system prevents code duplication and makes site-wide design changes incredibly easy. The _includes folder is for smaller, reusable HTML snippets. Things like a social media block or a navigation menu can be saved as a file here and then inserted into any layout using a simple Liquid tag. This makes your code modular and much easier to maintain.

How to use an include

To use an include, you would create a file like _includes/footer.html and then add {% include footer.html %} to your layout file. Jekyll will automatically insert the content of your footer file right there when it builds the site.

_data Separating Content from Code

For more advanced projects, the _data directory is a powerful tool. It's where you store data in YAML, JSON, or CSV files that can be accessed and used anywhere on your site. For example, you could have a file named _data/team.yml containing a list of your team members. You can then use a Liquid loop in a layout to dynamically generate a team page. This is a great way to separate your content from your templates, making it easier to manage data that is reused across your site, such as navigation links, pricing tables, or testimonials.

.
├── _data/
│   ├── navigation.yml
│   └── team.yml
├── _layouts/
│   └── default.html
└── ...

_sass for Advanced Styling

If you're a designer or a developer who loves using a CSS preprocessor, the _sass directory is for you. This folder is where you place your Sass source files. Jekyll has built-in support for Sass, so it will automatically process these files and compile them into a single CSS file. This allows you to write more modular and organized stylesheets using features like variables and mixins, making your design system more robust and easier to manage.


The Final Stage The Static Output

After Jekyll processes all these files and folders, it places the final, static website inside the _site directory. This is the complete, ready-to-publish website that you can deploy to GitHub Pages. It's a key distinction that the _site folder is an output directory, not a source directory. You should never edit any files inside it directly, as it gets completely erased and rebuilt every time you run the build command. To prevent this folder from being committed to your Git repository, it's a critical best practice to add _site/ to your .gitignore file.