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
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-cliIf you have Yarn on your computer, you can instead install the Gatsby CLI by running the command:
yarn global add gatsby-cli
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.
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.
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.
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.
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.
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.
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