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:
➜  blog.example.com > echo "gem \"minimal-mistakes-jekyll\"" >> Gemfile 
➜  blog.example.com > bundle
...
Bundle complete! 13 Gemfile dependencies, 51 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
➜  blog.example.com >
  • Download the default config file and pagniation index file:
➜  blog.example.com > curl -s -O https://raw.githubusercontent.com/mmistakes/minimal-mistakes/master/_config.yml
➜  blog.example.com > curl -s -O https://raw.githubusercontent.com/mmistakes/minimal-mistakes/master/index.html
➜  blog.example.com >
  • Enable the theme:
➜  blog.example.com > perl -p -i -e 's/#\s+theme/theme/' _config.yml
➜  blog.example.com >
  • fix the layouts of Jekyll’s sample post and page:
➜  blog.example.com > perl -p -i -e  's/layout: post//' _posts/2020-05-07-welcome-to-jekyll.markdown
➜  blog.example.com > perl -p -i -e  's/layout: page/layout: single/' about.markdown
➜  blog.example.com >
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:
➜  blog.example.com > mkdir -p assets/css _sass
➜  blog.example.com >
  • Copy default main.css from gem:
➜  blog.example.com > cp ~/gems/gems/minimal-mistakes-jekyll-*/assets/css/main.scss assets/css/
➜  blog.example.com >
  • Add entries for blog and highlight css:
➜  blog.example.com > echo "@import \"blog\";" >> assets/css/main.scss
➜  blog.example.com > echo "@import \"syntaxhighlight\";" >> assets/css/main.scss
➜  blog.example.com >
  • Create empty blog css file:
➜  blog.example.com > touch _sass/blog.scss
➜  blog.example.com >

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:
➜  blog.example.com > rougify style colorful > _sass/syntaxhighlight.scss
➜  blog.example.com > 
  • Restart Jekyll:
> bundle exec jekyll serve --host 127.0.0.1 -l 
Configuration file: /Users/user/blog.example.com/_config.yml
            Source: /Users/user/blog.example.com
       Destination: /Users/user/blog.example.com/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
                    done in 0.399 seconds.
 Auto-regeneration: enabled for '/Users/user/blog.example.com'
LiveReload address: http://127.0.0.1:35729
    Server address: http://127.0.0.1:4000//
  Server running... press ctrl-c to stop.
        LiveReload: Browser connected
Vanilla Minimal Mistakes.