Website hosting and deployment is a necessary aspect in overall web application development. It has become more popularized and simplified in the advent of new generation deployment sites. A wide variety of cloud infrastructure services also offers these features with additional benefits such as monitoring and scalability. Here, we will be exploring how to deploy a static website written in plain HTML & CSS on Microsoft Azure.
This article is a buildup from a similar article which illustrated how to deploy backend servers to Azure cloud via the use of the Visual Studio code extension.
Here are some prerequisites to follow along with this article.
- An Azure Account
- A webpage template to be deployed. You can get sample webpage templates here. With this, let's get started.
Setting up Azure account
To begin with, we need to have an Azure account created to be able to follow along and implement this tutorial. Azure offers a great advantage as it provides free Azure credits for its first 30 days. To create a free account, click on this link.
Setting up a Resource group
On completion of the sign up process, we now have access to the Azure portal which contains a wide variety of cloud services we intend to explore. we will then be creating a new resource group to help manage the static website we will be creating.
With the Resource group created, we will now create an Azure storage account to serve as a storage account for our website files. The Storage account can be accessed by searching for it on the Azure Market place.
The default storage of choice to host static website files is the Blob storage.
Setting up a Storage Account
After locating Azure storage on the marketplace, click on the Microsoft storage account and click on Create.
Microsoft Azure provides an easy-to-use platform to create our storage account.
In the column for the storage account name, the user's name choice can be entered. Also, it's advised to choose the closest region to you geographically in order to reduce storage query time. For the purpose of illustration, I selected the US East region. In other to guarantee application efficiency, kindly also ensure that the storage type is set to locally redundant storage. This ensures the consistent availability of your database files within your chosen local region.
You can leave all other tabs as default and then click on Review and Create and viola, your storage account is created.
In the above scenario, the storage account name was set to ty6. Any name of your choice can be used instead.
Now that we are done with creating the storage account, let's go on to deploy our Website files.
Before uploading your files to the storage account we just created, navigate to the data management section on the left and enable the static websites feature. Click on the enable icon and save.
.
Now that we have enabled the static website feature, navigate back to the storage account page to upload the HTML and CSS files of the website you intend to host.
Setting up the Static WebApp
On the screen, the upload button when clicked leads us to the page where our files can be uploaded. This also allows for multiple uploads at once.
On successful upload, specify the title of the home page within the column. In my case, it is titled index.html.
Thereafter, a link to the primary website endpoint will be generated and provided within the home page. Navigating to the link will show your hosted static site which can be accessed by anyone around the world. Here is a link to mine.
Conclusion
With that, we have come to the end of the tutorial. Feel free to check out my other articles here. Till next time, keep on coding!
Top comments (0)