Using GitHub Codespaces to edit a Jekyll Static Site

codespaces-and-jekyll.md

Using GitHub Codespaces is my new default for editing a static Jekyll site

1. Navigate to a repo where you have your Jekyll static site (maybe your GitHub pages site)
2. Launch Codespaces (Code button -> Cloud -> New codespace on current branch)
3. Once it's launched, run the following in the terminal

gem install bundler jekyll
bundle update
bundle exec jekyll serve

That's it - you will get a new tab to view the rendered work as you edit. So easy!

I've been slow to return to this and try it out but I am now also trying the devcontainer approach for a prebuild.

franc703 adds in Node which is more than I need.

There's a community one https://github.com/devcontainers/images/tree/main/src/jekyll but that also seems to do a lot that I don't immediately need - tho' it looks more robust, eg trying to find the correct bundler.

I went back to basics, partly to teach myself more about devcontainers (my first time using them) and tried to implement jacobdepriest's original script, which still works for me. It ended up pretty simple; I needed a folder .devcontainer and within that a file devcontainer.json which looks like this:

{
   "name": "Jekyll on Default Linux Universal",

   // This is what you get if you start a codespace from scratch without a devcontainer
   "image": "mcr.microsoft.com/devcontainers/universal:2-linux",

   // Once it is created, run the Jekyll setup commands
   "postCreateCommand": "rvm install ruby-3.0.5; rvm use 3.0.5; gem install bundler jekyll; bundle update; bundle exec jekyll serve"
}

Once you start the container Jekyll is not available immediately. It takes a little bit of time for the postCreateCommand to complete. However, the container started very quickly whereas when I tried putting these commands in a Dockerfile it just shifted the delay to the container build.