Port Web Site to Azure SWA

Overview

Part of my move to Static Web Apps was to move some older sites. I hope to do some via Hugo, but the goal for now is to get off of the old Windows 2003 server which is serving ASP.net and even straight-up *.asp pages. The key is to use HTTrack to convert the sites to striaght HTML.

For my first try at this, I followed Microsoft’s quick start used the Azure extension in VS Code to create the static web app, but this does not allow you to specify the resource group. My preference is to create the SWA via Azure itself. The process below does not require the Azure extension in VS Code.

Prerequisites

• GitHub account
• Azure subscription
• Visual studio with Git and Powershell installed

Webcopy the site

Download and run HTTrack on the site you want to move to SWA. Tweak the output as needed.

Create GitHub Repo

• Log into GitHub
• Navigate to https://github.com/staticwebdev/vanilla-basic/generate
• Pick a name like swa-bec
• Private > Create repository from template

Clone GitHub Repo in Bash

• Open bash.
• Navigate to the appropriate folder for this GitHub repo, maybe Documents\repos.
• Enter this command in bash.

1

git clone https://github.com/andygett/swa-bec.git

Create the Azure Static Web App

• Navigate to Static Web App
  • Sign into Azure > Home > Create a resource > Search for Static Web App > Static Web App > Create
• I created a resource group called free-swa-eus2 for all my SWAs to make it easy to see if I’m getting close to the limit of 10. You can make a new resource group.
• Name swa-bec
• Choose the appropriate region.
• Enter the GitHub Organization, Repository and Branch information.
• Choose HTML in the Build Presets dropdown.
• Set App Location to /src.
• Set Output location to /src

  

• Click Review + Create > Create > Go to resource > URL - click on link

Prep and Copy Your Site to the src folder

• HTTrack creates the index.html file for you.
• Optional: delete the existing plain-vanilla index.html or rename to index-org.html on your local file system.

  

• Copy the HTTrack outuput with the desired content to the repo /src folder.

Make it Live

• Open the repo folder in VS Code
• Source control > Enter message > Commit > Sync
• Open your Azure SWA public URL to see your site.

Resource: Quickstart: Building your first static site with Azure Static Web Apps