Today, I launched my personal website thanks to the awesome theme prepared by alshedivat. Although I have dual boot on my computer I have been using Windows Subsystem for Linux (WSL) for a while now and I had some troubles setting up jekyll on my laptop so in this quick post I will try to explain the steps I followed to make this website working.

  1. You should set up git in WSL if you haven’t done so far. I recommend this post. It allows you to share SSH keys between Windows and WSL.

  2. If you don’t have ruby installed on WSL, run the following commands:

  sudo apt update && sudo apt dist-upgrade && sudo apt autoremove && sudo apt clean  
  sudo apt install ruby-full
  # Verify ruby is installed:
  ruby -v

Now, you are ready to develop your jekyll site.

  1. Download or fork the original repository. Change its name to your_username.github.io.

  2. Execute following command which will set up the necessary gems (gems are code that package specific functionality [1]):

  bundle install

Then, start seeing your changes in the browser at the local server address specified by the output of the following command:

  bundle exec jekyll serve

When you are finished, commit and push your changes, exit from applications that are accessing the repository (eg. kill jekyll server, exit from VSCode, etc.) and execute ./bin/deploy which will compile your files to gh-pages branch and push them to the remote repository. The theme repository specifies that it is better to run /bin/deploy --user for personal sites which will copy your files to source branch and compile html files to master branch. Either way make sure to specify which source github-pages will use in the settings of your repository!

Disabling certain features in the beginning:

  • To remove pageX from the navbar simply change the nav: true to nav: false in _pages/pageX.md.
  • To add pageX to navbar do the opposite and create _pageX folder.
  • To disable blog feature comment out the following part in _includes/header.html 
  <a class="nav-link" href="/blog/">
    blog
    { % if page.title == "blog" % }
    <span class="sr-only">(current)</span>
    { % endif % }
  </a>

Some cool features

  • You can change the theme-color in _sass/_variables.scss.