Compile your Jekyll based site from Sublime Text 3

Spend a little bit more time being productive.

0 Comments

My time with Sublime is great, but you still need to switch windows from time to time. Here is how to build a Jekyll site in Sublime Text 3.

Build with Sublime Text?

Sublime Text allows you to setup Build Environments which can be accessed via the Ctrl+Shift+B hotkey. This is great news for Jekyll users as you can build your site right from inside Sublime, which can save you a lot of time. Note: For Mac users out there, the shortcut is Command+Shift+B. Now I do realize that there are a number of different build options with Jekyll, but below you will find a small snippet you can use to access what I consider the most used commands.

Build

This option triggers the site to be built and placed in the compiled directory, normally _site.

Build and Server

This option triggers the site to be build and also starts the build in web server, this is great for checking if your code is doing what you expect. When you are ready to stop the server just press Ctrl+Break, or from the menu choose Tools > Cancel Build.

Copy Site to Live Directory

This allows you to copy your built site to another directory, likely the directory that will house the final site to host or upload to your actual web server.

Code

{
    "cmd": ["jekyll","b"],
    "shell": true,
    "working_dir": "${project_path:${folder}}",
    "selector": "source.markdown",

    "variants": [
        {
            "name": "Copy site to Live Directory",
            "cmd": ["cp", "-fR", "SOURCE_DIR", "DEST_DIR"],
            "working_dir": "${project_path:${folder}}",
            "shell": true,
            "windows": {
                "cmd": ["xcopy", "SOURCE_DIR", "DEST_DIR", "/C", "/S", "/Y", "/D"]
            }
        },
        {
            "name": "Build and Serve",
            "cmd": ["jekyll","s"],
            "shell": true,
            "working_dir": "${project_path:${folder}}",
            "selector": "source.markdown"
        }
    ]
}

Where do I put this code?

With the Sublime application open click on Tools > Build System > New Build System. This will open a new document in Sublime Text named untitled.sublime- build, paste the above code into the file and save it with a logical name like Jekyll.sublime-build. Once saved the option should be available to you in the build menu or in the hotkey menu by pressing Ctrl+Shift+B.

Corrections or Changes

If you think something is not right or should be changed, feel free to comment or submit fixes on the Gist I wrote.

- By: Posted on:

Comments

Small ad here
Select a size at which to preview the size