Customize Personal Website with Minimal Mistakes Jekyll Theme - v1.0

This site is built with one of the popular Jekyll themes - minimal-mistakes. Thanks to Michael Rose and all the other contributors for making and incremental improving this amazing theme which is well-structured not only in code but also in the look of the site. Also, they provide clear and adequate instructions on customizing the theme according to the theme’s parameters and layout, such as this configuration page.

In this post, I manage to write down the changes I have made to this site at the tag v1.0 of my github repo. Some might be mentioned in minimal-mistakes’ instructions while some are not. If you consider to customize your website through minimal-mistakes, hope some tips in this article might help.

Environment
Theme Base: Minimal Mistakes - 18e8966
Ruby: 3.0.6
Jekyll: 4.3.2

Test Page
Website Style Test Post

Added

1. Use Your Own Favicon

The very first step, upload your image to Favicon generator. The generator will display how the logo looks like on different platforms. Scroll to the bottom of the page, and click button Generate your Favicons and HTML code.

Then download Favicon package and copy the HTML code.

Follow the steps listed in the above graph, extract the package under the root folder (the same layer as _config.yml), and paste the HTML code in the _includes/head/custom.html.

Finally, run the local server and check if the icon showed on the tab.

2. Create New Skin

• Create a new scss skin file under _sass/minimal-mistakes/skins/
• Modify the variable minimal_mistakes_skin in _config.yml
• Use the Test Page to check the display while teaking the skin file.

Note: For your information, I fine-tune my new skin color based on _dirt.scss.

3. Add New Social-Link Icon

What if I want to provide a new social-share link in author side bar that the minimal-mistakes didn’t provide? I’ll take Kaggle as an example here.

First, find the brand icon, I use W3 schools. Then add icon setting into _utilities.scss and _config.yml respectively.

.fa-kaggle {
    color: $kaggle-color;
  }

- label: "Kaggle"
  icon: "fab fa-fw fa-kaggle"
  url: "https://www.kaggle.com/elainechen7366"

Last, add color setting of the brand icon into _variables.scss

$kaggle-color: #5bb2ff !default;

Changed

1. Customize Typography

I have to admit that I devoted a significant amount of time on this part since I want to ensure I have a good reading experience on my site. Typography plays the most important role in this. The typography not only affects the reading experience, but also shows the style of a website. The default setting of the theme is generally suitable for most scenarios, but I hope to give a new look to my site. For example, I really love the style of Michael’s personal website, creator of minimal-mistakes. So, from my perspective, the design principle of minimal-mistakes is to construct a theme that offers comprehensive functionality for websites while purposefully maintaining a neutral style. This approach provides users with abundant possibilities to craft a website according to their unique style.

Although choosing suitable fonts to my site is time-consuming, the steps to update a font are quite simple. We will use Google Fonts API to add fonts to our website. The script is

<link href='https://fonts.googleapis.com/css?family=Font+Name' 
      rel='stylesheet' type='text/css'>

The first step is to choose fonts here, and replace Font+Name in the link above with the font name you choose. For example

<!-- ex: choose the font named "Abel" -->
<link href='https://fonts.googleapis.com/css?family=Abel' 
      rel='stylesheet' type='text/css'>

And then add the above script into _includes/head/custom.html.

Finally, insert the font name in the system typefaces block in _variables.scss presented as follows

$sans-serif: -apple-system, BlinkMacSystemFont, "Abel", "Roboto", "Segoe UI",
  "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;

Note: You can also use Google Fonts to pick your favoriate font family. It provides font categories filter.

2. Modify Bio Font Format

In _sidebar.scss, add font-size and font-style settings.

.author__bio {
  margin: 0;
  font-size: 0.9em;
  font-style: italic;

  @include breakpoint($large) {
    margin-top: 10px;
    margin-bottom: 20px;
  }
}

3. Thin Navigation Hover

If you want to make the underline thinner when hovering the navigation titles, you can try the following step:
Find .visible-links {} in file _navigation.scss, and modify the syntax height in the hover label which represents the thickness of the underline while hovering on titles.

Others

I also made some other changes like

• Modify font size and font family on different blocks
• Modify previous/next button appearance

For the two modifications above, as they are still under deployment, I’ll save explanation for the next article of this series. I know there will be a series of updates, since I am not satisfied with the appearance of the site yet. There are a lot of interesting tasks for me to explore!