Google Analytics

Saturday, 3 December 2022

Creating a Jekyll Site

Following the instructions at https://pages.github.com/, I have enabled a HTML website to be published to GitHub Pages using GitHub Desktop.  I have installed Jekyll on an Ubuntu 22.10 VM and now I am going to enable my site with Jekyll.

Using Visual Studio Code I have Cloned my Git Repository to /home/myuser/Workspace/nthomasgsy.github.io.


I am now going to follow the instructions at https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll?platform=linux#creating-your-site.


Step one is to open a terminal window and cd to the folder where my repository has been cloned.


Considering https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site it seems cleaner to publish from a /docs folder on the source branch.  Following step 6 I make a docs folder and change directory to it.


$ mkdir docs

# Creates a new folder called docs

$ cd docs


Step 7 is to run the command to create a Jekyll site in the docs directory:


$ jekyll new --skip-bundle .

# Creates a Jekyll site in the current directory


This has added the following files which are now visible in VS Code:



Following the instructions we are told to comment out the gem "jekyll" line shown here:



Step 10 tells us to uncomment and adjust the gem "github-pages" line.  As I have commented in my code, instead of simply uncommenting the line as as described in the file’s commented instructions, step 10 asks to reference the latest supported version of the github-pages gem from https://pages.github.com/versions/.


At time of writing the version was 227:



Having saved and closed the gemfile.  Back in terminal, step 12 tells us to run bundle install in the docs directory:


$ bundle install


Following step 13, I have adjusted my _config.yml file.  It is not clear whether /docs needs to be specified as the baseurl, so I commented it out.



To run and test locally (step 14), following https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/testing-your-github-pages-site-locally-with-jekyll, it was indeed necessary for me to run:


$ bundle add webrick


I was then able to run:


$ bundle exec jekyll serve


It is then possible to see the site running at http://localhost:4000/


With this all working, I was ready to commit the code.


First, before I was able to commit the code, I had to set my git username and email, (https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup).  Having checked I hadn’t already done so with:


$ git config --list


I then used the following commands to set my git username and email:


$ git config --global user.name "John Doe"

$ git config --global user.email johndoe@example.com


Back in Visual Studio Code I was able to commit the code.



Clicking commit with a comment provided as shown above and then syncing changes:



From the Github repository settings, I then had to change the branch folder to the /docs folder:



With this done, the site was re-published using Jekyll!


Installing Jekyll

Following the instructions at https://pages.github.com/, I have enabled a HTML website to be published to GitHub Pages using GitHub Desktop.  But I want to expand on this with the prescribed use of Jekyll…

Having tried to install Jekyll on Windows Subsystem for Linux via the bash method described at https://jekyllrb.com/docs/installation/windows/, I ran into problems where I could not update the Ruby gems and had errors with directory permissions.  It appeared that the instructions conflicted with the Ruby install on Ubuntu and I ended up blowing away my WSL image.  I should have paid heed to the warning: ‘Bash on Ubuntu on Windows is still under development, so you may run into issues’.


Perhaps the WSL instructions should be supplemented with the Ubuntu instructions: https://jekyllrb.com/docs/installation/ubuntu/.


Instead I am now using the following instructions on an Ubuntu VM running Ubuntu 22.10…


  1. Update repository lists and packages:

sudo apt-get update -y && sudo apt-get upgrade -y


  1. Install Ruby and other pre-requisites:


sudo apt-get install ruby-full build-essential zlib1g-dev



  1. Avoid installing RubyGems packages (called gems) as the root user. Instead, set up a gem installation directory for your user account. The following commands will add environment variables to your ~/.bashrc file to configure the gem installation path:


echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc

echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc

echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc

source ~/.bashrc


  • It is this aspect that is probably missing from the WSL instructions.

  • ‘This tells gem to place its gems within the user’s home folder, not in a system-wide location, and adds the local jekyll command to the user’s PATH ahead of any system-wide paths.


To activate the new exports, either close and restart Bash, logout and log back into your shell account, or run . .bashrc in the currently-running shell’, (https://jekyllrb.com/docs/troubleshooting/#no-sudo).


  1. Next, update your Ruby gems:


gem update


  1. Install Jekyll and gem bundler:


gem install jekyll bundler


Check your Jekyll version:


jekyll -v


For me, this has resulted in Jekyll version 4.3.1 at time of writing.


I am going to follow with https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll?platform=linux#creating-your-site, but using Visual Studio Code instead of terminal where possible.