Structure of My Site
Each Jekyll project follows the same structure which makes it easy to review and modify. I want to share the structure of the first version of my site.
If you are interested in some feature from this site, the post will help you to locate the right place in the project. This might be useful if you are planning to implement a site with Jekyll.
I assume that you already have got some basic understanding of Jekyll’s project structure.
_data folder contains
menu.yml file that describes the items to show in the top menu.
_includes folder contains pages’ parts and reusable components:
footer.htmlcontain HTML code for header and footer.
menu.htmlrenders the top menu. It uses
menu.ymlfile from the _data folder as the data source.
posts-list.htmlrenders the list of recent posts on the home and blog pages.
_layouts folder contains the layouts used on the site:
default.htmlis the base layout used by all pages.
home.htmlis the layout used by the home page.
page.htmllayout is used by pages.
post.htmlis a layout for blog posts.
_posts folder contains blog posts.
_sass folder contains all the site’s styles separated into multiple files. All this files got imported by the
main.css file from the css folder. This way the end up in the final site.
animations.scssprovides animations for the site.
blog.scssstyles used on the blog pages.
breakpoints.scssdefines breakpoints for the site to be used in media queries.
layout.scssdefines styles for layouts.
menu.scssstyles for the top menu used by
posts-list.scssstyles for the list of posts used by
typography.scssdefines fonts, colors, and other settings for site text, headers, titles.
assets folder contains images used on the site.
css folder contains the
main.scss file that imports all the rest of style files.
In the root folder there is a
_config.yml config file and files for main pages of the site.
That’s is for the structure of the first version. I expect it to grow with time, but for now it’s quite compact and easy to read.