Implementing Solution using Blob Storage
In this tutorial, we will learn how to build and deploy a static website to Azure blob storage. Moreover, we will understand about configuring static website hosting and deploying a Hello World website.
Prerequisites
For accessing Azure Storage, you’ll require an Azure subscription. However, if you don’t already have a subscription, create a free account before you begin. For this firstly, create a storage account using the Azure portal, Azure PowerShell, or Azure CLI.
After installing Visual Studio Code, install the Azure Storage preview extension. However, extension integrates Azure Storage management functionality with Visual Studio Code. For installing the extension:
- Firstly, launch Visual Studio Code.
- Secondly, on the toolbar, click Extensions. Then, search for Azure Storage, and select the Azure Storage extension from the list. After that, click the Install button to install the extension.
Configuring static website hosting
Firstly configure your storage account for hosting a static website in the Azure portal. And, when you configure your account for static website hosting, then, Azure Storage automatically creates a container named $web. The $web container will contain the files for your static website.
- Firstly, open the Azure portal in your web browser.
- Secondly, locate your storage account and display the account overview.
- Thirdly, select Static website to display the configuration page for static websites.
- Then, select Enabled to enable static website hosting for the storage account.
- After that, in the Index document name field, specify a default index page of index.html. However, the default index page is displayed when a user navigates to the root of your static website.
- Next, in the Error document path field, specify a default error page of 404.html. However, the default error page is displayed when a user attempts to navigate to a page that does not exist in your static website.
- Lastly, click Save and the Azure portal now displays your static website endpoint.
Deploying a Hello World website
Next, create a Hello World web page with Visual Studio Code. And then, deploy it to the static website hosted in your Azure Storage account.
- Firstly, create an empty folder named mywebsite on your local file system.
- Secondly, launch Visual Studio Code, and open the folder that you just created from the Explorer panel.
- Thirdly, create the default index file in the mywebsite folder and name it index.html.
- Then, open index.html in the editor, paste the following text into the file, and save it: <h1>Hello World!</h1>
- After that, create the default error file and name it 404.html.
- Next, open 404.html in the editor, paste the following text into the file, and save it: <h1>404</h1>
- Then, right-click under the mywebsite folder in the Explorer panel and select Deploy to Static Website… to deploy your website. There you will be prompted to log in to Azure to retrieve a list of subscriptions.
- Lastly, select the subscription containing the storage account for which you enabled static website hosting. Next, select the storage account when prompted.
Now, Visual Studio Code will upload your files to your web endpoint, and show the success status bar. Launch the website to view it in Azure.
Reference: Microsoft Documentation