Do you want to create your own personal website, but don’t know where to start? Look no further than Jekyll and a free template! Jekyll is a simple, blog-aware, static site generator perfect for personal websites. This tutorial will show you how to choose a ready-to-use Jekyll theme that comes with many features such as responsive design, customizable layout, and built-in Google Analytics. In this tutorial, I will guide you step-by-step on how to make your own personal website with Jekyll and deploy it live on Github Pages for free. I chose “Beautiful Jekyll” for my website’s theme but this guide is universal for most Jekyll themes. I’ve included a link to a free theme library below so you can choose your own to follow along with.

Prerequisites

Before we begin, you’ll need to have a few things:

  • A Github account
  • Basic knowledge of HTML and CSS
  • Ruby installed on your computer
  • A chosen Jekyll theme to fork. (Optional)

Step 1: Fork the Beautiful Jekyll Repository (Or Whatever You Chose in the Prerequisites)

The first thing you’ll need to do is fork the “Beautiful Jekyll” repository on Github. This will create a copy of the repository in your Github account, which you can customize to make your own personal website.

To fork the repository, follow these steps:

  1. Go to the “Beautiful Jekyll” repository on Github.
  2. Click on the “Fork” button in the upper right corner of the screen to create a copy of the repository in your Github account.

Step 2: Rename the Repository

After forking the repository, you’ll need to rename it to “yourusername.github.io”, where “yourusername” is your Github username. This is required to deploy your personal website on Github Pages.

To rename the repository, follow these steps:

  1. Go to the forked repository on Github.
  2. Click on the “Settings” tab.
  3. In the “Repository name” field, rename the repository to “yourusername.github.io”.

Step 3: Clone the Repository

Now that you have forked and renamed the repository, you’ll need to clone it to your computer. This will create a local copy of the repository that you can edit and customize.

To clone the repository, follow these steps:

  1. Open a terminal and navigate to the directory where you want to store your local copy of the repository.
  2. Run the following command, replacing “URL” with the HTTPS or SSH URL of your forked repository: 
    git clone URL

Step 4: Customize Your Website

With the repository cloned to your computer, you can now customize your personal website. Open the cloned repository in your text editor and modify the _config.yml file to add your own personal information, such as your name, email address, social media links, and more.

You can also customize the design of your website by modifying the CSS files and HTML templates included with Beautiful Jekyll.

Step 5: Preview Your Website

Before deploying your website to Github Pages, it’s a good idea to preview it locally on your computer. To do this, you’ll need to install the dependencies required by Jekyll and run the Jekyll server.

To preview your website, follow these steps:

  1. Open a terminal and navigate to the cloned repository.
  2. Run the following command to install the required dependencies: 
    bundle install
  3. Run the following command to start the Jekyll server: 
    bundle exec jekyll serve
  4. Open your web browser and go to http://localhost:4000 to see your website.

Step 6: Deploy Your Website

With your personal website customized and previewed locally, you’re ready to deploy it to Github Pages. Github Pages is a free service that allows you to host static websites directly from your Github repository.

To deploy your website, follow these steps:

  1. Open a terminal and navigate to the cloned repository.
  2. Run the following command to commit your changes: 
    git commit -am "Update config"
  3. Run the following command to push the changes to Github: 
    git push origin main
  4. Wait a few minutes for Github Pages to build and deploy your website.
  5. Open your web browser and go to http://yourusername.github.io to see your website live.

That’s it! You now have your own personal website built with Jekyll and Beautiful Jekyll and deployed on Github Pages. You can continue to customize and add content to your website by modifying the files in your forked repository and pushing the changes to Github. Happy coding!