Contents
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
- jekyll homepage: https://jekyllrb.com/docs/structure/
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
You can use the applications that are created by this blog writer
If you have interested, please try to download them for free.
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
