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

Part 2: Create Azure Blob Storage, and configure static website

Posted by Carl-Hugo Marcotte on July 10, 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

Lets recap: we have a Jekyll website saved in VSTS/Git, with a build that starts automatically each time someone pushes code to the master branch.

From there we need to deploy our website in the cloud! However before automating that, we need to create some resources in Azure. To do so, let’s use the Azure portal.

The Azure Portal is easy to use, and I am not even sure if the other tools support the Static website (preview) option yet.

If you don’t have an Azure account, you can start a free trial here: https://azure.microsoft.com/en-us/free/.

This article is very brief and was extracted on its own only to remove some clutter from Part 3: The VSTS Release.

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 You are here
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
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".

Create a resource group

Resource groups are an excellent way to keep your resources organized. I named mine JekyllOnAzure.

Create a new resource group

You can also create the resource group at the same time as the Storage Account if you prefer.

Create a Storage Account

We will use the blob storage account to store our files in the cloud (the build artifact: _site). The storage account will also serve as the website host (or “server” if you prefer).

From the resource group (or somewhere else in the Azure portal):

  • Click Create resource.
  • Search for storage
  • Select Storage account - blob, file, table, queue
  • Click Create

New Storage account - blob, file, table, queue

In the Create storage account blade, make sure you:

  • Select StorageV2 (general purpose v2)
  • Choose an adequate replication strategy for your website (I chose LRS for this demo since I don’t need redundancy).
  • Choose the right performance option (Standard should be fine for most website).
  • Choose your previously created resource group or create a new one

You can also enable Secure transfer required if you want to force HTTPS (this can be changed later). I recommend that you activate this option at some point.

New Storage account - blob, file, table, queue

Once Azure completes the creation of the Storage account: navigate to the new resource blade.

Configure the Storage Account

From the storage account you just created:

  1. Click on Static website (preview)
  2. Click Enable
  3. Enter index.html as the Index document name
  4. Enter 404.html as the Error document path. The 404.html file is created by Jekyll new, if your 404 page is not that one, set your own custom one’s path here instead.
  5. Click Save

Enable Azure Storage static website

Note that, as of this writing, not all regions support the static website (preview) option. I used Canada (central).

At this point, Azure should have created a $web container in the Storage Account. That’s where your website files should be uploaded.

Testing the setup

Using Azure Storage Explorer or the Storage Explorer (preview) blade, in the $web blob container, let’s upload an index.html file to test this out.

Azure Storage Explorer is a helpful tool that I recommend you to install if you plan on using Azure Storage.

There is also a Visual Studio Code plugin, for you VSCode enthusiasts out there, named: Azure Storage that does more or less the same thing from inside VS Code.

Here is the code of the index.html page I uploaded:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <h1>WOOT!</h1>
    <p>It is working...</p>
</body>

</html>

Once the file is uploaded, navigate to your Primary endpoint (you can find the URI in the Static website (preview) blade), and voilà, you should see your test page:

Azure static website test page with Edge

Next step

It is now time to move to the next article: Part 3: The VSTS Release.

Comments