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!


No comments:

Post a Comment