Back to basics: Building static website using Jekyll in VSTS

Jul 16, 2018 | Utkarsh Shigihalli

DevOps Build

We host this blog as a static website using Jekyll. This allows us to write our blog posts in markdown syntax and we get to version control our files.

Jekyll is a popular static site generator and from the day we have implemented it, we have thoroughly enjoyed maintaining it. In this blog post I will show you how to build a simple Jekyll website using VSTS.

For this post, I already have a Jekyll blog committed to my VSTS repo. If you would like to know how to create a Jekyll blog for yourself check here and you need few prerequisites to build Jekyll website on Windows.

So my sample blog post is running fine locally and is committed to VSTS repository.

Blog Local

  • The first step is to new create a new build definition and map the repository.

Repo Mapping

  • Next, we will need to install Ruby on the agent machine. With VSTS that is easy as adding a task. So click the + sign and search for Ruby. You will add Use Ruby Version task and install the latest version. Although VSTS automatically adds the task with Add to PATH checked, make sure it is checked.

Add Ruby

  • Next, the Jekyll blog we created has something called as Gemfile which contains the site’s dependencies. This is similar to NPM’s package.json or Nuget’s packages.config. We need to install the dependencies. But before we install the packages we need to install a tool called bundler which makes installing packages easier (again this tool is similar to npm or nuget). So to install bundler, we add a simple Command Line task and execute gem install bundler. We are installing the bundler using gem which is a tool within ruby we installed earlier.

Install Bundler

  • Once, the bundler is installed we can now call bundle install which is command to install all the dependencies including Jekyll for our website.

Install Packages

  • Next step is to build the Jekyll website using jekyll build command. This command will convert the markdown’s and apply the templates and generate the static website. We are setting the destination directory to be $(Build.ArtifactStaginDirectory) using -d parameter.

Jekyll Build

  • Last step is to publish the generated site as artifact. So we add a Publish Artifacts task and publish it.

Publish Artifact

That’s it, it should be available as a published artifact.

Published Artifact

As you can see, VSTS is a great platform which works with your tools and makes super easy from building a complex applications to the cloud to building a simple static website.

About author
Author Image
Utkarsh Shigihalli
Utkarsh is passionate about software development and has more than 12 years of work experience in the areas of Azure, VSTS, C# and TypeScript. He has developed numerous extensions for Visual Studio and Visual Studio Team Services. He is currently working as a Consultant in the United States.
Comments