Port Web Site to Azure SWA
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.
Download and run HTTrack on the site you want to move to SWA. Tweak the output as needed.
- Log into GitHub
- Navigate to https://github.com/staticwebdev/vanilla-basic/generate
- Pick a name like swa-bec
- Private > Create repository from template
- Open bash.
- Navigate to the appropriate folder for this GitHub repo, maybe Documents\repos.
- Enter this command in bash.
git clone https://github.com/andygett/swa-bec.git
- 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-eus2for 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.
- Choose the appropriate region.
- Enter the GitHub Organization, Repository and Branch information.
HTMLin the Build Presets dropdown.
- Click Review + Create > Create > Go to resource > URL - click on link
- 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.
- Open the repo folder in VS Code
- Source control > Enter message > Commit > Sync
- Open your Azure SWA public URL to see your site.