Are you ready to create your own personal website but are feeling overwhelmed by the process? Don’t worry, you’re not alone! I’ve been in the same boat, wanting to build my own website for ages, but always putting it off because I thought the process of creating something I truly loved would be too time-consuming.

But recently, I stumbled upon some academic webpages hosted on GitHub that caught my eye. To my surprise, I learned that many of these websites were built using templates as a starting point, making the process of building a website much simpler than I had previously thought.

Feeling inspired, I decided to take the plunge and create my own site. And guess what? I found the process to be quite straightforward and pretty enjoyable! So if you’re interested in creating your own website but aren’t sure where to start, keep reading. In this blog post, I’ll share the different steps I followed to get my website up and running. Who knows? Maybe it will inspire you to do the same!

My setup

I used a MacBook Pro laptop running macOS 13.1 for this project. However, the steps described in this post should also work on other operating systems, as Jekyll is designed to be platform-agnostic. Keep in mind that some commands and tools may have different syntax or require different installation procedures depending on your system, so you may need to adapt the instructions accordingly.

0 Prerequisites

Before you start building your website, it’s important to ensure that you have a GitHub account. If you don’t have one, you can create a new account and log in to get started. Additionally, we will need support from Jekyll, a static site generator that’s great for creating blogs and personal websites.

To make sure that Jekyll is properly installed in your system, you can run:

jekyll -v

If missing, read the next section and follow the instructions for installation (or see visit Jekyll site).

With these two tools, you’ll be well-equipped to start building your website!

Install Jekyll

Jekyll is a static site generator that takes text written in a markup language and uses layouts to create a static website. To use it, you’ll need to ensure that your system has a few dependencies installed:

  • Ruby version 2.5.0 or higher
  • RubyGems
  • GCC and Make

To check if Ruby and RubyGems are already installed on your system, you can run two simple commands:

ruby -v
gem -v

If you receive output that indicates the versions of Ruby and RubyGems, you’re good to go! We can install jekyll by running:

gem install jekyll bundler

If not, you’ll need to install them (see section below) before you can use Jekyll.

Install Ruby

Ruby is a popular open-source programming language known for its dynamic and flexible nature. If you’re interested in using Ruby, you’ll need to install it on your system. Fortunately, there are several tools available to simplify the installation process, such as Homebrew and chruby.

If you’re a macOS user, it’s worth noting that while Ruby comes preinstalled on your machine, it’s recommended to install a separate and newer version using a version manager like chruby or rvm. This will ensure that you have access to the latest features and security updates. For my own installation process, I followed the Jekyll guide and used chruby.

To check if Ruby is already installed on your system, you can run the ruby -v command in your terminal. If you see a version number displayed, you’re good to go. Otherwise, you’ll need to install Ruby before you can proceed with using it.

Install Homebrew

The first step to installing Ruby on your macOS or Linux system is to install Homebrew, a package manager that makes it easy to install software that isn’t included with your operating system. Homebrew allows you to easily install, upgrade, and manage packages and dependencies on your system. To install Homebrew, you can run this simple command:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install chruby and ruby-install

To install chruby and ruby-install, we can simply run the following command in our terminal:

brew install chruby ruby-install xz

Install Ruby

Once installed, we can use ruby-install to download and install the specific version of Ruby that we need.

For example, to install the latest stable version of Ruby supported by Jekyll, we can run:

ruby-install ruby 3.1.3

This will take few minutes.

Configuration

After installation, we can switch to the newly installed Ruby version using chruby. However, before doing that, you’ll need to configure your shell to automatically use chruby. This is typically done by adding a few lines of code to your shell configuration file, such as .bashrc or .zshrc. For example, I ran these commands:

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc

Finally, we could add a further line to switch to our newly installed version:

echo "chruby ruby-3.1.3" >> ~/.zshrc

And that’s it! Now we have Ruby installed and ready to use on our system.

1 Get your template

