Introduction
A static website is a type of website that is composed of HTML, CSS, JavaScript, images, and other static files. Unlike dynamic websites, which generate content on the server side in response to user requests, static websites deliver pre-built content to users exactly as it’s stored. This means that every visitor to a static website receives the same content, regardless of their interactions with the site.
Static websites are typically used for simple websites with fixed content, such as personal blogs, company brochures, portfolios, or landing pages. They are easy to set up, fast to load, and require minimal maintenance compared to dynamic websites. Hosting a static website is often more cost-effective and straightforward, making it an attractive option for many individuals and businesses looking to establish an online presence.
Prerequisites
Azure Subscription: Ensure you have an active Azure subscription.
Visual Studio: Make sure you have Visual Studio Code installed on your machine.
Azure Storage Account: You need to have an Azure Storage account set up.
Here’s a step-by-step guide:
Create an Azure Storage Account.
Log in to the Azure portal (https://portal.azure.com).
Click on “Create a resource” in the top-left corner.
In the Azure Marketplace, search for “Storage Account” and select it.
Click the “Create” button.
Fill out the required details, such as subscription, resource group, storage account name, location, and performance.
Leave other settings at their defaults for simplicity, or adjust them according to your needs.
Click “Review + Create” and then “Create” to create the storage account. In the example below, we are creating a storage account labelled as “androsstorage”
Once the deployment is complete, navigate to your newly created storage account.
Enable Static Website Hosting
In the left-hand menu of your storage account, under “Settings”, select “Static website”.
Click on “Enabled” to enable static website hosting.
Set the index document name (usually “index.html”) and optionally set the error document path (usually “error.html”) if you have one.
Click “Save” to save the configuration.
Once it’s saved, primary and secondary endpoints are generated.
Go back to your storage account, click on containers, you can see th
at a web container has been created to host your static website data.
Create or Open a Static Website Project in Visual Studio
Open Visual Studio.
Create a new project by selecting “File” > “New” > “Project” and choose the appropriate template for your static website (e.g., HTML/JavaScript project).
If you have an existing static website project, open it by selecting “File” > “Open” > “Project/Solution” and navigate to your project folder. In the example below, a file labelled “ceevee” has been opened.
Ensure your project contains all the necessary files for your static website (HTML, CSS, JavaScript, images, etc.).
Upload Your Website Files to Azure Blob Storage
Open Azure Storage Explorer and sign in with your Azure account.
Navigate to your storage account and find the Blob Container created for your static website (usually named $web).
Drag and drop your website files from your local machine to the Blob Container in Azure Storage Explorer.
Alternatively, you can right-click on the container and select “Upload” to upload files from your local machine.
Verify the Website URL
Once the files are uploaded, go back to the Azure portal and navigate to your Storage Account.
In the Static website settings, you’ll find the primary endpoint URL of your website. It should be something like https://.z6.web.core.windows.net.
Copy this URL and paste it into a web browser to verify that your website is accessible.
By following these detailed steps, you should be able to host your static website in Azure Blob Storage using Visual Studio. Good Luck!
