Getting Started

Get Jekyll working within VSCode

Post: Getting Started

Written by: Theron E. Weimer, Jr.

On: 2021-03-09 00:00:00 +0000

Updated: 2021-03-10 11:51:00 -0500

Get Jekyll working within VSCode

It doesn’t appear that there is currently an extension for VSCode/VSCodium to Run a Jekyll site. However, this codemunkies article (which references this article by Carlos Mendible) provided a great example of using Docker Desktop (Windows docs) and devcontainers.

For reference, enable Windows Subsystem for Linux version 2 (WSL2) documentation, and integrate with Docker.

Make sure that Windows Subsystem for Linux is enabled as well as the Virtual Machine feature.

 dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
 dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

Install the WSL2 kernel.
Optional: Set WSL2 as the default.
```
 wsl --set-default-version 2
```
Ensure that the WSL image installed is version 2.
```
 wsl --list --verbose
```
Convert an image to WSL2.
```
 wsl --set-version <Distro> 2
```
Make sure the Windows 10 Hyper-V feature is enabled. Reference the Microsoft documentation for Windows containers and enable Hyper-V.
```
 Get-WindowsOptionalFeature -Online
```
Note the feature name is “HypervisorPlatform” now.
```
 Enable-WindowsOptionalFeature -Online -FeatureName HypervisorPlatform -All
```
or via Turn Windows features on and off
Install Docker Desktop
```
 choco install docker-desktop
```
If the Chocolatey installer doesn’t seem to install properly, use the installer from hub.docker.com.
Enable Docker integration with WSL2 image. When Docker Desktop starts, go to Settings > Resources > WSL Integration
Install the VSCode extension. Currently, the Remote - Containers extension is not working in VSCodium, so it is necessary to use VSCode.

Create the .devcontainer directory and files.

 mkdir -p .devcontainer
 curl https://raw.githubusercontent.com/steve-codemunkies/steve-codemunkies.github.io/main/.devcontainer/Dockerfile --output .devcontainer/Dockerfile
 curl https://raw.githubusercontent.com/steve-codemunkies/steve-codemunkies.github.io/main/.devcontainer/devcontainer.json --output .devcontainer/devcontainer.json

Update the Dockerfile to support bundler for use with GitHub Pages.

Added after FROM:

 # Necessary to run bundler within Docker.
 # https://bundler.io/guides/bundler_docker_guide.html
 ENV GEM_HOME="/usr/local/bundle"
 ENV PATH $GEM_HOME/bin:$GEM_HOME/gems/bin:$PATH

Add after installing Jekyll:

 # [Optional] Uncomment this line to install bundler to use with GitHub Pages.
 RUN gem install bundler

Create the VSCode tasks file.

 mkdir -p .vscode
 curl https://raw.githubusercontent.com/steve-codemunkies/steve-codemunkies.github.io/main/.vscode/tasks.json --output .vscode/tasks.json

Edit the tasks.json file to suit the project.

Use bundler to install necessary gems.

 {
     "label": "Bundle Install",
     "command": "bundle install",
     "args": [],
     "type": "shell",
     "problemMatcher": []
 }

Use bundler to run Jekyll.

 "command": "bundle",
 "args": [
     "exec",
     "jekyll",
 ...

When VSCode prompts to “Reopen in a Container”, do so and the image will be built.

github_pages_template

Template for my GitHub Pages configuration.

Get Jekyll working within VSCode