A Github Pages Blog With Jekyll Developed On Wsl2
Getting Started
ketchdigital.com is built using Jekyll and GitHub Pages.
GitHub has an excellent guide on how to get started
Setting up a GitHub Pages site with Jekyll
This post is a shortcut to get you stared with a project website that you can develop and test locally on a PC with WSL2 and host on github pages.
Install dependencies
First make sure you have the pre-requisites on your PC:
- Install WSL 2
- Install Ubuntu 20.04
- Install initial Ruby version
cd ~
sudo apt-get update --fix-missing
sudo apt install ruby
Test that you have ruby and gem installed:
ruby -v
gem -v
Test Jekyll is installed
jekyll -v
Check your git configuration:
$ git config -l
user.name=<my name>
user.email=<my mail>
credential.helper=/mnt/c/Program\ Files/Git/mingw64/libexec/git-core/git-credential-manager-core.exe
- Install VS Code
This code automatically installs code in WSL.
Reference: Developing in WSL
cd ~
code .
Initialize the local Jekyll site
-
Fork the repo github-pages-example to your account.
-
Clone your forked project to your dev machine and initialize bundle
Reference: Using Jekyll with Bundler
cd ~/<repo-root>
git clone https://github.com/<yourAccount>/github-pages-example.git
cd github-pages-example
bundle config set --local path 'vendor/bundle'
bundle install
Start your local development
Start development server:
bundle exec jekyll serve --config _config.yml,_config.dev.yml --livereload &
Browse to http://127.0.0.1:4000/
Edit file ./index.markdownand see that the UI automatically reload to render your update in the browser
Configure website setup Github Pages site
- Configure site settings in
./_config.yml
baseurl: "/github-pages-example" # the subpath of your site
url: "https://<yourAccount>.github.io" # the base hostname & protocol for your site
Reference: Creating a GitHub Pages site with Jekyll, Configuring Jekyll in your GitHub Pages site
-
Commit changes and push commits to github
To configure continuous deployment (CD) on each update to the main-branch in GitHub, make sure to change the GitHub Pages to main.
- Test your new website.
Browse to: https://<yourAccount>.github.io/github-pages-example/