Back to basics: Building static website using Jekyll in VSTS

Jul 16, 2018 |Utkarsh Shigihalli |2 min read

DevOps Build

Twitter Facebook Linkedin Email WhatsApp

---

We host this blog as a static website usingJekyll. 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 checkhere and you need fewprerequisites to build Jekyll website on Windows.

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

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

• 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 addUse Ruby Version task and install the latest version. Although VSTS automatically adds the task withAdd to PATH checked, make sure it is checked.

• Next, the Jekyll blog we created has something called asGemfile which contains the site’s dependencies. This is similar to NPM’spackage.json or Nuget’spackages.config. We need to install the dependencies. But before we install the packages we need to install a tool calledbundler which makes installing packages easier (again this tool is similar tonpm ornuget). So to install bundler, we add a simpleCommand Line task and executegem install bundler. We are installing the bundler usinggem which is a tool withinruby we installed earlier.

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

• Next step is to build the Jekyll website usingjekyll 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.ArtifactStagingDirectory) using-d parameter.

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

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

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

• Perfecting Continuous Delivery of NuGet packages for Azure Artifacts
• Azure Pipelines - Git checkout step fails with cannot lock ref error
• View branch policies of your Azure DevOps repository using Azure CLI
• How I built a dashboard in Azure Portal to track Gitflow feature branches
• Installing ASP.NET Core Site Extension for Azure App Service Using ARM template

• 

  Utkarsh Shigihalli

  Microsoft MVP, Technologist & DevOps Coach

• 

  Tarun Arora

  Microsoft MVP, Author & DevOps Coach at Avanade

Do you like our posts? Subscribe to our newsletter!

• 
  Exploring GitHub Advanced Security for Azure DevOps

• 
  Use a single repository for multiple wikis in Azure DevOps

• 
  Creating KEDA Scalar in Azure Container Apps using Azure ...

• 
  Installing Docker without Docker Desktop on WSL2

• 
  Trigger a Netlify build every day using GitHub Actions