Static sites are useful for a variety of reasons. They are quick and easy to deploy, secure, and cheap to host. Gatsby is a framework that help you generate a static website, and allows you to quickly and easily install plugins that add functionality.

In this article, we will be demonstrating how to set up and deploy a Gatsby site to Azure, as well as cover installation of a few plugins that may be useful.

With the power of Gatsby, your site can look this good!

Setting Up Development Environment

 Node.js

To begin with, we want to install Node.js, a JavaScript runtime environment. If you are on a Mac, you can download and use Homebrew to install Node. Otherwise, click here to download an installer.

Gatsby CLI

Once we have Node.js installed, we want to install the Gatsby CLI(command line interface). The Gatsby CLI will help us develop our Gatsby site, and provides a variety of useful functions.

Node should come with npm installed, which allows us to install the Gatsby CLI by typing the following command into our terminal environment:
npm install -g gatsby-cli If you have Yarn on your computer, you can instead install the Gatsby CLI by running the command:
yarn global add gatsby-cli

IDE

Next, choose the IDE of your choice to edit code in! In this tutorial, we will be using Visual Studio Code, but any IDE that can edit JavaScript should work fine.

Azure Storage Account

In order to deploy a site to Azure, we’ll need an Azure Storage Account. This links to Microsoft documentation on how to create a storage account.

Once the Storage Account has been set up, we’re going to create a $web folder where we will be uploading our Gatsby site. We can do this by first going to the Containers option within the storage account, and then clicking the plus symbol to add a container. Name this container “$web” and give it private level access.

Next, we’re going to want to know the address of the endpoint so that we know where to deploy the site to. While in the storage account on the Azure portal, there should be an option on the left side of the screen called Endpoints. Select this option and look for the primary endpoint under “Blob service”.

This endpoint with “/$web” appended to the end of it will be where we upload our website.

AZ Copy

In order to deploy our Gatsby site to Azure, we are going to set up AZ Copy, a command line utility that helps us copy files to our Azure storage account.

This link will take you to the documentation for AZ Copy, as well as download links to put the AZ Copy executable onto your computer.

IMPORTANT: In order to use AZ Copy without appending a shared access signature (SAS) to each copy command, you must log into AZ copy. Follow the steps listed here, and make sure that you have the necessary permissions.

Code

Finally, we want to have a Gatsby site that is ready to deploy to Azure.  If you are interested in creating your own Gatsby site from scratch, I highly recommend following this tutorial on Gatsby’s site. Otherwise, this is a link to a fully setup Gatsby blog site that we can play around with. We will be using this site in our demonstrations, but everything we do in this blog can be done to any other Gatsby site.

Download the code from the Github repository and open it in your IDE.

Getting Gatsby Site Ready

Now that we have the Gatsby site open, let’s run a few commands to make sure the site is properly set up.

First, run gatsby info in your terminal to make sure that the Gatsby CLI is installed in your computer. If this fails, refer back to the setup section above.

Next, we need to install Gatsby packages for the site. If you are using npm, run the command npm install in the root directory of your project. If you are using Yarn, run the command yarn install in the root directory of your project.

What you should see if running the Yarn command

Now that we have installed the Gatsby packages, we can use the command gatsby develop in order to spin up a local version of the blog site that will be hosted on localhost:8000.

What your terminal should look like after running gatsby develop What you should see at localhost:8000

Deploying site to Azure

Now that we know the Gatsby site works, we can start working on deploying the site to Azure. In order to simplify the process, we will be writing a shell script that will upload our developed site to our blob.

In order to upload a site to Azure, we first need to run the gatsby build command in our terminal. This builds a production ready version of the site that we can upload.

What gatsby build should look like

In order to make sure that the site has been built properly, we can run gatsby serve in the terminal to spin up a copy of the site at localhost:9000.

The build command puts all the production ready files into the “public” folder of our site. This is the folder that we are going to upload to Azure to display our site.

Public folder where our production ready website resides We will now bring up our terminal once again, and use AZ Copy to upload the public folder. This where that endpoint we wrote down earlier comes back into play. Enter the command
azcopy sync './public' '(YOUR PRIMARY ENDPOINT HERE)/$web' --recursive

This will upload the public folder to the storage account.

In order to check if the site is up, we will go back to the endpoints option in our storage account and look for the Static Website section. There, we will copy the primary endpoint and paste it into our browser. We should see our site up and active at that URL.

Deploying a Gatsby site to Azure is as easy as that! Before we finish, let’s go over one extremely useful feature for Gatsby: plugins.

Installing Gatsby Plugins

Now that we have uploaded a site, let’s look at installing Gatsby plugins. Plugins are a very useful feature of Gatsby, and allows us to quickly and easily install different features into our website. For this demonstration, we will be installing the Google Analytics plugin into our site. Google Analytics gives us information about our web traffic that can be invaluable for static websites.

First, we’re going to want to install the plugin. There is a whole library of Gatsby plugins, but we only want the gtag plugin, linked here. In order to install the gtag plugin, we’ll run the command npm install gatsby-plugin-google-gtag for npm, or yarn add gatsby-plugin-google-gtag for yarn in the root of the project.

Next, we’ll add the dependencies to our gatsby-config.js file, found in our project root.

What your gatsby-config file should look like