Making a blog with Jekyll and GitHub Pages

Jekyll, for those of you unaware, is a Ruby static site generator, although describing it as such is hardly doing it justice. Basically, Jekyll, true to its namesake, is an elegant method to write websites (or in my case, blogs) without HTML. You can write in Markdown (which I’m doing right now) and have it flawlessly converted to HTML without a hitch!

The Setup

For this, I used a GitHub repo as I’m using GitHub Pages for the blog, as it allows me to create a URL that’s quite small (at least, compared to Wix’s) and is free!

To begin:

1. Get Jekyll and Git installed.

2. Open up a GitHub account.

3. Once you’ve created your account and are at the dashboard, click on the “create a new repository” button.

4. Create a repository with the name <username>.github.io. Do not add a README file for now.

5. Great! Now, you have the base. Making your own blog using Jekyll is going to be a lot like cooking; we have the base ingredients, so it’s time to mash ‘em together.

Cooking with GitHub and Jekyll, as drawn by DALL-E mini.

Setting up shop:

We need to set up Git first. I recommend GitHub’s tutorial for this.

After Git’s been set up, we’ll create our Jekyll site:

• On Windows, open Windows Terminal (available on the Microsoft Store) or Command Prompt if you don’t have it. On macOS, use Terminal.app. On Linux/*BSD, use your favorite terminal app.

• Now, run

 jekyll new <username>.github.io 

to create your Jekyll site. Use

 cd <username>.github.io 

to enter that folder/directory.

• With that done, we need to edit Jekyll’s default configuration file. Run

 nano _config.yml 

to open up the configuration file.

Things to change:

• Title

• Email

• Description

• url (make it https://<username>.github.io)

• github username (twitter too if you have one)

Add Git to your Jekyll folder:

In your Jekyll directory, run

 git init; git symbolic-ref HEAD refs/heads/main 

to get your folder set up for Git.

Use

 git add . 

to add everything in your current repository to a “to-be-uploaded” list, then

 git commit -m "Insert your message here!" 

to get them ready to be uploaded.

Connecting Jekyll to GitHub:

1. Git knows what to add and upload, but it doesn’t know where to upload them to! So, let’s rectify that.

   • Going back to your GitHub repository, you can see that a “push an existing repository from the command line” option exists.

1. Follow those instructions to get your Jekyll page on your GitHub repository.

Linking it all together:

Great! We’ve gotten our Jekyll code hosted on GitHub. Now, we need to make GitHub Pages work.

On your repository page, click on Settings > Pages (under Code and automation).

Select the main branch and save your settings.

Now, click on the Actions tab. If you see a “pages-build-deployment” action running, then congratulations! You’ve successfully created your own Jekyll blog with GitHub pages!

Where to go from here:

Alright, so you’ve got your blog set up. Going to <username>.github.io should bring you to it. What next?

Well, for a blog, you need posts! Jekyll has some great resources for getting started. While you can write in HTML, most posters write in Markdown, which is a powerful and versatile tool to make your posts _exactly_ how you want them. adam-p’s Markdown cheatsheet works as a quick little guide for the basic stuff you’ll mostly need for writing in Markdown.

If you want a playground for testing Markdown, I’d recommend StackEdit, as it comes with a preloaded demo of Markdown.

Additionally, Jekyll also comes with theming support, and with the burgeoning community library of themes, you can make sure that your Jekyll blog looks exactly how you want it to.

Give yourself a pat on the back.

You’ve done a lot over the course of this blog post. You’ve created your own blog from scratch! That’s not something most people’ve done. Three cheers to you and the future of your blog!