Collaboration Not Competition

Hosting a Gatsby blog using Azure Static Web Apps

May 22, 2020

As a big user of Azure App Service it was really exciting to see the announcement of Azure Static Web Apps at Build this week. This is a service that enables us to host a static web app really quickly and provides all of the following benefits:

  • Static content available globally on CDN
  • Automatically sets up a GitHub action to release changes when a branch is updated
  • Custom domains and SSL are simple to setup - provisioning and renewal of the SSL ceritificate is completely automated
  • Deploy a serverless API using Azure Functions as part of the static app release

More information and docs can be found here for Azure Static Web Apps. The Microsoft documentation is great and if you just want to set up a standard static site to see how things work then take a look at the Azure Static Web Apps documentation. However, if you want to set up something a bit more useful then the following takes you through the setup of a Gatsby site using the blogging template.

I have been using GitHub pages and Jekyll to host my blog for about a year but wanted to take a look at this new service and see how quickly I could get things set up. I chose Gatsby as the static site generator rather than Jekyll as I had been using the built in support from GitHub that provides a Ruby environment to build the static site. Rather than install Ruby locally I thought I would also use this opportunity to investigate Gatsby which is installed using NPM and is based on React and GraphQL.

To get my blog set up I did the following:

Gatsby Setup

  1. Install the Gatsby CLI

npm install -g gatsby-cli

  1. Create a new blog using the starter template

gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog

  1. Switch to the new directory that is created and startup the gatsby development server

    cd my-blog

    gatsby develop

You will then be able to view the new blog in your browser using http://localhost:8000

  1. To change the name of the blog and update other site meta data open the gatsby-config.js file found in the root folder.
  2. The default template contains some example posts. To create a new post (and delete the defaults) go to the “content\blog” folder and add a new folder for each post you want to add. Within the folder add an index.md file for your markdown. (Gatsby markdown reference can be found here). Any images that you want to appear in the post can be included in the folder and referenced in the markdown, the default posts show examples of this.

GitHub Setup

Next we need to create a GitHub repository and add the blog code to it.

  1. Go to GitHub.com and sign in or sign up for a free account
  2. Create a new repository
  3. Open Git Bash
  4. Use cd to navigate to your Gatsby blog folder
  5. Initialise the GIT repository locally

git init

gir Add -A

git commit -m "initial commit"

  1. Add the GitHub repository as an origin

git remote add origin https://github.com/<YOUR_USER_NAME>/<YOUR_REPOSITORY_NAME>.git

  1. Push the code to the repository

git push --set-upstream origin master

Azure Static Web Apps Setup

Now that we have created the Gatsby blog and have added it to a GitHub repository we are ready to host it on Azure Static Web Apps

Considering this service has just been announced in preview the Microsoft documentation is brilliant with specific tutorials for several static site generators including Gatsby. Simply follow these instructions to create your Static Web App

The Final Result

Once the Static Web App has been created and deployed using the GitHub Action you will be able to view the site using the randomly generated url available from the overview page. To finish things off I then configured a custom domain. (Setup a custom domain in Azure Static Web Apps)

The final result is this site that you are reading - Collaboration Not Competion

In total it took less than an hour to setup the Gatsby site and move my content across…mostly because I didn’t have much content! The deployment to Azure Static Web Apps and setting up the custom domain only took a few minutes. The service is currently free in preview but I am hoping that for the amount of traffic my blog gets it will continue to be free once it becomes generally available. This is a great service and I’m looking forward to seeing how it develops.