Static Website Hosting on Cloud

Static Website Hosting on Cloud

Let's continue our journey of DevOps...

In this blog, we will learn the step-by-step process of hosting a static website on the Microsoft Azure cloud platform.

Do refer to my previous blogs for creating an account on a cloud platform.

You will not be charged anything until you enable public access to your website.

Static Website

A static website comprises a fixed number of pre-built files stored on a web server. These files are written in HTML, CSS, and JavaScript, called “client-side” languages because they execute in the user’s web browser. When a user requests a page from the server with a URL, the server returns the HTML file that is specified by the URL and any accompanying CSS and/or JavaScript files.

Hosting the website on Azure

Prerequisites:

Step 1 - Login to your Azure Console and search for Storage Account

Step 2 - Click on "Create Storage Account", enter a new Resource Group name "PracticeStorage" and then enter the "Storage Account name". Make sure that the storage account name is unique and should be in lowercase only. Deploy it in Asia (Central India).

Step 3 - Next, click on Advanced and checkmark the "Allow enabling anonymous access on individual containers" option and keep the default settings.

Step 4 - Go to the next step i.e. Networking and "Enable public access from all networks" should be checked and keep the default settings.

Step 5 - Now keep the default settings in the further steps and directly go to the "Review" section. Review the configurations and hit "Create".

Step 6 - After successfully deploying the storage account, in the next screen click on "Go to resource" and the interface will look like this.

Step 7 - Now click on "Storage Browser" from the side menu.

Step 8 - Create a new "Blob container".

Step 9 - Click on the "Add container" button and the container name mywebsite change the access level to "Blob" and hit "Create".

Step 10 - Go to your new container and upload the files of your website.

Step 11 - Click on "Upload" and browse for the files on the website.

Step 12 - One by one create the directories as per your website and browse the files.

Step 13 - Now all the files are uploaded to the blob container copy the URL of the "index.html" file by clicking on the three dots and paste it into the browser.

You can check the URL that the "index.html" is hosted on the Microsoft Azure Blob container and traverse through different pages.

After hosting the website make sure you delete the storage account or disable the public access from any network.

Step 14 - Go to "Storage Account" and delete the storage account "practicewebsitestorage". All the blob container and its files will be automatically deleted.

And that's a wrap-up. This is how we can host a static website on any cloud platform.

As an assignment, you can explore how to buy a custom domain so that the URL looks like every other website URL.

The next blog will soon be published. Explore more in this and Happy Learning! 🚀