Jekyll and GitHub Pages

GitHub Pages.. I've tried it 3-4 times already, but every attempt using Jekyll had failed.

Themes I liked were either difficult to configure, or I hadn't been programming long enough to understand how Jekyll works.

So I would just take notes in Notion or iPad note apps about what I learned each day, but thinking about it, it would be inconvenient when showing my portfolio or sharing with others.

Right around that time, a senior at school advised me that it would be good to create a development blog, so I decided to challenge GitHub Pages again!!

The first thing to do is choose a theme. Initially, I wanted to use a theme called no-style-please, but it turned out to be harder to configure than expected, so I ended up using jekyll-theme-chirpy. (It has a lot of stars and 1.8k forks!)

After choosing the theme, the next step is... just read the theme's README file and follow along :)

Now I'll introduce how I built my blog. There are actually many ways to use GitHub Pages, and this is just one method, so keep that in mind.

Installing Ruby

I don't use or know how to use Ruby, but after a quick search, I found there are several installation methods. Among them was a Ruby version manager called rvm, and expecting it to be as convenient as nvm for NodeJS, I proceeded with installation using rvm. If you're using zsh + oh my zsh environment, I recommend using a different installation method instead of rvm

I recommend referring to the official documentation at rvm.io, but here's a brief explanation:

gpg --keyserver keyserver.ubuntu.com --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB

curl -sSL https://get.rvm.io | bash -s stable --ruby

After running these commands and restarting the terminal, the rvm command should work.

However... there's a small problem here. If you use zsh, you need to configure it through the zsh installation process, which is not only difficult, but the official page actually recommends not using rvm if you use oh-my-zsh, which almost all zsh users use..

For someone like me who uses the zsh + oh-my-zsh combination, this was the worst.

Actually, back when I didn't know about this issue,

curl -sSL https://get.rvm.io | zsh

I installed it using this command, and using it without knowing caused problems..

rvm wouldn't auto-start when launching the terminal, and I had to manually start it every time...

Let's just use something other than rvm..

Installing jekyll, bundler & Creating the Project

I'll investigate the rvm issue later. To continue, run the following commands to generate the basic blog template.

gem install jekyll bundler # Install jekyll, bundler
jekyll new username.github.io # Enter your github id for username
cd username.github.io # Move to the username.github.io folder

If you've executed these commands, you can now run the blog with the default theme using the following command:

bundle exec jekyll serve # Run jekyll server

Then access 127.0.0.1:4000 in your browser and you should see the blog.

Setting Up the Theme

The theme I applied is called chirpy. It's well explained in the GitHub repo's README file, so I'll explain briefly.

You need to create or edit the Gemfile and add the following line at the bottom:

gem "jekyll-theme-chirpy"

If you created _config.yml, add this. If editing, find and change the theme:

theme: jekyll-theme-chirpy

Then run the following command:

bundle

The next step is a bit tricky:

cd "$(bundle info --path jekyll-theme-chirpy)"

Move to the folder where the chirpy theme is installed using this command, and copy the following files from that directory:

.
├── _data
├── _plugins
├── _tabs
├── _config.yml
└──  index.html

Copy these files to your project folder (overwrite if duplicates exist). Now when you run the server, the basic chirpy theme should be running on local port 4000. The following steps are difficult to explain. Find and modify the _config.yml file appropriately with your name, email, etc., modify about.md, and when you run the server, you should see the applied changes!!

• Note: If an index.md file exists, you need to delete it for proper operation.
• To write posts, create files in the _posts directory in the format date-post-title.md.

Deploying to GitHub Pages

At this point, I made a decision. Actually, among the many (not that many) static site generators, the reason I chose Jekyll, which uses Ruby that I've never seen before, is because GitHub Pages strongly supports it.. but the theme I chose apparently cannot be built directly due to some build option within GitHub.

Therefore, I need to use GitHub Actions. The idea is to build with Actions, then create a separate branch with the build content and register that branch with GitHub Pages... Actually, if you use this method, there's no problem using other static site generators!!

So! With the rvm zsh issue and the secret of GitHub Pages combined.. I'm thinking of using this blog for a while and then moving to Hugo, a site generator made with Go..

Honestly, the RVM oh-my-zsh thing was just too much..

Added on November 27, 2023 I now use a blog made with Next.js, but if you're planning to deploy a site to GitHub Pages using a static site generator, using GitHub Actions for deployment is the recommended option. The theme setup part of this post can still be followed, but for deployment, you should find another blog post. (Oh wait, reading this again, I didn't write the explanation anyway..?)