While building my portfolio website, where you are seeing this blog, and me not knowing much about html/css, it was difficult to create a website from scratch. After looking at other options like wix, wordpress and zoho, I knew that was not the way to go. One day I stumbled upon a website created by an alumni of my college and was fascinated by its design and simplicity. I was actually looking at a website built using Minimal Mistakes theme and Jekyll, so there started my quest to build one for myself.

Setting up Jekyll

This tutorial will contain installing Jekyll in ubuntu, for windows click here.

Jekyll runs on Ruby. So we need to install Ruby and other prerequisites:

sudo apt-get install ruby-full build-essential zlib1g-dev

Don’t install RubyGems packages as root, instead setup a gem installation directory for your user account.

echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

Finally install Jekyll and Blunder (wrapper used for tracking and installing gems):

gem install jekyll bundler

This completes the setup part of Jekyll.

Understanding components of a Jekyll theme

Jekyll comes with a default theme called Minima. To create a new Jekyll site called myblog, run the below command:

jekyll new myblog

This initializes an empty jekyll website and installs the default theme minima, with following files:

myblog:
  - _posts # Directory which stores all the posts
  - _config.yml # Configuration file for the Jekyll site
  - 404.html # 404 error page
  - about.markdown # An about page for the Jekyll site
  - Gemfile # Contains the list of gem files (packages) which will be used in the Jekyll site
  - Gemfile.lock # Contains exact version of gem files installed by blunder
  - .gitignore # No, it doesn't initialize a git repository. It is added and I don't know why.

If you are planning to eventually move your code to github, then don’t initialize a local git repository, instead create an empty repository in github and clone it in local. Then run jekyll new . inside the repository to create a new Jekyll site.

To start your Jekyll site, run jekyll serve, which will start the server on default port(4000). You can access the site at http://localhost:4000/

What you are seeing is a basic site with a homepage with a list of posts, and an about page. You can edit the values in _config.yml to play around. To add a new post, create a new file under _posts directory with %Y-%m-%d-<title>.md naming format and add text into it.

Front Matter is the top most part of any .md file, which contains properties of that page/post. You can read more about it here.

When you run jekyll serve, Jekyll builds anc creates your wesbite html files inder _sites folder in the root directory. This is the source for hosting your website, with root file index.html. One can host their website in Github Pages, or in any other hosting services like netlify, herokuapp, vercel in free tier or azure, aws, gcp, oracle cloud, ibm cloud in paid tier.

To explore more about the theme being used in this blog, checkout Minimal Mistakes.

To see how to host your Jekyll site using Github Pages checkout this : Hosting in Github Pages.

To see how to customize themes checkout this : [Placeholder for editing a theme]