Skip to content
Kruno Golubić
Go back

Developing in the Browser: How I Use GitHub Codespaces for Maintaining This Blog

Kruno Golubić

Depending on where I am, I work on different devices: laptops, desktops, tablets. Before Codespaces, that meant managing Node.js versions, environment variables, and npm packages in at least two places, and remembering to keep them in sync. Any new machine meant a setup session before I could do anything useful. I had no interest in maintaining that.

GitHub Codespaces solved it by moving the development environment into the cloud, tied to the repository. I open a browser, start a Codespace, and I am in the same environment I left, regardless of which machine I am sitting in front of. Nothing installed locally except a browser.

The setup for an Astro project is minimal. Codespaces detects the Node.js project and configures the environment automatically. The Astro dev server runs inside the Codespace and forwards the port to your browser, so localhost:4321 works exactly as if it were running locally. The first time I saw the live preview open in a browser tab while the actual compute was happening somewhere in a GitHub data center, it felt slightly surreal.

A few things worth knowing before you start: you cannot create a Codespace from an empty repository. GitHub needs at least one file to initialize the environment, typically a README. If you try to start a Codespace on an empty repo, it will either fail or behave unexpectedly. Add a README first, then start the Codespace.

When you run the Astro installer inside a Codespace, it tries to be helpful and suggests the full npm create astro@latest command as the project folder name. If you are already inside the directory where you want to install, type . when it asks for the folder name. One character, and the project installs in the current directory instead of creating a nested one.

The part that caught me off guard: if you edit files directly in github.dev (the browser-based VS Code editor that GitHub offers separately from Codespaces), those changes are committed to the repository but are not automatically pulled into any running Codespace. Run git pull manually after switching back. You learn this exactly once.

One thing I did not expect to appreciate: the whole setup works from a phone. I can open a Codespace in a mobile browser, run npm run build, check the output, commit, and push. Not something I do for writing sessions, but when I notice a typo on a published post and I am away from a computer, it is genuinely useful to be able to fix it without waiting until I get home.

The workflow I ended up with is simple. Open a Codespace, run npm run dev, write. When done, run npm run build to catch anything the dev server missed, commit, push. Cloudflare Pages picks it up and deploys automatically.

Codespaces runs on GitHub’s free tier compute hours, which are limited. For a personal blog where sessions are measured in minutes rather than hours, the free tier has been more than enough.


Share this post on:

Previous Post
How I Spent Half a Day Fixing a WordPress Charset Problem (and What I Learned)
Next Post
Hosting a Static Blog on Cloudflare Pages