A Step-by-Step Guide to Building Your Own Website Using Jekyll — II

Part I available here.

We’ll look at what happens when we build a website using Jekyll, what the folder structure of Jekyll is, and finally, how to take full control of your website

Understanding what Jekyll does (in a nutshell)

Whenever you run bundle exec jekyll serve, what happens is:

• Jekyll generates the corresponding .html files from the .md files.
• It generates the corresponding .css files from the .scss files (these are located in the _sass folder).
• It also resolves all the parameters (like {post.title},{relative_url}), accordingly rendering them.

Directory Structure of Jekyll

The official website describing the Jekyll directory structure can be found here. I’ll be discussing only the most relevant of them:

Directory structure of Jekyll

index.html (index.md)

This is the default page that will open up when someone visits your site.

_sass

Contains all the scss files (which are later converted to css files by Jekyll)

_layouts

Contains the different layouts. Suppose that you want your home page to have a different layout, and your posts to have a different layout. What you can do is create a post.html (or any .html, the name does not matter). Then while writing a new post, use this at the top of the .md file:

---
layout: post
---

Or, more specifically, if you created a mylayout.html in _layouts, and wanted to use that, just change layout: post to layout: mylayout.

_posts

This folder contains all your blogs. Please note that the name of the post should be in the format: YYYY-MM-DD-title_of_post.md.

_config.yml

This specifies most of the configuration data, like title, description, show_downloads, etc. (try changing show_downloads: true to show_downloads: false, and see what changes happen in the homepage).

_site

All the files generated by Jekyll are placed in this folder. This is the one which is used to render the website.

assets

Suppose you want to use some custom css or javascript files. Where to store them? Turns out, assets is the folder for that. Jekyll keeps this folder as it is in the _site folder. This folder is best used for storing images, fonts, custom css and js files.

Taking Full Control of Your Website

Once you are comfortable with the previous two topics (understanding Jekyll and its directory structure), you’re good to go customizing your website according to your requirements.

To change the default layout, play around with _layouts/default.html. To add a new div, create it in default.html, and change the style of the div either in assets/style.css, or in _sass/jekyll_theme_whatever_theme_you_use.scss, or create new customstyle.css in assets folder.

You’ll see the following line in your _layout/default.html :

<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">

relative_url is useful so that you can add relative links of your pages, and Jekyll will be able to build it both locally and on github-pages.

You can add any css or js files to the assets folder, and accordingly link them to your default.html or any post.md that you like.

Hands on Experimenting — An example

In this example, I’ll add a div called lefter (header: head :: lefter: left :p ). This is how my website is presently:

The current view of my website

Add the following to the default.html:

<div id="lefter">
      <h1 class="project-title">{{ site.title }}</h1>
      <h2 class="project-description">{{ site.description }}</h2>
</div>

Add the following to assets/style.scss:

#lefter{
 background-color: #171717;
 top: 0px;
 left: 0px;
 position: absolute;
 width: 200px;
 height: 100%;
 z-index: 200;
.project-title{
  background-color: white;
 }
 h1{
  color: red;
 }
 .project-description{
  background-color: white;
 }
 h2{
  color: red;
 }
}

Now, the website appears as follows:

See the `lefter` on the left side :p

You can similarly add js files to the assets, and add references to them in your html/md file.

That’s it. You have your personal website, with full control. Hardly takes a couple of days to setup. And once setup, all you need to focus on is blogs and their content. No more worrying about the layout.

Happy Blogging.