How to Craft a Website using Jekyll and GitHub Pages

Introduction

For quite some time now, I’ve harbored a keen interest in owning a personal blogging site. It’s become increasingly important to me to have a dedicated space where I can document and share my learnings to avoid catastrophic forgetting. After exploring various options, I discovered a powerful combination of tools and platforms that allowed me to bring my vision to life. In today’s post, I’ll walk you through my journey of building a website with a Jekyll template, hosting it on GitHub Pages, securing a unique domain name, and finding a reliable hosting service like Linode. So, if you are interested, let’s dive in!

Selecting a template

Given that my website’s primary purpose is to serve as a platform for documenting and sharing my learnings, I realized that an extravagant design or advanced functionality wasn’t necessary. Understanding my limitations in designing a website from scratch, I decided to take a practical route by selecting a pre-made template that I could personalize according to my needs.

Here are some resources for templates

Jekyll Themes

HTML5 UP

Free CSS

For my personal preference, I decided to opt for Jekyll themes primarily because of their simplicity and their ability to free me from the burden of technical complexities.
Notes: If you choose other themes than Jekyll, you could skip to Hosting with Github Pages section.

Fork Jekyll Themes

If you have selected a Jekyll Themes that you are interested in, you could simply fork the repository.

Customizing Webpage Configuration and Folder Structure

Now that you have successfully forked your favorite Jekyll theme, it’s time to dive into personalizing and configuring it to suit your needs. Let’s take a closer look at the folder structure typically found in a forked Jekyll theme repository.

_config.yml: This file serves as the backbone of your website's configuration, holding important settings such as the site title, theme selection, and navigation options. It provides a centralized place to customize various aspects of your website.

_posts: This is where you'll find all the published articles and blog posts for your website. Each post is stored as a separate markdown file, following a specific naming convention to ensure proper sorting and categorization.

img: Holds all the images used in your website. It's a centralized location where you can store and organize the visuals that accompany your content.

While there may be additional files and folders within the theme repository, these are the core components that directly impact the configuration and organization of your website. For the purpose of this guide, I'll primarily use examples from the minimal yet function-rich themes provided by [Hux Blog](https://github.com/Huxpro/huxpro.github.io), as they align with my personal interests. However, most themes share similar components, so you can adapt the instructions to fit your chosen theme accordingly.

One of the key tasks in personalizing your Jekyll theme is editing the _config.yml file based on your preferences. This file contains important configuration details, and most theme authors provide instructions on how to modify it. To demonstrate, let’s take a short example from the _config.yml file of Hux Blog:

title: Jackson Kek 
SEOTitle: Jackson Kek Blog
header-img: img/home_bg_.jpg
email: jacksonkek257@gmail.com
description: "Personal Blog | An AI engineer who doesn't want to be replaced by ChatGPT | 不想被ChatGPT取代的AI工程師"
keyword: "Jackson, Jackson Kek,Personal Blog, AI, Machine Learning, NLP, LLM, Computer Vision, Blogging, Deep Learning, Pytorch, Artificial Intelligence, Python, AI Engineer, Coding, , Dao Logs"
url: "https://jacksonkek.com" # your host, for absolute URL
baseurl: "" # for example, '/blog' if your blog hosted on 'host/blog'
...

In this example, you can see various configurable options such as the title, SEOTitle, header image, email, description, keywords, URL, and base URL. Editing these values allows you to customize your website’s metadata, appearance, and functionality.

Preview your website

Once you have made your configurations by editing the _config.yml file, you might be wondering how to view the changes you’ve made. Before you can preview or publish your website, you need to install several components. Follow the instructions provided here to install all the prerequisites based on your operating system (Linux, Windows, etc.).

Follow the instruction here to install all the prerequisite: ** Remember to follow the installation guide according to your operating system.(Linux, Windows..etc)

Next, open your terminal and Install the jekyll and bundler gems.

gem install jekyll bundler

Change into your project directory.

cd your_project_directory

To build the site and make it available on a local server, use the command:

bundle exec jekyll serve

Browse to http://localhost:4000 or look for the url (server address) shown on terminal:

Yay, you have successfully run your website on your local!

Hosting with Github Pages

Now that your website is ready, it’s time to make it live by hosting it on GitHub Pages. Follow these steps to set up hosting:

Go to the settings of your GitHub repository.

GitHub Repository Settings

In the settings menu, navigate to the Pages section.
Under Source, select Deployment from branch.
Choose the branch you want to deploy your website from, typically the master or main branch.
Click on Save to apply the changes.

It’s important to note that your repository name should end with .github.io, as this will represent your website URL. For example, if your repository is named example.github.io, then your website will be accessible at https://example.github.io.

Follow these steps, and your website will be hosted on GitHub Pages, allowing you to share your work with the world. It may take a few moments for the changes to take effect, so be patient. Once the deployment is complete, you can access your live website using the URL associated with your repository.

Congratulations! Your website is now live and ready to be explored by visitors.

In my upcoming post, I will delve into the topic of using your own domain name and hosting your website with Linode which offers flexibility and customization. Stay tuned!