Azure DevOps build pipeline for Jekyll

We have Git repository and Azure static website set up. It’s time to connect these two with Jekyll build and release pipelines to automate publishing from our machine to static website. This part of series focuses on Jekyll build pipeline.

Live demo and source are available! Live demo of Jekyll static blog is here: https://jekyll.gunnarpeipman.com. Source code with sample content is available at my Github repository gpeipman/JekyllBlog.

How build pipeline works

For Jekyll experiment I created new project on Azure DevOps and cloned it to my laptop from code repository. When I make commit to master branch then build pipeline is triggered and static blog is built by Jekyll. After successful build the release pipeline takes over and publishes generated files to Azure storage static website.

Build pipeline is actually simple. It’s just a virtual machine running Ruby. Using script commands Jekyll with related tooling is installed and run. If Jekyll build succeeded then _site folder is copied to build pipeline artifacts folder that is accessible for build pipelines.

Creating Jekyll build pipeline definition

I higly recommend you to create build pipeline from YAML-file hosted in repository. It’s easiest and fastest way to get it done. Here is the YAML file I’m using. Make sure you have it in your repository root before setting up Jekyll build pipeline.

# Ruby
# Package your Ruby project.
# Add steps that install rails, analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/ruby

- master

  vmImage: 'ubuntu-latest'

- task: UseRubyVersion@0
    versionSpec: '>= 2.5'

- script: |
    gem install jekyll bundler
    bundle install --retry=3 --jobs=4
  displayName: 'bundle install'

- script: |
    bundle install
    jekyll build
  displayName: 'jekyll'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
    SourceFolder: '_site'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1
    pathtoPublish: '$(Build.ArtifactStagingDirectory)'
    artifactName: site

Setting up Jekyll build pipeline

Here is step by step guide for setting up build pipeline. We start with creating new build pipeline.

  1. First step is creating connection with source code repository service. Although I’m using Azure DevOps repositories, it’s not the only Git service that is supported.

  2. From source code repository service we must check repository that Jekyll build pipeline listens for changes.

  3. In our case build configuration comes from YAML-file in repository.

  4. Now we have to specify branch and select build definition file. Notice that build from master branch is not the only option. If you use some other logic in your repository then you can choose your build branch instead of master.

  5. Review settings and if everything is okay then run the build pipeline.

If running succeeded then you should see the following build report with all steps being green.

Click on Artifacts button to see if there is artifact called “site” and open it. If everything went okay you should see file tree like shown on the following image.

Our Jekyll build pipeline is ready and it works.

Trying out publishing results. You can download build artifacts and upload these to Azure static website using Azure Storage Explorer to see how blog looks after building on cloud. You can access static website using its primary URL (it’s on static website settings page).

Wrapping up

It’s actually easy to create Azure DevOps build pipeline using YAML definition. We had to add few commands to get Jekyll installed and site built on build server. After successful build our static site is waiting in build artifacts folder. We can now write new blog post, push it to code repository and Jekyll build pipeline activates automatically.

Liked this post? Empower your friends by sharing it!
Categories: Azure

View Comments (2)

  • thank you for sharing the knowledge

    However I've just found that jekyll step fails to be executed today. This is strange since yesterday it has worked like a charm. I'm using the code you have shown with ubuntu latest image.

    The error is
    You have already activated jekyll-sass-converter 2.0.1, but your Gemfile requires jekyll-sass-converter 2.0.0. Prepending `bundle exec` to your command may solve this

    I've found that with "bundle exec" before "jekyll build" it works fine (as described https://github.com/jekyll/jekyll/issues/6227) like below

    - script: |
    bundle install
    bundle exec jekyll build
    displayName: 'jekyll'

Related Post