To start, we need to choose a Jekyll theme that will serve as a foundation for our website. Fortunately, there are many free options available online, which can be easily accessed through platforms like GitHub. For this tutorial, we will be using the al-folio theme, which is a simple and elegant option for academics.

Once you have chosen your preferred theme, the next step is to fork the repository. To do this, simply click on the Use this template button and select Create a new repository from the dropdown menu. This will create a new repository on your GitHub profile that contains all the files from the original theme repository.

Make sure to rename the repository to YOURUSERNAME.github.io so that it can be properly published as a GitHub Pages site.

2 Clone your repository

Now that we have our repository set up on GitHub, we’ll want to clone it to our local machine so we can start customizing it.

First, click on the Code button on the repository page and copy the URL provided.

Next, open up your terminal and navigate to the directory where you want to store your project. Once you’re in the right directory, run the command:

git clone YOUR_REPOSITORY_URL

where YOUR_REPOSITORY_URL is the URL you copied earlier. This will download all of the code from your GitHub repository onto your local machine, allowing you to make changes to the site configuration and content.

3 Modify the code

Now that we have the code on our local machine, we can start modifying it. Here are some files you might want to check if you decided to use my same theme:

  • _config.yml: this is a configuration file schema, and contains several information that will be used for the creation of the website
  • _news: folder containing news announcements as markdown files
  • _pages/about.md: markdown file that should contain your personal information
  • _pages/cv.md: markdown file used to provide CV information together with _data/cv.yml
  • _pages/dropdown.md: markdown file for defining submenus
  • _pages/projects.md: markdown file used to render information on projects you are working on. It takes the information from the markdown files contained in the _projects folder
  • _pages/publications.md: markdown file used to render the publications provided in _bibliography/papers.bib
  • _pages/repositories.md: markdown file used to render information on the repositories provided in _data/repositories.yml
  • _pages/teaching.md: markdown file that should contain your teaching experience
  • _posts: folder containing blog entries as markdown files
  • _sass: folder containing Sassy Cascading Style Sheets for the website
  • assets/img: folder containing images
  • assets/pdf: folder containing pdf files

Since sometimes there are execution issues, you might also want to add this lines to .github/workflows/deploy.yml:



1
2
3
4
5
6
7

 
jobs:
    deploy:
        runs-on: ubuntu-latest
        steps:
        - name: Fix permission
            run: |
                chmod a+x bin/*

4 Build it locally

We can now build our website and make it available on a local server by running the following command:

bundle exec jekyll serve

This allows us to check if everything is as we expected, or if we need further refinement. After running the command, we can go to http://localhost:4000/ on our web browser to see the website locally.

5 Stage and commit the changes

Once you have made changes to your website and are happy with them, you need to commit them. Commits are like snapshots of your repository at specific times and are the building blocks of “save points” within Git’s version control. It’s always good to check in which branch you are on before committing, since the changes are created on your current branch. We can do this by running the command:

git status

In my case, the output confirms that I’m on the master branch. If you’re on the correct branch, proceed to the next step.

Before committing our changes, we need to add the files to the staging area. In fact, Git only looks to the staging area to determine what to commit. To stage files, run the command:

git add <FILENAME>

Once done, we can commit the files including a commit message by running the command git commit with the -m option:

git commit -m "descriptive commit message"

Remember that without staging any files the command git commit won’t work.

You can speed up the process using the -a option that allows to stage all the files that are already being tracked by Git and commits them:

git commit -am "descriptive commit message"

6 Push your commits

After committing your changes locally, you need to share them with the remote repository. This step is necessary to update the corresponding branch on the remote server. To upload all local branch commits to the remote, use the command git push:

git push

Once you have published your local changes to the remote repository, you are ready to build your website.

7 Deploy the website

Finally, we can deploy our website on GitHub. For doing so, the preferred way is by executing the following command:

bin/deploy --user

If the GitHub Actions are properly setup, your personal website should be built and available in few minutes!

Resources

This blog post was created using the following resources: