Hosting a Static Website on Azure Blob Storage

Binary Large Objects, or simply BLOB, is a storage service offered as part of Microsoft Azure. It is used to store and retrieve BLOBs, commonly known as files.

It simplifies the process of uploading, sharing, and managing online documents (files) along with off-loading static content from your web server to reduce the load. Besides, it is also possible to host static sites on Azure Blob Storage.

In this document, we will discuss how we can deploy a static Gatsby site on Azure Blob using the VS Code Extension and GitHub Actions methods.

Prerequisites

Deploying a website on Azure Blob involves completing the following steps:

  1. Create and configure your account in Microsoft Azure Blob Storage
  2. Create a production Gatsby build
  3. Install Azure storage extension
  4. Deploy the website on Azure Blob using the VS Code extension
  5. Deploy the website using GitHub actions

Note: Before we start, it is assumed that you already have a website running on the localhost with Gatsby as the front-end and Contentstack as the back-end. If you have not created the website yet, we suggest you follow the steps mentioned in the Build a Sample Website Using Gatsby and Contentstack and get your website ready before hosting it on Azure Blob.

Create and Configure your Account in Microsoft Azure Blob Storage

If you followed the above tutorial, you should have your website running on localhost, port 8000. Now that it is ready, let's deploy it on Azure Blob. For that, you need to create an account in Azure Blob.

  1. Go to the Microsoft Azure page and click on Start free. For this exercise, we are using the Start free option. You can opt to purchase their plan by clicking on Or buy now.
  2. On the next screen, you will be asked to log in. If you already have an account, just log in with your credentials. Else, click on Create one.
  3. On the next screen, it will ask you to create a username. You can also create your account by providing your phone number or by creating a new Microsoft email address.

    Note: It will not accept a work-related email address. Only your personal email address such as Gmail, Outlook, or Hotmail will be accepted.

  4. You will then receive an email with a verification code. Once your account is created, it will ask you to provide further information to safeguard the account. Follow the onscreen instruction and complete the account setup.
  5. After you set up your account successfully, you will be taken to the Azure Portal as shown below:

    Blob Portal.jpg

  6. Click on Storage accounts and create your storage account with the following configuration:

    Storage configuration.jpg

    Note: You need to enter your own unique name for the storage account. The storage account names are unique across all of Azure. In our demo, we have used gatsbyv9

  7. In the above configuration, the Resource group is a collection of operations. You can either create one by clicking on Create new or select from the list if you have already created a resource group.
  8. Then, click on Review + create. Verify the settings once and click on Create. It will then start its deployment process and you will see the following console:

    Deployment Successful.jpg

  9. As shown in the above image, click on Go to resource. Locate the Static website link on the left navigation panel and click on it.
  10. By default, the static website option is disabled so enable it. Enter index.html as the Index document name and 404.html as the Error document path as shown below:

    Static website option.jpg

  11. Once done, click on Save. You will get two links: primary endpoint and secondary endpoint. Make note of the Primary endpoint as we will be hosting our static website at this endpoint as shown below:

    Endpoints.jpg

With these steps, we have configured the storage account in Azure Blob and have generated the link to host our static website. Let's move ahead to creating a build in Gatsby.

Create a Production Gatsby Build

You are now ready to create a production build of your website. You must have also downloaded the code from the sample app page while creating the website using Gatsby and Contentstack. Now follow the steps given below:

  1. Open your terminal and move inside the project root directory that you have downloaded from the above link.
  2. Then staying inside the project root directory, run the following command:

    gatsby build

This will output a production build of your website into the public folder created inside the project. Open the project in any code editor of your choice, you will see the public folder as shown below:

Gatsby_build.jpg

Install Azure Storage Extension

Let's now install the Azure Storage extension in VS Code. This extension simplifies the management of Azure Storage. By using this extension for VS Code, we will be able to access our Blob containers.

  1. The easiest way to install the extension from within the VS Code Editor. Open the VS Code Editor, select the Extension option, and search for Azure Storage as shown below:

    Extension Installation.jpg

  2. Alternatively, you can install the extension from the Azure Marketplace. But for that, you first need to install the VS Code Editor on your machine. Download it, if you don't have it installed.

Deploy the Website on Azure Blob Using the VS Code Extension

The production Gatsby build is already there so you have the public folder ready. Now follow the steps given below:

  1. Right-click on the Public folder in VS code and select Deploy to Static Website as shown below:

    Deployment.jpg

  2. If you are not logged into Azure already, it will prompt Sign in to Azure as shown below:

    Signin prompt.jpg

  3. You will see a dialog at the bottom right, asking you to load a web page and enter a device code. Click on Copy & Open and enter the code.

    device code.jpg

  4. The web page will show that you are trying to link your Azure device to VS Code. Click on Continue and login to Azure if you are not logged in already. If everything works correctly, you should see a page confirming that you have signed in:

    confirm signi-n.jpg

  5. Now return to the VS Code, select your subscription, and then your storage account.
  6. Selecting the storage account will begin the deployment. If you have previously deployed, you will see a dialog asking if you want to delete your files and redeploy them.

    In a few seconds, you will see a message at the bottom right of the VS Code confirming that your website has been deployed!

    deployment complete.jpg

With these steps, we have completed the deployment of your static site using the VS Extension. Let's now see the alternate way of deploying your website using GitHub Actions.

Deploy the Website Using GitHub Actions

To use this method of deployment, we have created and configured the account in Azure Storage. We have also downloaded the code from the sample app page. Let's now use the following steps: 

  1. Open the terminal and move inside the project root directory.
  2. Then, run the following commands: 
    1. git init
    2. git add .
    3. git commit -m "first commit"
    4. git remote add origin <ORIGIN_URL_HERE>
    5. git push -u origin master
  3. In the above command (2.4), the origin URL can be obtained by creating a new repository in GitHub as shown below:

    GitHub repo.jpg

    Note: If running the git remote add origin command results in the "Fatal: remote origin already exists" error, then try the git remote set-url origin <YOUR ORIGIN URL> command, where you need to provide the name of the origin URL in <YOUR ORIGIN URL>.

  4. After running the above commands, your code will be deployed on the GitHub repository that you have created. Now we have our Azure Storage Account setup and our Gatsby site pushed to our GitHub repository.
  5. Now go back to your Azure portal, open your storage account, and click on Access keys from the left navigation panel. Copy the first Connection string as shown below:

    Access keys.jpg

  6. Now go to your GitHub repository, click on Settings > Secrets. Enter BLOB_STORAGE_CONNECTION_STRING as Name, paste the Connection string as Value, and click on Add secret as shown below:

    Adding Secrets.jpg

    This will make it available for us to use as an environment variable in our GitHub Actions workflow.
  7. Click on the Actions and then Set up this workflow:

    Setup workflow.jpg

    This will add a .github/workflows/main.yml file to your repository.
  8. Open a live code editor within GitHub. Remove everything from the code editor and paste this code inside it:

    paste this code.jpg

  9. After copying and replacing the code, click on Start commit.
  10. In the Commit new file window, provide the necessary details and click on the Commit new file button.
  11. Now clicking on the Actions tab in GitHub, you should see your workflow running and successfully deployed to Azure Blob Storage.
  12. If you visit the Static website's primary endpoint that we created in Azure earlier, you should see your Gatsby site running.

Additional Resource: You can also refer to our detailed guide on how to host a website on Azure Blob Storage.

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

top-arrow