Introduction

Creating a personal or project website can be a breeze with GitHub Pages, especially if you’re familiar with Git and GitHub.

By integrating Jekyll, a popular static site generator, you can easily create a stylish blog or website. Furthermore, customizing your site with a unique domain adds professionalism and brand identity.

In this blog, we’ll walk through the steps of setting up GitHub Pages with Jekyll and adding a custom domain.

Step 1: Create a GitHub Repository

First, you need a GitHub account. Once logged in, create a new repository named <yourusername>.github.io, where <yourusername> is your GitHub username. This repository will host your website’s content.

Step 2: Set Up Jekyll

GitHub Pages supports Jekyll natively, so setting it up is straightforward:

  1. Clone your newly created repository to your local machine.
  2. Install Jekyll (if you haven’t already) by running gem install jekyll bundler in your terminal.
  3. Inside your repository’s directory, create a new Jekyll site by running jekyll new --force ..
  4. Commit and push these changes to your GitHub repository.

Step 3: Customize Your Site

Jekyll comes with a default theme, but you can change it by editing the _config.yml file. Explore themes at jekyllthemes.io or create your own. Customize your site’s content by editing the Markdown (.md) files in the _posts directory.

Step 4: Set Up a Custom Domain

To use a custom domain:

  1. Purchase a domain from a domain registrar.
  2. In your GitHub repository, go to the ‘Settings’ tab, find the ‘Pages’ section, and enter your custom domain in the ‘Custom domain’ field.
  3. Configure your domain’s DNS settings. Add a CNAME record pointing to <yourusername>.github.io. The exact steps vary based on your domain registrar.
  4. Add a file named CNAME to your repository’s root directory, containing your custom domain name.

Step 5: Deploy Your Site

GitHub Pages automatically builds and deploys your site when you push changes to your repository. Your site should be live at https://<yourusername>.github.io or your custom domain if you’ve set one up.

Conclusion

Congratulations! You now have a personal website or blog hosted on GitHub Pages, built with Jekyll, and potentially customized with your domain. I built my blog using the same method. It’s a fantastic way to showcase your portfolio, projects, or writings. Happy coding and blogging!

Remember, this is a simplified guide. For more detailed instructions, refer to the official GitHub Pages documentation and the Jekyll website.