Directory Structure

2019-05-23

jekyll basically has a direcotry structure. Let's use the directory structure for managing the blog.

jekyll directory structure

In addition to introduce jekyll’s basic directory structure, we’re introducing our theme directory structure which we use.(Clean Blog theme) If you want to know how to set a theme, check the previous blog post Theme settings.

Directory structure

  • jekyll homepage provides a nice introduction of the basic directory structure.
  • jekyll homepage: https://jekyllrb.com/docs/structure/
  • here is introduced the basic structure and our structure in here.

Basc directory structure

|-- _config.yml
|-- _data
|   |-- members.yml
|-- _drafts
|   |-- begin-with-the-crazy-ideas.md
|   |-- on-simplicity-in-technology.md
|-- _includes
|   |-- footer.html
|   |-- header.html
|-- _layouts
|   |-- default.html
|   |-- post.html
|-- _posts
|   |-- 2007-10-29-why-every-programmer-should-play-nethack.md
|   |-- 2009-04-26-barcamp-boston-4-roundup.md
|-- _sass
|   |-- _base.scss
|   |-- _layout.scss
|-- _site
|-- .jekyll-metadata
|-- index.html
file/folder description
_config.yml This is a basic setting file for configuring jekyll blog.
if you want to know more details, check jekyll configuration.
_data This is a folder to store data.
you can use .yml, .yaml, .json, .csv or .tsv files for data storage.
we don’t use this folder.
We also save and load asynchronously json of blog list which show up the bottom of our blog, but we don’t store json here for management reasons.
_drafts Here is to save blog posts which is not published.
Actually, We manage unpublished blog posts and published posts on github page seperately so we don’t use this.
If you want to know how to use github we integrate, see github integration
_includes jekyll also has functions to make common components and include it like pug. This is where you save the files to include when use the feature({% include filename %}).(ex> footer.html / header.html)
We store page-level common elements in _includes folder and save blog-post-level components in another folder under blog post folder for managing them. And we use {% include_relative folder/filename %} feature for including them.(ex> code.md / link.md)
_layouts This folder is for templates. (ex> default.html / folder.html)
_posts Blog posts will be saved here. The file will be saved with YEAR-MONTH-DAY-title.md name and managed.
We use multi-languages feature so we make a folder under this folder and manage it.
If you want to konw how to make multi-languages blog, check Multi-languages plugin.
_sass sass files for design will be saved here.
_site jekyll builds files is saved here.
We upload this folder to github for publishing.(reference: github integration)
.jekyll-metadata jekyll manages this file for building only changes. Recommend to add this file to .gitignore.
index.html This file will be Top page.
other
files/folders
Other files and folders not mentioned above will be copied to _site when jekyll builds. If you don’t want jekyll copy them, you should write list to exclude: in _config.yml. (reference: jekyll configuration)

The files mentioned above(.html/.md) can be replaced each other. In other words, index.html can be index.md and YEAR-MONTH-DAY-title.md also can be YEAR-MONTH-DAY-title.html.

Our directory structure

We use multi-languages plugin, pagination and so on. Therefore, our directory structure is slightly different from basic directory structure. actually not different, just have a structure for management.

|-- _config.yml
|-- _includes
|   |-- footer.html
|   |-- header.html
|-- _layouts
|   |-- default.html
|   |-- post.html
|-- _posts
|   |-- jekyll
|   |   |-- 2018-09-10-directory-structure
|   |   |   |-- common
|   |   |   |-- 2018-09-10-index-en.md
|   |   |   |-- 2018-09-10-index-ja.md
|   |   |   |-- 2018-09-10-index-ko.md
|-- _sass
|   |-- _base.scss
|   |-- _layout.scss
|-- _site
|-- categories
|   |-- jekyll
|   |   |-- json
|   |   |   |-- index-en.md
|   |   |   |-- index-ja.md
|   |   |   |-- index-ko.md
|   |   |-- index-en.md
|   |   |-- index-ja.md
|   |   |-- index-ko.md
|-- contact
|   |-- index-en.md
|   |-- index-ja.md
|   |-- index-ko.md
|-- home
|   |-- index-en.md
|   |-- index-ja.md
|   |-- index-ko.md
|-- 404.md
|-- sitemap.xml
file/folder description
_config.yml same with basic directory structure.
_includes we save page-level common components to _includes folder. (ex> footer.html, head.html, navbar.html)
_layouts Template files from theme we use are saved.
If you wonder theme we use, see the previous blog post(Theme settings).
_posts our _posts folder has folders by categories.
Folders by categories have folders by posts.
Folders by posts have files support multi-languages and also have a common folder stores common elements of multi-languages. We save common components not related on multi-languages like source code, directory structure mentioned above to common folder.(reference: Multi-languages plugin)
_sass same with basic directory structure.
_site same with basic directory structure.
categories we use this folder for managing blog posts by categories ans show post list by categoreis. At the beginning, we created category pages in _posts but jekyll recognized category pages in _posts to posts that we don’t want so now we manage seperate file.
we also make a folder named json under the category folders to create json data for posts list on the end of this page.
contact This folder is for Contact page folder that supports multi-languages.
home This folder is for Top page folder that supports multi-languages.
404.md we can’t make 404 page to support multi-languages, so we create and manage this one file.(It may be that we don’t know how to set it up.)
sitemap.xml This file creates sitemap.xml file for Search Engine. see more detail SEO.

Summary

Above post is a brief description about the directory structure what we use. we have this structure because of theme, plugins, SEO and so on. If you want to know more details of reasons, please check out posts about that.

Reference

Buy me a coffeeBuy me a coffee
Posts