From console to blog: Minimal Mistakes

Following on from yesterday’s post on installing Jekyll, I will now go through the process of installing and customising the Minimal Mistakes theme.

Installing Minimal Mistakes

  • install the gem:
➜ > echo "gem \"minimal-mistakes-jekyll\"" >> Gemfile 
➜ > bundle
Bundle complete! 13 Gemfile dependencies, 51 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
➜ >
  • Download the default config file and pagniation index file:
➜ > curl -s -O
➜ > curl -s -O
➜ >
  • Enable the theme:
➜ > perl -p -i -e 's/#\s+theme/theme/' _config.yml
➜ >
  • fix the layouts of Jekyll’s sample post and page:
➜ > perl -p -i -e  's/layout: post//' _posts/2020-05-07-welcome-to-jekyll.markdown
➜ > perl -p -i -e  's/layout: page/layout: single/' about.markdown
➜ >
Vanilla Minimal Mistakes.

Configuring Minimal Mistakes

Configuration is in _config.yml and is rather self-explanatory and its official documentation is good.

Basic design tweaks

Most of us will want to make CSS basic design changes to minimal mistakes and/or the chosen theme.

  • Create folders for local css files:
➜ > mkdir -p assets/css _sass
➜ >
  • Copy default main.css from gem:
➜ > cp ~/gems/gems/minimal-mistakes-jekyll-*/assets/css/main.scss assets/css/
➜ >
  • Add entries for blog and highlight css:
➜ > echo "@import \"blog\";" >> assets/css/main.scss
➜ > echo "@import \"syntaxhighlight\";" >> assets/css/main.scss
➜ >
  • Create empty blog css file:
➜ > touch _sass/blog.scss
➜ >

Override CSS can now be added to _sass/blog.scss which will be importe dby main.scss

  • Generate css file for the code syntax highlighter, Rougify:
➜ > rougify style colorful > _sass/syntaxhighlight.scss
➜ > 
  • Restart Jekyll:
> bundle exec jekyll serve --host -l 
Configuration file: /Users/user/
            Source: /Users/user/
       Destination: /Users/user/
 Incremental build: disabled. Enable with --incremental
       Jekyll Feed: Generating feed for posts
                    done in 0.399 seconds.
 Auto-regeneration: enabled for '/Users/user/'
LiveReload address:
    Server address:
  Server running... press ctrl-c to stop.
        LiveReload: Browser connected
Vanilla Minimal Mistakes.