Running Jekyll from inside VS Code

If you prefer to do all your development, including running development servers, from inside of VS Code, then it stands to reason you likely want to do the same when writing your blog posts.

There are extensions you can download (if you are a VS Code user, you’ll be painfully aware of just how many extensions there are!).

In this short post I will detail what I did to make running a Jekyll server from inside VS Code a few key presses away.

Here are the steps;

1. Create a .vscode folder if one doesn’t already exist
2. Create a tasks.json file within .vscode if one doesn’t already exist
3. Add a task to run Jekyll
4. Exclude this new file from Jekyll

.vscode/tasks.json

All project specific VS Code files live inside a directory called .vscode (the . is important). The specific file we will be creating today is called tasks.json. If you don’t already have one for your project, go ahead and create both the folder and file within in.

Tasks

Tasks are scripts you can run from within VS Code, they could do anything, in our case we want one to run jekyll serve for us.

Here are the contents of our .vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start Jekyll",
      "type": "shell",
      "command": "bundle exec jekyll serve --host localhost --port 4000",
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

• version: This attribute lets VS Code what version of the Task syntax you’re using, 2.0.0 was the most recent at the time I set this up
• tasks: Takes an array of Tasks to be run, we only have the one in our case, but in more complex projects you can have several, and organise them such that calling one will call several.
• label: The nice name to call your Task, this will appear when you start typing which Task you want to run
• command: The specific command to run. Change this to suit your specific needs
• group: By specifying a group you can run all tasks within that group easily
• kind: Tells VS Code what type of Task we are running, in our case it is a “build” task
• isDefault: Tells VS Code that this is the default Task to run

With this file in place we can run it by opening the command palette in VS Code (cmd + shift + P on the Mac) and typing Run Task.

The next option will be what Task you want to run, we only have the one, so press Enter on “Start Jekyll”

All being well, you should see a terminal window appear with Jekyll booting up.

Tell Jekyll to ignore config files

With files like this, and other files that Jekyll doesn’t really need to care about, we can ignore them to Jekyll doesn’t watch over them or try to compile them.

In our _config.yml file we can add the following;

exclude:
  - .vscode/
  - .github/