DEV Community

Cover image for How to launch Jekyll project in VS Code
Arash Hatami
Arash Hatami

Posted on

How to launch Jekyll project in VS Code

There is many extensions and multiple ways to run/launch/debug a project using a simple F5 key! I always developed web projects with Jetbrains PHPStorm, But last week I had to do this with VSCode and the first thing I encountered was the simple execution of the Jekyll project.

You can simply run the whole project with this command :

bundle exec Jekyll serve
Enter fullscreen mode Exit fullscreen mode

But how can we execute this command with the F5 key? This is where it gets a little annoying. VSCode can debug projects when a supported extension installed and the problem is that Jekyll extensions can not run/debug project.

With a little effort and testing different ways, I found the best way to do that. We can combine Task and Launch configuration.

1- Create tasks.json in .vscode folder like this:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "jekyll",
      "command": "bundle exec jekyll serve",
      "type": "shell"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

This task will run the command for us.

2- Create launch.json file like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "firefox",
      "request": "attach",
      "name": "Attach",
      "preLaunchTask": "jekyll"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

We use Firefox launch configuration to open our browser, and also run a preLaunchTask before that!

Now you debug your project and open Firefox automatically by press the lovely F5 key 🤩

Top comments (0)