Table of Contents
How to Run Jekyll in a VSCode Devcontainer
This post will explain how to set up Jekyll in a Visual Studio Code (VSCode) Devcontainer, which makes it easier to configure your development environment and begin blogging.
To get started, create a folder named .devcontainer in your project’s root directory if it doesn’t already exist. Save the following JSON code as a devcontainer.json file inside the .devcontainer folder.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"name": "Ruby",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/ruby:3-bullseye",
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [4000],
// Install required gems
"onCreateCommand": "bundle install",
// Use 'postCreateCommand' to run commands after creating the container.
"postCreateCommand": "bundle exec jekyll serve",
// Configure tool-specific properties.
// "customizations": {},
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
"remoteUser": "root"
}
Once you have saved the JSON file, VSCode will automatically configure the Devcontainer and allocate port 4000 for your Jekyll site. To start blogging, open your browser and go to http://localhost:4000.
That’s it! You have now successfully set up Jekyll in a VSCode Devcontainer, simplifying the management of your blog’s development environment.