Developing a minimum responsive blog with Jekyll/Chirpy theme

Motivation

I simply wanted to have my ‘own’ blog where I write my notes, ideas, and researches. I have looked at several blog services, and all have pros and cons - easy to set up but limited view or you have to see some ads. I come to realize that the combination of Jekyll, Github Pages, Ubuntu, and Chirpy theme would be a great platform to quickly set up a blog site and customize it in the future.

Let’s set up.

Set up a Ubuntu

We will set up a linux server to work with Jekyll and relevant tools. Pick up one distribution and install it. I have just downloaded the latest Ubuntu and installed it via VMWare Workstation Pro 17 on Windows 11 OS. We can do with Windows only, but we have to enable WSL. I skipped the direct deployment to Windows OS this time because I worried about the performance and any future conflict with VMWare due to nested virtualization.

Install Prerequisite

After installing the Ubuntu, login to Ubuntu and install all dependencies to start configuring. We need a ruby and set the environmental variables to install RubyGems packages (called gem(s)). Ruby Gem is open source libraries that contain Ruby code and are packaged. We use it to install all packages for the rest of the configuration.

# Install some dependencies 
sudo apt update
sudo apt install gcc build-essential ruby ruby-full zlib1g-dev

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

Install Jekyll and Bundler

Let’s install Jekyll and bundler.

gem install jekyll bundler

# Check versions
Jekyll -v
bundler -v

Prepare your Github Pages

Once we install jekyll and bundler, we will need to create a github repo for Github Pages. For more information on Github Pages, visit the https://pages.github.com/. Simpley what we need to do is:

• Sign in to your Github and fork the Chirpy theme.
• Then rename it to USERNAME.github.io (USERNAME means your username).

If you are not sure, please take a look at this site and choose a Github fork method. There are two methods of configuring Chirpy theme and I chose the forked one because I wanted to customize it in the future. If you want to focus on just writing, you could do Chirpy Starter method.

Install Node.js

To set up the jeklly and chirpy theme, install the node.js from the office site.

# Download and import the Nodesource GPG key
sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

# Create deb repository
NODE_MAJOR=20
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

# Run Update and Install
sudo apt-get update
sudo apt-get install nodejs -y

Clone your repository from your github site

It is time to clone the fored chirpy theme repo to your local machine (Ubuntu). And also set up a user.email and user.name via git config command.

# Clone the repository
git clone https://github.com/<yourname>/<yourname>.github.io

# Configure your email and username 
git config --global user.email "<yourname>@email.email"
git config --global user.name "<yourname>"

Initiate the configuraiton on Github-related files

Go to the root directory that you just cloned, and type the following commands.

# Start initiating the configuraiton
cd <yourname>.github.io
bash tools/init

# Install some dependencies to run some jekyll commands later 
bundle

Start a local server

Now we are ready to see a default page with Chirpy theme on local host.

# Start a local servier and you can access to 127.0.0.1:4000 
bundle exec jekyll s

You should see a default blog page with a default chirpy theme enabled.

Install your editor (Optional)

I have installed Visual Studio code for markdown.

# Set up a GPG key and repository
sudo apt-get install wget gpg
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg
sudo sh -c 'echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
rm -f packages.microsoft.gpg

# Install some dependencies and vs code
sudo apt install apt-transport-https
sudo apt update
sudo apt install code # or code-insiders

Configure _config.yml

Update _config.yml under the root directory of local repo based on your profile. I would highly recommend to googling public Chirpy-theme based sites and see how others have updated. Because all of the Github page repos are public site, we can see directly the blob pages and the backend repos that includes _config.yml. You can see mine as well.

Write a post

Now and finally we come to the stage where we can write a blog post. It is better to use Jeklly-Compose component. So I followed the instructuion from the site, and installed it and started writing a blog. A new post will be stored under _posts folder.

# Add this line to your application's Gemfile under your local repo
echo "gem 'jekyll-compose', group: [:jekyll_plugins]" >> Gemfile 

# Run the bundle to update the Jeklly setup and components
bundle

# Create a new post
bundle exec jekyll post "Jekyll-Chirpy-Ubuntu-Github" --timestamp-format "%Y-%m-%d %H:%M:%S %z" 

# Open up vscode and start editing
code

Push it to the Github site

Last in last out, we will push all contents to the Github repo. I have configured the GitHub Actions to deploy the blog post.

see the https://chirpy.cotes.page/posts/getting-started/#deploy-by-using-github-actions and configure it. Then, we can add, commit, and push the content to the Github repo.

# JEKYLL_ENV=production bundle exec jekyll b
git add .
git commit -m "some comments"
git push

Now we are ready to see the blog content in the Github Pages. let’s go the site - https://username.github.io and check it out.

Finally comment

I have also added applause-button to be interactive (see below) and, in the future I will add a comment function using giscus at the end of each blog post. I will write the blog to explain how to configure. Stay tuned. That’s it for today. Thank you for your time, reading, and hapy hacking!