A nice and easy one this week. Today is a quick run through on how I configured my static web app to deploy straight from GitHub.

We're also doing all of this from the cozy embrace of ClickOps! So put on some jazz, kick up your feet and let's get started!

1. Create a new Repo for your website.

The below settings keep it simple. Set to private if preferred.

2. Spin up your Static Web App, select the repository you've just created.

If you're in a private tab, you'll need to log into GitHub.

3. Head over to your repo and click on the Actions button.

4. You'll notice your first run has failed.

If we dig down we'll find its due to a missing index.html file.

This can be avoided by pre-loading your repo with your index.html file before we connect it to the SWA but... even if we're doing things the easy way today, its still good to see what a fail looks like.

5. Fix this by uploading your index.html

This will trigger the workflow to start another deployment. Give it a few moments and it should go from a yellow pending state to a green tick!

6. Return to your Static Web App resource

You'll notice your website's status has gone from Waiting for Deployment to Ready

7. Click on Visit Your Website and you can see its already up!

And while we're riding this Victorious Wave, you'll notice we're already setup for HTTPS! This'll stay secure even after adding your own custom domain.

Bonus:
Azure Static Web apps support preview environments by default. To use them, perform a pull request instead of a commit. The workflow will then deploy a preview environment.