How to deploy and host a Jekyll website in Azure blob storage using a VSTS continuous deployment pipeline

Infrastructure as code

Posted by Carl-Hugo Marcotte on July 23, 2018
How to deploy and host a Jekyll website in Azure blob storage using a VSTS continuous deployment pipeline
Photo by Jilbert Ebrahimi on Unsplash

I’ve got a good idea from a reader, and I decided to move forward with it: Infrastructure as code.

In this “article” (if I can name it that), I give you the YAML code that you can use to automatically create the build definition by adding a .vsts-ci.yml file to your Jekyll website.

The cool thing about the “infrastructure as code” mindset is the fact that you can manage your infrastructure as if it was any other code. So you can use Git, VS Code or any other coding tool you like. It can also facilitate collaboration, and it does facilitate reusability (and in our case: sharing).

Unfortunately, only the build definition can be shared this way right now. However, Azure does support the deployment of infrastructure as code. You can create Azure resources using ARM templates. Sadly, at the time of this writing, Azure does not support “Static Website (preview)” in the ARM, so I can’t give you that code.

Table of content

If you are beginning to read the article series, I recommend that you start by the introduction and prerequisites, to make sure you read the plan first then get all the prerequisites set up right.

Articles in this series
Introduction and prerequisites
In this article, we draw the plan and start the project. We will create a Jekyll website and create a VSTS project with a Git repository.
Part 1: The VSTS Build
In this article, we create the Jekyll build definition in VSTS.
Part 2: Create Azure Blob Storage, and configure static website
In this article, we create an Azure Blob Storage and we configure it to be ready for the deployment phase.
Part 3: The VSTS Release
In this article, we create the release definition. At the end, every code push in `master` will be deployed automatically.
Part 4: Configuring a Content Delivery Network (CDN) Coming soon
In this article, we create the final piece of the puzzle, the way to access our Jekyll website using a custom domain over HTTPS. We also update the VSTS CD pipeline to account for this new addition.
Infrastructure as code You are here
In this article, I give you the YAML code that you can use to automatically create the build definition by adding a `.vsts-ci.yml` file to your Jekyll website. This can replace "Part 1: The VSTS Build".

The VSTS pipeline

Before going further, please make sure you activated the YAML preview feature.

Feel free to follow that link for more information about How to use YAML builds.

Build definition

queue:
  name: Hosted VS2017
  condition: succeeded()
steps:
- task: UseRubyVersion@0
  displayName: Use Ruby >= 2.4

- script: 'gem install jekyll bundler'
  displayName: Install Jekyll and bundler

- script: 'bundle install'
  displayName: Install Gems

- script: 'bundle exec jekyll build'
  displayName: Build

- task: CopyFiles@2
  displayName: Copy "_site" to staging directory
  inputs:
    SourceFolder: '_site'
    TargetFolder: '$(build.artifactstagingdirectory)'

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: _site'
  inputs:
    ArtifactName: '_site'

Release definition

You cannot use YAML for releases, and you’d need to apply some manual changes to the exported JSON, so I decided not to include it here. You will have to build the release definition yourself by following the steps described in Part 3: The VSTS Release

Next step

While I hope you enjoyed this little piece of code, now that the build definition is created (and automated), it is time to go back to the original series, to the article: Part 2: Create Azure Blob Storage, and configure static website.

Comments