This Week I Learned 1: Jekyll Basics

I’ll be doing weekly posts to recap the things I have learnt so far. It doesn’t always have to be coding / technical related posts, just things I have found to be interesting / helpful!

Jekyll

As a new user to Jekyll and Ruby, here’s a recap of what I learnt:

1. _drafts: store drafts (wow) without becoming posts.

To see them on your local site though, run

bundle exec jekyll serve --drafts

Resource: Youtube playlist

2. Changing the layout of the home (index) page

Currently using the Minimal Mistakes theme. I wanted the home page to be a posts with the years categorized.

1. Change the index.html file to index.md
   There should be no issues here; the index file has the same header layout as other md files
2. Change the content of index.md to suit your needs.
   In my case, it went from:

   ---
   layout: home
   author_profile: true
   ---
   

   to:

   ---
   title: "Posts By Year"
   layout: posts # this is the main change to make!
   author_profile: true
   ---
   

3. Embed pdf into jekyll pages

Wanted to post a pdf that people can view. Here’s a method that shows pdf files from your Google Drive!

1. Go to your file and select Get Link
   

2. Copy the link and edit it like this

   old_link = https://drive.google.com/file/d/<filename>/view?usp=sharing
   # remove the view, change to preview
   new_link = https://drive.google.com/file/d/<filename>/preview
   

4. Some important keywords

1. “Wide” posts. Used in my titanic practice page!

   ---
   layout: posts
   title: My Titanic Practice
   permalink: /titanic
   classes: wide  # this is the important change
   ---
   

2. Show your author profile sidebar on a page

   ...
   author_profile: true
   ...
   

3. To get the search button on Minimal Mistakes Theme, go to your config.yml

   search: true # true, false (default)
   

5. Convert Jupyter Notebooks to Jekyll posts

This used to be very difficult and tedious. Luckily, someone came up with a library to solve it :). Introducing: jekyllnb! A quick guide / reminder:

1. install it

   python -m pip install jekyllnb
   

2. To use it on an existing notebook
   Use cmd in the location of the notebook

   python -m jupyter jekyllnb --site-dir docs --page-dir _posts --image-dir assets/images my_notebook.ipynb
   

   • All your new files will be stored in the docs folder.
   • The docs\_posts folder will contain your notebook converted to .md file
   • The docs\assets\images\my_notebook folder will contain all the images that are used in your notebook.
   • For a more comprehensive guide: read the docs

6. Other useful links

1. Get emojis on jekyll!
   • How to install
   • Emoji Cheatsheet
   • You can also look at my github page if the guide to install was unclear!