Devcontainer with VS Code

Use a local devcontainer

If you don’t want any local setup (apart from Docker Desktop), but still run your own Hugo instance, you can make use of the preconfigured devcontainer. If you want to learn more about the concept, visit https://code.visualstudio.com/docs/remote/containers. To use it, you need to take the following steps:

  1. Start Docker Desktop and switch to Linux containers by right-clicking on the Docker logo in the system tray and selecting “Switch to Linux containers…”. If you only see “Switch to Windows containers…”, then you are already switched to Linux containers. If anything goes wrong, check if you are on the latest version of Docker Desktop and have the WSL2 integration enabled. If you have all that in place and it still doesn’t work, check the extended installation documentation here
  2. Install the Remote development extension pack in Visual Studio Code
  3. Run the action “Remote containers: Clone Repository in Container Volume” and select the fork you created. If you haven’t done that before, go through the docs.
  4. Wait for a bit. When you do this for the first time, it can take a couple of minutes. Next time it will be faster…
  5. After a while, you will have VS Code with the cloned repository and the terminal should show something like “Done. Press any key to close the terminal.”
  6. Run the action “Tasks: Run task” and select “Start local Hugo Server” from the list. If you don’t see that entry, you might have to reload your VS Code window and try again
  7. After Hugo has generated the site, you will get a notification that offers you to “Open a browser”. Click on that and you will see your local instance of the AL guidelines! Again, on the first try it will be a bit slow and sluggish, but the second one should be fast.
  8. Now you can make changes and just save them. If you open the terminal, you will see a message that tells you that a change was detected and the site was rebuilt. After that, the change should automatically appear in your browser

Here is a walkthrough of the full process:

Use GitHub Codespaces

What is also great about this, is that you can also use GitHub Codespaces with that setup. In that case, steps 1-5 become two clicks… Here is another full walkthrough: