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!

Thanks for this - trying it now!

I've found I needed to do

rvm use 3.0.5 beforehand as the 3.1.3 version of ruby was failing

thanks a lot

thanks - and same for me re 3.1.3 - it did not work but 3.0.5 was fine. I then add this tasks.json to the .vscode folder to automate it so I can delete the codespace and recreate it quickly:

{
  "version": "2.0.0",
  "tasks": [
    {
      "command": "rvm install ruby-3.0.5; rvm use 3.0.5; gem install bundler jekyll; bundle update",
      "type": "shell",
      "label": "Jekyll - Install Dev Server",
      "options": {
        "shell": {
          "args": ["--login"]
        }
      },
    },
    {
      "command": "rvm use 3.0.5; bundle exec jekyll serve",
      "type": "shell",
      "label": "Jekyll - Run Dev Server",
      "options": {
        "shell": {
          "args": ["--login"]
        }
      },
    },
  ]
}

Thanks, I've added it to my repo too and I'm testing it.

Do you think there is a way to bake the installation task into a prebuild? https://docs.github.com/en/codespaces/prebuilding-your-codespaces/about-github-codespaces-prebuilds

I created a .devcontainer directory in my repo to pre-build it. https://github.com/franc703/my-portfolio/tree/master/.devcontainer @andreadellacorte

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.