In this tutorial, we will deploy a Jamstack app on Azure Static Web Apps without using GitHub Actions.

Azure Static Web Apps is a service from Azure for hosting static web apps. You can create a static web app by writing HTML from scratch or by using a Jamstack static site generator and host the app on Azure Static Web Apps.

GitHub Actions is the default method for deploying Jamstack apps on Azure Static Web Apps. Azure also provides prebuilt GitHub Actions templates for many popular Jamstack static site generators to ease the deployment process.

But, you may wish to avoid using GitHub Actions because:

• Azure does not provide a prebuilt GitHub Actions template for your preferred Jamstack static site generator. And you do not want to create a GitHub Actions workflow yourself.
• You want to save some GitHub actions minutes.

SWA CLI is a tool developed by Microsoft for deploying apps on Azure Static Web Apps directly from your development workstation. You can use SWA CLI for any Jamstack static site generator or even for a static web site created with HTML from scratch.

Prerequisites

We will create a static web app with a Jamstack static site generator and deploy it on Azure Static Web Apps in this tutorial.

To complete this tutorial, you need:

1. Azure account with privileges to create a Static Web App.
2. Linux, Mac, or Windows computer with Node.js installed.
3. A static site generator installed on your computer. I will use Jekyll but you can use any static site genrator.

Create static web app

You can create a static web app by writing HTML from scratch.

But, in the era of Jamstack, writing HTML from scratch is counterintuitive. There are many Jamstack static site generators you can use instead,

Also, if you wish to create a blog as a static web app, a static site generator is a must. You cannot practically write blog posts in HTML.

In this tutorial, I will use Jekyll - a lightweight and easy to use static site generator.

If you are using a different static site generator replace the jekyll CLI commands with the corresponding CLI commands of your static site generator.

Install Jekyll and create web app cloud-web.

gem install bundler jekyll
jekyll new cloud-web

This creates a new Jekyll app in the cloud-web directory.

Switch to the directory and run the app.

cd cloud-web   
bundle exec jekyll serve

visit 127.0.0.1:4000 in your browser to view the new sleek blog that Jekyll has created, Add a new post to the blog by creating the file 2024-02-26-my-blog-post.md in the _posts directory.

---
layout: post
title:  "My first post"
date:   2024-02-26 15:25:52 +0530
categories: jekyll update
---

This is my first blog post.

# Where to host

This blog will be hosted on Azure static web app.

While jekyll serve is running refresh the browser window and the new blog post will apper on your web app home page.

Build the app to make it ready for deployment.

bundle exec jekyll build

Jekyll builds the app inside the _sites directory in the working path.

Create a Static Web App on Azure

Log in ot the Azure portal.

Click on the Create a resource button.

Search for static web app in the search field and click on the Static Web App widget that appears.

Click on the Create button.

In the Create Static Web App window select a preferred susbcription and a Resource Group. Choose the Free hosting plan. Under Deployment details, select Other as the source.

Click on Review + create button at the bottom.

On the next screen, review the parameters and click on the Create button.

It will take about 30 seconds for the app to initialize. Click on the Go to resource button after the deployment complete notification appears.

In the Overview page of the static web app, click on Manage deployment token tab.

Copy the deployment token to clipboard. We need this deployment token to autheticate with Azure from the SWA CLI.

Deploy app

Install SWA CLI.

npm install -g @azure/static-web-apps-cli

Use swa deploy from the working path of the development workstation to deploy the application.

swa deploy -d <deployment_token> -a _site/ -n cloud-web --env production

Set the parameters for swa deploy as below.

1. -d - Deployment token. Use the deployment token we copied in the previous step.

2. -a - Source directory of the static web site. The jekyll build command creates the web site in the _site directory in the working path. Some static site generators build the site in the public directory in the working path. Use the directory according to the static site generator you use.

3. -n - Name of the Static Web App we created on Azure.

4. --env - Azure static web app has a Preview and Production environment. We chose to deploy to the Production environment directly since this is a new app.

In the Azure portal go to the application Overview page. Click on View app in browser link at the top. Our new application will open with the URL somename.azurestaticapps.net in the browser.

Wrapping up

In this tutorial, we deployed a Jamstack app on Azure Static Web Apps using SWA CLI without using GitHub Actions.

This deployment method is suitable for solo developers or small teams. For a large team where multiple developers are commiting code to the same code base, using a decentralized deployment method like this could create conflicts as one developer can overwrite the changes done by another developer.

For such teams, a centralized deployment method like GitHub Actions is always the best option.