How to work with Jekyll?

Now that we understand why Jekyll could be a good option I can explain how I achieve it.

Jekyll’s installation and configuration

I will not repeat the installation as is pretty straigh forward and you can find more information in the official site, for instructions you can check the guide and you can check my site’s complete code in GitHub.

Directory Structure

I prefer to separate the code from configuration and result so I moved the configuration file _config.yml to the root directory and the code source to /src and the destination to /build, this way I can have my code better organized.

For this to actually be considered by Jekyll I had to mofify the _config.yml in the following way:

source:       ./src
destination:  ./build
layouts:      ./_layouts
plugins:      ./src/_plugins

Now I ended up with the code structured as follows:

/
|- _layout.yaml
|- /src
|  |- .htaccess
|  |- index.html
|  |- robots.txt
|  |- humans.txt
|  |- 404error.html
|  |- rss.xml
|  |- sitemap.xml
|  |- /_assets
|  |  |- /css
|  |  |- /js
|  |- /_data
|  |- /_drafts
|  |- /_posts
|  |- /_layouts
|  |- /_includes
|  |- /_components
|  |- /_locales
|  |- /_plugins
|  |- /images
|  |- /es
|  |  |- index.html
|  |  |- rss.xml
|  |  |- /_drafts
|  |  |- /_posts
|- /build

Nota: Some of these files and directories will be explained later in the series.

Benefits of this structure:

• The configuration remains in the root directory next to that I need and I don’t want to be exported to the destination.
• All the code remains in a directory /src and the generated files in a directory /build.
• Inside the directory of each additional language different than the default I have a directory for posts and drafts (later I’ll explain how to work with multiple languages).
• The JavaScript and CSS files will be preprocessed for SASS, concated, minified and compressed, (later I’ll explain how to achive this).
• The components are separated from the site, for example the Foundation files.

Soon the next part of this series for more details.