Looking to get started in Azure Static Apps with a basic “Hello World” site and then starting to build the site of your dreams? Look no further. In this blog we’ll talk through how to provision the environment and get your static site going. Here is what we’re building:

Let’s get the pre-reqs out of the way. To get going, you need to complete the following:

• Install Visual Studio Code on your device
• Install Git via Visual Studio Code on your device.
• Setup a GitHub personal account (or use your corporate one)

If you do NOT have a corporate GitHub account, setup a company account as a personal company. Setup a GitHub company account and associate your user. The reason for this is because the personal account does not let you use the GitHub hosted runners that we’ll use for automating the deployment process into the Azure Static Site.

Navigate to your personal GitHub profile, select organizations, then create a new organization:

Create your new organization, where your new repo will live:

Create a new GitHub repo under the organization, in this case Lasnoski. Select the “New Repository” button and create your repo. You can see an already created one below:

Create your repository, calling it whatever you want, such as “Hello World”:

Proceed to connect Visual Studio Code and close your Git Repo.

Copy the location of your Git Repo into this field:

Choose a location for your Repo locally:

Proceed to open the repo

Now, we’ll move on to creating Hello World. To do so, create index.html:

Create the “hello world” content:

Commit the changes:

Save all and commit:

Indicate the type of save:

Push to source control

You will now see this online in the repo:

Now we need to create our static site. To do so, navigate to Azure and create a Static Web App

Create the Static Web App, being careful to name resources in an understandable way. You will need to login to your GitHub account. Do not bypass that step:

Now, you will have a static site created and GitHub will attempt to deploy your code to the Static Site. This should succeed in the first 10 minutes. I’ve occasionally had this fail, but after deploying again (retry) it has worked. You will see in your Hello World in GitHub Actions the deployment happening:

After the deployment has completed (green check box), navigate back to your resource in Azure. You’ll see the URL listed. Check out the site:

There you go! Check out your completed site: