How to create your personal blog with Gatsby & Azure Static Web Apps – Azure Tips & Tricks
Tags: azure, javascript, github, cloudskills
Published: 2021-06-25 17:02:34

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

[Azure Static Web Apps][5] 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][6] 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][7] to deploy your blog to the SWA service. You can create your SWA deployment with [Visual Studio Code][8], [the Azure portal][9], or even [Azure CLI][10].

{% youtube XXD3SPxd96I %}

I'll walk you through the following:

*   [00:00:26 - How to get started with GatsbyJS][11]  
*   [00:01:10 - Clone your code from GitHub][12]   
*   [00:2:24 - Build your blog with npm][13]      
*   [00:02:52 - Previewing your blog locally][14]  
*   [00:03:39 - Create your SWA in the Azure Portal][15]  
*   [00:06:11 - Review how GitHub actions deployed your blog][16]  
    
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][17]
[Microsoft Learn: Azure Static Web Apps][18]
[Azure Static Web Apps documentation][6]
[Quickstart: Building your first static site with Azure Static Web Apps][8]
[Quickstart: Building your first static site in the Azure portal][9]
[Quickstart: Building your first static site using the Azure CLI][19]
[Set up local development for Azure Static Web Apps][20]
[Tutorial: Publish Azure Static Web Apps with Azure DevOps][21]

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!

 [1]: https://aka.ms/StaticWebAppsTips
 [2]: https://youtu.be/w-tLZjO6XMc
 [3]: https://youtu.be/l3SBq7L13Mk?list=PLlrxD0HtieHgMPeBaDQFx9yNuFxx6S1VG
 [4]: https://youtu.be/A-eALdCkpTw
 [5]: https://cda.ms/2c9
 [6]: https://cda.ms/2c1
 [7]: https://cda.ms/2c6
 [8]: https://cda.ms/2c2
 [9]: https://cda.ms/2c3
 [10]: https://cda.ms/2c4
 [11]: https://youtu.be/IZbcpUIke8s?list=PLlrxD0HtieHgMPeBaDQFx9yNuFxx6S1VG&t=26
 [12]: https://youtu.be/IZbcpUIke8s?list=PLlrxD0HtieHgMPeBaDQFx9yNuFxx6S1VG&t=70
 [13]: https://youtu.be/IZbcpUIke8s?list=PLlrxD0HtieHgMPeBaDQFx9yNuFxx6S1VG&t=144
 [14]: https://youtu.be/IZbcpUIke8s?list=PLlrxD0HtieHgMPeBaDQFx9yNuFxx6S1VG&t=172
 [15]: https://youtu.be/IZbcpUIke8s?list=PLlrxD0HtieHgMPeBaDQFx9yNuFxx6S1VG&t=219
 [16]: https://youtu.be/IZbcpUIke8s?list=PLlrxD0HtieHgMPeBaDQFx9yNuFxx6S1VG&t=371
 [17]: https://github.com/gatsbyjs/gatsby-starter-blog
 [18]: https://cda.ms/2c0
 [19]: https://cda.ms/2c5
 [20]: https://cda.ms/2c8
 [21]: https://cda.ms/2cb