Jekyll and Minimal Mistakes for Github Pages

2 minute read

Create your own personal blog with Jekyll and Minimal Mistakes theme in some simple steps.

Generate the repo

Click here to generate a repo which is readily set up for Jekyll and Minimal Mistakes theme.
Name your repo as <your_github_username>.github.io

Development in a local machine

Clone your repo to a folder
Uninstall the default Ruby version in your PC

Install Ruby gems with rbenv (ref)

Note: Try to not go for a too new version if you do not needed (Jekyll is not compatible with Ruby 3 so 2.7.2 is appropriate). (Error: no implicit conversion of Hash into Integer (TypeError))

 cd
 git clone https://github.com/rbenv/rbenv.git ~/.rbenv
 echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
 echo 'eval "$(rbenv init -)"' >> ~/.bashrc
 exec $SHELL

 git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
 echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
 exec $SHELL

 rbenv install 2.7.2
 rbenv global 2.7.2
 ruby -v

Install Jekyll and Bundler
```
 gem install jekyll bundler
```

Launch your site

 cd /path/to/your/repo

 # install all required package
 bundle install

 # launch
 bundler exec jekyll serve

Now you could modify your site according to guides from Minimal Mistakes.

Modify a layout

Minimal Mistakes gives you many layouts. They are hide in its gem library for recent versions. If there is something you would like to change in the layout. First, check it in the defaults configs of _config.yaml file.

If you cannot change it there, following below steps:

Create a _layouts folder in the root of your repo
```
 mkdir _layouts
```
To get the default layouts of the theme, you first need to let the bundle download and install it in your machine. Adding bellow lines to the Gemfile in your repo and remove it later. Push it to your remote could create error for the Github Pages since it supports a very limit number of plugins.
```
 gem "minimal-mistakes-jekyll"
```
Let bundle install the theme in your local by running
```
 bundle
```
Get the path to the theme layouts
```
 bundle info minimal-mistakes-jekyll
```
You could find the _layouts folder in the path (e.g. /home/biendltb/.rbenv/versions/2.7.2/lib/ruby/gems/2.7.0/gems/minimal-mistakes-jekyll-4.21.0/_layouts/).

Copy the layout file that you want to modify to the _layouts folder in your repo. Modify it and push to the remote.

Reduce the font size (not recommended)

The default font size of the post might look slightly big in your PC but it’s there for it purpose. It is set for 80 characters per line so that would be suitable when reading on phone.

If you still insists on changing it, you could follow the steps as below:

Create a css file to override the main.scss file

   mkdir -p /assets/css

   vi /assets/css/main.scss

Paste the content as below:

 --- 
 # Only the main Sass file needs front matter (the dashes are enough) 
 --- 

 @charset "utf-8";

 @import "minimal-mistakes/skins/dark"; //skin
 @import "minimal-mistakes"; // main partials

 html {
     font-size: 12px; // originally 16px
     @include breakpoint($medium) {
         font-size: 14px; // originally 18px
     }

     @include breakpoint($large) {
         font-size: 16px; // originally 20px
     }

     @include breakpoint($x-large) {
         font-size: 18px; // originally 22px
     }
 }

Note: If there is no effect after the change, try to clear your browser cache or test it in a different browser.

Reference: link

Generate the repo

Development in a local machine

Modify a layout

Reduce the font size (not recommended)

Comments