I really, really enjoy using static web site generation systems like Jekyll.
However, I generally hate getting them running after I pave over my desktop machine.
I started out with Jekyll back when GitHub first introduced GitHub Pages. It was great, but I was using Windows at the time and there were a lot of hoops to jump through. Even after moving to Linux, I found that Jekyll requires installation of things I only use for the websites (e.g.: I generally don’t do much Ruby development). When I regularly pave over my desktop, it makes it a bit of a hurdle to add new content to the site. A side effect of this was that it basically afforded me a great excuse to not add content.
I converted the site over to use Netlify a few years ago. This allows for a wide user of tooling to generate the site, including alternatives such as Hugo which I use at work. But, there is a cost to switching away from Jekyll, specifically that the content needs to be adapted to the new templates and such. Now, the overall look and feel of the site currently isn’t anything breathtaking, but I don’t really wish to rip this particular bandage off right now.
So, as with so many things, containers to the rescue! Microsoft announced the addition of container development tooling to VS Code back in 2019. I played around with it a little bit, but didn’t quite grasp how it could make my life better. Wow, do I wish I would have dug deeper! Lots of additional details about using remote containers in VS Code are available as well.
I did a little bit of searching, and came across a few kind souls who apparently had very similar thoughts, and before I did, too. The nerve! Specifically: Carlos Mendible, Steve Hocking, and Allison Thackston.
The final result ended up being fairly straightforward:
- Ensure Docker is installed for Linux, or Docker Desktop for Windows/macOS. Microsoft details this in their install instructions.
- Add the Remote Containers extension in from the marketplace.
- Create an appropriate dockerfile and devcontainer.json file to the repo; see my commit here.
- Add a task to the vscode folder that defines how to start Jekyll. I actually did this first, you can see that commit as well. I also had to update gitignore to remove that folder. I don’t remember why I had that on, but I for sure want this checked in.
| Using the extension | |
|---|---|
| Adding the extension gives you this cute little green panel in the lower right hand corner: | 
|
| When you open a folder that the extension thinks can be containerized, it will prompt you: | 
|
| After opening in the container, the green panel lets you know that you’re connected to a remote container: | 
|
| Clicking the green panel gives you additional options in the command palette: | 
|
| Running the configured tasks from the Command Palette: | 
|
And, uh, that’s about it. I was able to clone the repo for this site to a fresh Linux box, and after a few minutes of restoration, everything just worked with zero monkeying around. I didn’t test on a Windows machine, but I have very little doubt that it should does what it says on the tin.
I’ve only begun to scratch the surface on where I can plug this into my workflows, but I’m pretty excited to dig deeper into the possibilities that the remote containers feature of VS Code offers.