Tutorial on creating a website using Jekyll+Github Pages
I built this website (code available on my github) using Jekyll. Since I know it can seem daunting to get into building custom websites, I’ll outline the steps I took.
Step 1: Create a ‘Github Pages’ repository to host your website:
I choose to host my website using github pages. To set this up, I followed the instructions here, specifically for the ‘User or organization site’.
Step 2: Populate repository with Jekyll site:
There are many ways to create your website, all of which can be hosted by Github Pages. In the past, I directly coded HTML code to create my website. However, I eventually found this hard to edit and update as my website content evolved. Thus, to more easily update my website, I switched to using Jekyll. The main benefit of Jekyll is that it hides most of the HTML code in the backend, allowing you to focus on the actual content of your website. It is also easily customized and has many already developed layouts.
To get started with Jekyll, follow the quickstart guide here.
What I actually did (on Ubuntu 18.04 and using ‘Minimal-Mistakes’ Jekyll theme):
Inside of my Github repository, I did the following to setup my website:
- Install Ruby:
sudo apt-get install ruby-full build-essential
- Install RubyGems
sudo gem update --system ruby setup.rb --help
- Install GCC and Make
sudo apt update sudo apt install build-essential gcc --version make -version
- Install Jekyll
sudo apt-get install ruby-full build-essential zlib1g-dev echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc source ~/.bashrc gem install jekyll bundler
Download minimal mistakes and place the contents of the website into your Github repository. Other Jekyll themes are available here.
- Remove the unnecessary components of the Minimal Mistakes contents by removing the following folders and files:
- Install Jekyll paginate for minimal mistakes:
gem install jekyll-paginate
- Replace the contents of the Gemfile with:
source "https://rubygems.org" gem "jekyll" gem "minimal-mistakes-jekyll"
- Fetch and update bundled gems
- Build the website:
Step 3: Preview website:
You can preview by the website by running:
and then visiting http://127.0.0.1:4000
As you edit the contents of the website, you will be able to view the live changes by simply refreshing http://127.0.0.1:4000