How to create your personal blog with Gatsby & Azure Static Web Apps – Azure Tips & Tricks

Jay Gordon

June 24th, 20210 1

Recently the Developer relations came together to create a video series to get all the essential knowledge to move your project forward with Static Web Apps. This series provides you with 16 different cookbooks to begin building applications using Azure Static Web Apps. You’ll learn what the SWA service is, what tools you’ll need to work with it, how CI/CD fits in, and much more.

Azure Static Web Apps or SWA is a modern web app service that offers streamlined full-stack development from source code to global high availability.

Benefits include:

Productivity from local development to GitHub and Azure DevOps native workflows for CI/CD
Managed global availability and reliability for static content
Dynamic scale for serverless APIs like Azure Functions
Streamlined management including custom domain configuration, authentication, and authorization
A seamless developer experience and CI/CD
Tailored developer experience that includes integration into Visual Studio Code with an extension

In this video, I show you how to get started publishing your own personal blog to SWA. Static site generators like Gatsby provide you with a framework for your static content without requiring you to write all of the code. You’ll get a professional look and feel without the overhead of writing the React or CSS associated with your site. With Gatsby you can put your main site content in Markdown and then watch as it renders your site into all the HTML and JavaScript needed.

Azure Static Web Apps allows you to build modern web applications that automatically publish to the web as your code changes. You can rub some DevOps on your Gatsby by utilizing the built in CI/CD process in the SWA service. You can provide your GitHub login or implement Azure DevOps to deploy your blog to the SWA service. You can create your SWA deployment with Visual Studio Code, the Azure portal, or even Azure CLI.

I’ll walk you through the following:

Want to get started? Here are some links you can follow in order to build your own blog using SWA:

Gatsby Starter Blog template on GitHub
Microsoft Learn: Azure Static Web Apps
Azure Static Web Apps documentation
Quickstart: Building your first static site with Azure Static Web Apps
Quickstart: Building your first static site in the Azure portal
Quickstart: Building your first static site using the Azure CLI
Set up local development for Azure Static Web Apps
Tutorial: Publish Azure Static Web Apps with Azure DevOps

Now that you’ve got this video and all the documentation, a template, and the docs to build your website, get to work! Send us what you’ve built using the SWA service in the comments below!

Microsoft Learn: Azure Static Web Apps