Hosting a Static HTML Website with Azure App Service in 3 Steps
Perquisite to follow up with the tutorial:
- Azure Account
- A prebuilt HTML website
What is Azure?
Microsoft Azure is a public cloud computing platform that offers a wide catalogue of services from Infrastructure as a Service to Software as a Service. This includes services such as hosting, developing and managing web application as well.
Register an account here at https://portal.azure.com/ . The platform is more forgiving to allow users without a credit or debit card to access its services within its free tier. Assuming you have just coded your website locally on your pc but now you want to share it online without paying any additional cost on hosting then Azure is the right place to get started.
Keep in mind that your whole project file should not exceed 1gb to maintain within the free tier.
Azure App Services
From this page onwards, you should be looking for App Services and select on the + Create New.
It is important when creating the web app that the runtime stack, & the sku and size configuration are .NET 5 (Early Access) and Free F1 respectively. Name the website under instance details to obtain a url as follows <yourwebsitename>.azurewebsites.net. Select the region closest to your location and proceed to Review and Create.
Next you will need to navigate to the menu button on the left and look for Deployment Center (preview) and select FTPS credentials as shown.
Key Information you will need from this page are FTPS endpoint, Username and Password. This will be needed in the next step to gain access to the directory.
File Transfer Protocol (FTP)
What is FileZilla?
FileZilla is an application that allows you to upload and download files from a remote host (Azure) using File Transfer Protocol. FTP is a protocol for transferring files across the internet in a quick manner. To proceed to the next step you will need FileZilla Client at filezilla-project.org.
The information obtain from the FTPS credential will be inputted in the login credential on FileZilla Client. The local site represents the file on your PC and the remote site represents the file on your Azure Web App. Navigate to the site/wwwroot on the remote site and transfer your static webpage file to the folder on the remote site. The main page of your website should be renamed to hostingstart.html.
Lastly go to Settings>Configuration and ensure the FTP state is set to FTPS only and the stack setting is .NET. Now you can go to <yourwebsitename>.azurewebsites.net to view your hosted website.
Voila!! That's about it. In my next tutorial I will demonstrate how to link a GitHub repository together with your website code so stay tuned.