Skip to main content
HashnodeCoding With Logan

Command Palette

Search for a command to run...

Understanding Jekyll Theme Basics

Updated
•4 min read
L
Logan Rasmussen

A quick summary of what I went over last time. We ran through a very fast tutorial of setting up a jekyll website on GitHub Pages in about 10m or so. Now, maybe like me, you have that urge to start customizing it at least a little. Bare minimum, I like to at least tweak the website to have colors of my choosing.

This post will give you the very basics of creating small customizations that will help you make the site feel more like yours, and less like the trailblazers before you. After all, you probably want to stand out at least a little from the crowd right... right?!

This post is just scratching the surface of themes, and I'm stil learning as I go, as I find the need. For more info on themes see jekyll's website :D.

 

Styles & Colors

In order to change the colors and styles of a selected theme, you need to discover how a style is being applied in the theme itself. Once you know how that is being applied, you create a style of your own with that same selector to override the style.

The best way to discover how to override a style is to check out the theme's README, and search through the sourcecode. I've noticed, for example, the Cayman Theme gives a very helpful and short explanation of how to change styles right on the README.

(hallelujah for good documentation! Imagine if documentation wasn't written well, or written at all... I'm getting side-tracked, let's move on...)

The instructions go something like this... See the Cayman GitHub README, and checkout the Stylesheet section for better specifics.

  1. Create a file called /assets/css/style.scss in your site with this content

     ---
 ---

 @import "{% raw %}{{ site.theme }}{% endraw %}";
  2. To add your own style, just insert some sweet CSS after the import of the theme.

Essentially, you are applying your CSS after the theme, so that your styles win

Note from the README: If you'd like to change the theme's Sass variables, you must set new values before the @import line in your stylesheet.

That's about it for styles. Recap, check the theme's README, and create your sweet sweet style.

 

Layouts

Theme's have a folder called _layouts. This is a special little place for you to place any HTML templates that you want to reuse in the pages you build.

Common layouts are

  • default - used as a shell for the site. It imports stylesheets and it contains the <html> and <body> tags,sets up the navigation, and other general site setup.
  • post - used as a shell for all posts, and it commonly uses the default layout

Here's the basic idea of how to create and use layouts

  1. Create a file in _layouts. For this example let's create /_layouts/foo.html
  2. In that HTML file, place the content variable where you want the child page to be inserted. Let's create an incredible layout that adds a Foo paragraph above our page, cuz we really like foo. (also, we'll have it use the default layout as a base as well)
     ---
 layout: default
 ---
 <p>Some Foo for your</p>
 {% raw %}{{ content }}{% endraw %}
  3. Create a new /bar.html file that uses the new layout by adding a snippet with something similar to this
     ---
 layout: foo
 ---
 <p>Bar</p>
  4. Now, what you should see when you visit /bar.html on your site is the two paragraphs, and the default layout around those two paragraphs.
     <p>Some Foo for your</p>
 <p>Bar</p>

Give it a shot and see what you can come up with for layout uses. I feel like it's a really neat feature, and it feels great to not duplicate code for each page.

Layouts are a great way to create reusable HTML for your site, especially for things like posts, which is what I've used in this site. I'm sure there will be more to come later.

 

Some Other Tips

If you are enjoying jekyll in my posts, I would recommend doing the Step By Step Guide, it is what I used to really get going with jekyll.

 

Next Up

I want to add categories and tags to my site, but I still have to figure out what options I have in jekyll to do something like that. As I have been blogging for a few weeks now, I've had a few other blog post ideas that are on totally different topics, like how I used git to find a culprit commit that caused a test failure. Or how I use rem and em to scale my font to different screen sizes

There are so many cool things to learn and blog about... It's time to get organized, and share the fun bits I've experienced!

See you next time.

#jekyll

More from this blog

C

Coding With Logan

29 posts