I recently received an email asking about how this website - how I created it, where I hosted it and so on. I thought it would be useful to everyone if I wrote a tutorial about it. I use a MacBook, so this tutorial is written accordingly. I tested it on macOS, but apart from certain installtion requirements the guide should work regardless of platforms.

This tutorial assumes that you know:

  • How to use the command line interface/terminal.
  • You have a basic idea about domains, git and GitHub.
  • Most importantly, that you know how to Google!

Table of contents

Prerequisites

Jekyll.

Content adapted from here.

We will use Jekyll as the framework for our site. A framework is basically a boilerplate for doing things (in this case - creating a website), so that we don’t need to write everything from scratch. A framework also provides many more fancy features that we’re not interested in for our use.

The first thing we need to do is install xcode-select, so that we can run code from the terminal. Run the following code:

xcode-select --install

This will open up a window, that asks for login password, and installs command line tools. Just follow the instructions on-screen. The installation will take sometime, so be patient.

Once that is done, check for Ruby installation Jekyll is based on Ruby. I know there are too many dependencies but please bear with me for a second. To check if Ruby is already installed on your system, open the terminal and type ruby -v and hit enter.

If it is installed you should see something like this:

ruby -v
ruby 3.0.0p0 (2020-12-25 revision 95aff21468)

If ruby -v does not yield anything or shows an error, there is a problem with Ruby installation. When this happens, you can install Ruby using Homebrew. To install Ruby using Homebrew run:

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

# Install Ruby
brew install ruby

Check which shell you’re using.

echo $SHELL
/bin/zsh

I use zsh. Add the brew ruby and gems path to your shell configuration:

# If you're using Zsh
echo 'export PATH="/usr/local/opt/ruby/bin:/usr/local/lib/ruby/gems/3.0.0/bin:$PATH"' >> ~/.zshrc

# If you're using Bash
echo 'export PATH="/usr/local/opt/ruby/bin:/usr/local/lib/ruby/gems/3.0.0/bin:$PATH"' >> ~/.bash_profile

Now that we have installed Ruby, and added the installation to our shell configuration, let’s check if it’s installed correctly.

Open up a new terminal window and run the following:

ruby -v

# Output
ruby 3.0.0p0 (2020-12-25 revision 95aff21468)

Ruby is correctly installed! Remember, you need to install Ruby only if it’s not your system, or you have Ruby versions before 2.4.

Let’s now install Jekyll. To install Jekyll and Bundler type:

gem install --user-install bundler jekyll

Get your Ruby version:

ruby -v
ruby 3.0.0p0 (2020-12-25 revision 95aff21468)

Replace the X.X by the firt two digits of your Ruby version. I use zsh.

# If you're using Zsh
echo 'export PATH="$HOME/.gem/ruby/X.X.0/bin:$PATH"' >> ~/.zshrc

# If you're using Bash
echo 'export PATH="$HOME/.gem/ruby/X.X.0/bin:$PATH"' >> ~/.bash_profile

If you’ve followed the guide properly so far, you should be able to install both Jekyll and Bundler.

Creating a Jekyll website

Now that we’ve successfully managed to install all the pre-requisites, we are ready to start creating out website. Open the terminal and type

jekyll new myblog

This will create a new folder named myblog. Change to the newly created folder using

cd myblog

Then run:

bundle exec jekyll serve

Now, head to http://localhost:4000 or http://127.0.0.1:4000, and you should see your website running locally.

Getting the website online

We have the website running locally. The next step is to get it online, for people on the internet to see. There are more than one way of doing so. The simplest way is to use GitHub pages, a service offered by GitHub that allows you to host static websites for free. Websites are hosted using the domain [github_username].github.io. If you wish to use a custom domain, like reangdeba.xyz we need to do a few more things. I’ll talk about both of these in the upcoming sections.

GitHub Pages

Go to GitHub.com and sign up for an account if you have not. Once you log in, create a new repository named your_username.github.io

Responsive image

Responsive image

Once you do that, you can clone the repository using

git clone https://github.com/[your_username]/[your_username.github.io].git

Go to your myblog folder that we previously created, and copy over all the files to the newly cloned folder. Now that we have the files locally, we need to upload it to GitHub. To do that, run the following:

git add --all
git commit -m "a commit message"
git push

Assuming all goes well, the code will be uploaded to GitHub, and your site should be live in no time.