Adding custom styles

[apacher0se]

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.

Thanks,
Adam

[MichaelCurrin]

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.

jekyll/minima

Then follow those instructions

[MichaelCurrin]

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.

MichaelCurrin/jekyll-blog-demo/blob/master/assets/main.scss

That file imports theme SCSS and has my custom CSS.

CSS

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

SCSS

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

jekyll/minima

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

[MichaelCurrin]

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

Recommendation

Current

Filename

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

URL

/2021/04/18/Python%20Data%20Structures%20%5BChapter%2010%20Quiz%5D.md

Suggested

Filename

_posts/2021-04-18-py-data-structures-chp-10-quiz.md

URL

/2021/04/18/py-data-structures-chp-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

https://github.com/rpshbhandari/rpshbhandari.github.io/blob/main/_posts/2021-04-18-Python%20Data%20Structures%20%5BChapter%2010%20Quiz%5D.md

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.

https://github.com/rpshbhandari/rpshbhandari.github.io/blob/main/_posts/2021-04-18-Python Data Structures [Chapter 10 Quiz].md

[rpshbhandari]

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

[MichaelCurrin]

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

e.g. _posts/2021-04-18-py-data-structures...md

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.

[apacher0se]

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!