Adding custom styles

Hi, I am trying to add custom styles on top of the Jekyll minima theme. I am new to web development and Jekyll, so please bare with me.

I’ve created a site with the minima theme for my D&D blog, Flanaess Fables. Here is a link to my repo: flanaess-fables

I created a new branch “sass” and tried following the steps in the Jekyll tutorial, but can’t seem to get the styles working (all I added was background-color to the body element). I added a bunch of the theme’s default files to the root directory, pretty much all of them except the default theme’s default _sass and _assets directories.

The CLI keeps telling me that the “/_sass/styles.scss” (which I’ve tried importing into "/assets/css/styles.scss) file cannot be found. I clearly am doing something wrong.

What I am trying to do is create a workflow that allows me to add styles to my site without tampering with the minima theme default styles. Ideally, I’d like to be able to update my new sass file and have it overwrite any elements or classes that are found in the minima theme.

Any help or guidance is much appreciated.


Hi. I’ve gone through customizing minima before.

The confusing thing is that the latest code of Minima on master is what you see on GitHub, but the latest tag was made over a year ago (and also what GH Pages uses). It is 2.5.1.

In particular the structure of the styling pages has moved around.

So make sure to go to the tag via this URL or using the branch/tag switch in the UI.

Then follow those instructions

For reference, I have this demo site built around the jekyll new output and using GH Pages and minima.

I followed the 2.5.1 instructions and ended up with this

Create a file in assets which has scss extension and will get converted to main.css at build time, which is the name the theme expects.

That file imports theme SCSS and has my custom CSS.


If you want to add CSS, add to the bottom as I did.


Mostly CSS is fine for me. If you actually need SCSS for nested syntax or variables then you can use the SCSS approach below. (By the way modern CSS supports variables too without SCSS)

If you want to add SCSS rather, then you need to add to the _sass directory in your repo and import into your main.scss file.

Here is the themes sass directory - you can add a custom.scss file with triple dash frontmatter

then use as @import 'custom.scss or similar on your main.scss file.

Oh and side note regarding your filename and how to improve it so your site follows a standard.




_posts/2021-04-18-Python Data Structures [Chapter 10 Quiz].md








I also abbreviated words to keep it short.

Oh and the date doesn’t matter and it doesn’t need be a blog post, you could put that in another folder rather than posts.

Why it matters

The best URLs use lowercase and no spaces (dash instead). And leave out special characters. You can leave them in but they get encoded which is messy.

That description follows the prevalent style used by websites and that search engines understand best.

Also some browsers show a space character as %20 in the address bar, making the url unreadable, while a dash is always a dash.

Plus, when you copy a URL to send to someone or paste in a doc, a space becomes %20. For example I copied a link to your file on GitHub and it got pasted here as

That is in fact good behavior of the browser. Even though it is messy to read.

Why is it good? Because the URL below would be invalid. Spaces breaks up the URL so clicking on the URL drops the last parts. I’m going to leave this here as a broken URL to demonstrate my point. Data Structures [Chapter 10 Quiz].md

1 Like

don’t i need to put date in front though of the name?

Yes posts require a date in the name. That’s a Jekyll restriction.

e.g. _posts/

It builds as _site/2021/04/18/py-data-structures....html

A page outside of _posts dir doesn’t need date in the name.
But you can always add date as frontmatter for a page.

Thanks for the thoughtful responses! I decided to start with a fresh build from scratch instead of trying to wrestle w minima. I have a much better understanding and appreciation for the framework and components after following the step-by-step, which i really enjoyed.

As a new web developer I thought it would be a healthy exercise to start from a blank html file. I stuck w sass as an opportunity to learn it, albeit probably not necessary.

Here is a screenshot of what I got goin. Barebones for now but making progress!

1 Like