Replacing a CMS using Gitpod

October 26, 2022

For a while now I’ve been using Forestry as a simple CMS that hooks into this website’s repository as a way to nicely be able to write blog posts when I am not near my main machine. The benefits where that I had a fairly good WYSIWYG interface for writing Markdown and then being able to directly preview it by having Forestry build the changes immediately using Hugo. For sites that rely on multiple people editing a single site or a site with sub-sites it’s probably way better than what I’m about to introduce here, but for me it was time to sunset its usage.

As far as I know Gitpod is the OG in the space of remote development platforms with GitHub’s Codespaces hot on its heels¹. While it definitely makes most sense for projects where the process to set up should be abstracted away as much as possible to make collaboration between people easier, I still felt I could use this service to improve upon my own workflow as well. While I would have actually liked to use GitHub’s solution for this to keep myself in its walled garden (/s)², this was so simple to set up that I figured it was worth it anyway.

To get started just add a .gitpod.yml to the root of the repository, as such:

tasks:
  - name: Install Hugo dependencies
    before: brew install hugo
    init: echo "Your version of Hugo is `hugo version`"
    command: hugo server -D -F --baseUrl $(gp url 1313) --liveReloadPort=443 --appendPort=false --bind=0.0.0.0
ports:
  - port: 1313
    onOpen: open-preview

This is seemingly the official template, but right out of the gate I wanted to use the same version of Hugo that I use for my live website and doing that with brew was a chore on top of being awfully slow to install everything³. So here is what I came up with instead (shown as a diff):

 tasks:
-  - name: Install Hugo dependencies
-    before: brew install hugo
+  - name: Install Hermit and Hugo
+    before: |
+      curl -fsSL https://github.com/cashapp/hermit/releases/download/stable/install.sh | /bin/bash
+      export PATH="/home/gitpod/bin:${PATH}"
+      pushd ~
+      mkdir hermit-packages && cd hermit-packages
+      hermit init
+      . ./bin/activate-hermit
+      hermit install hugo-0.88.1
+      popd
     init: echo "Your version of Hugo is `hugo version`"
     command: hugo server -D -F --baseUrl $(gp url 1313) --liveReloadPort=443 --appendPort=false --bind=0.0.0.0
 ports:

I’m using Hermit as the package manager as I know that is extremely straight-forward because it heavily relies on just pulling binaries instead of resolving any dependencies, installing those, etc. By the time the workspace has booted up everything is already set up and running.

After saving that YAML file just authenticate Gitpod and create a new workspace. It will then discover that file, set everything up accordingly, and present you with VS Code in your browser (other options are available as well). It really is that easy! After that I just had to make some minor modifications:

• remove the onOpen declaration as I didn’t want a preview being opened in the in-browser version of VS Code when there is a valid URL that can be browsed to in a separate tab;
• add the public_repo permission inside Gitpod’s integrations page to allow for committing straight back to the repository;
• add a VS Code .vscode/settings.json file in the root of the repository that among other things disables auto-saving⁴, which I didn’t want because I have the preview open in another tab and I don’t want it flashing all the time when I haven’t even saved the file yet;
• add a few extensions in the .gitpod.yml file:

vscode:
  extensions:
    - Catppuccin.catppuccin-vsc
    - file-icons.file-icons

While I’m fine with just writing in VS Code, I am sure there are extensions out there that turn VS Code more into what an actual writer might use so there’s tons of potential here. Now I, myself, can just hop in any browser, fire up a workspace in Gitpod, enter Zen mode in VS Code and get cracking!⁵