Introduction
Website hosting has been greatly improved through the use of cloud computing. This has made it easier for individuals as well as businesses to access, scale, and use hosting services at a reasonable price. One of the easiest and most efficient methods that developers may use to host a static site on Microsoft Azure is the Static Website Hosting option offered by Azure Blob Storage, which allows developers to upload their static files without the need for a traditional web or virtual server (i.e., HTML, CSS, JavaScript, and media files).
In this project, I will download a free static website template from Tooplate, customize the downloaded version using Visual Studio Code (VS Code), and then deploy the new version to Azure Blob Storage for public viewing. This will involve editing all content, images, styles, and branding so that the template reflects how I want it to look when it is completed.
To develop my own static website using Azure Blob Storage, I will first navigate to Tooplate and browse the templates available for modification (or further development). After deciding which template is most suitable, I will download the ZIP package of the template and extract it onto my local computer's disk drive. Then, I will open the ZIP file's contents using VS Code to customize all aspects of the website prior to publishing.
After customizing the template, we will create an Azure storage account, enable Static Website Hosting, upload the customized/static website files to the Azure Blob Storage $web container, and then publish the created static website into the cloud.
Project Objectives
.Download a free static website template from Tooplate.
.Go to VS code and edit the downloaded template from there
.Create a Resources Group
.Create an Azure Storage Account.
.Enable Azure Static Website Hosting.
.Upload website files to Azure Blob Storage.
.Deploy and access the website through Azure's public endpoint.
.Document the deployment process.
Prerequisites
Before we begin, ensure you have the following installed on your machine:
Active Azure Subscription
Microsoft Azure Account(portal.azure.com)
VS Code download and install (https://code.visualstudio.com/Download)
Internet Connection
ZIP Extraction Tool
Step 1: Download a Free Website Template
Procedure
Visit Tooplate (https://www.tooplate.com/)
.Browse available templates.
.Select a template of your choice and Download it
.Download the ZIP package and from your download extract all files locally
Step 2: Download the latest version of vs code and install it.
.Open the vs code
.Click on file -> Select Open Folder-> Select the unzip folder and the folder containing the /index.html,css ,js,images ,fonts ,news-detail.html will be upload on the Vs code template
.Click index.html which has the code as seen
.You can edit some elements especially those on white characters
.You can edit elements as they appear in the lines 48
.Be careful not to change the code, so the browser will not be scattered
The new edited index.html page will look like this after what you edited on the template is save.
Storage Hierarchy:
Azure Subscription → Resource Group → Storage Account → Container → Blob Files
_Step 3:First thing login to your Microsoft Azure Portal by going to https://portal.azure.com.
_
_Step 4: Create a Resources Group
_
We need to create our Resources Group first before we go ahead to create our storage account
. Search for Resource Group in the search bar at the top of your portal
page and Select/Click on Resource Group.
. Click on Create to create Resource Group
. Type the Resource group name, select the region and click Next
. Apply tags to your resources to logically organize them by categories and click Next
. Review the resources group and click on Create
. _ Click on Resource Group on the left to bring out the resource group you created_
Step 5: Create an Azure Storage Account
.Search for Storage in the search bar at the top of your portal page and Select/Click on Storage account.
_Click on Create _
In the Basics tab, under Project details, make sure the correct subscription is selected and for the Storage Resource Group click on the list arrow and select resource group you have already created above.
.Storage account name - flakernpro (Choose a unique name)
.Region -Select a region
.Preferred Storage Type: Azure Blob Storage
.Performance - Select Standard
.Redundancy - Select Local Redundant Storage (LRS)
.Click the next button
Click the next button or configure the other sections if required, otherwise leave as default.
Under the security, toggle the Allow enabling anonymous access on individual containers.(This is to give access to our static website)
Under Encryption, tags leave as default and click Next
Click on Review + Create
Validation
Check if storage account has configured properly or not, if properly configured it will show the create option otherwise you need to check all the configurations again. Then click on the Create Button.
After Deployment, if the deployment is successful it will show your deployment is complete, then click on Go to Resource and you will see our storage account is been created.
_Step 6: Enable Static Website Hosting
_
.On the left pane search bar type static website and click on static website.
Enable Static Website and configure:
.Index Document Name:index.html
.Error Document Path: 404.html
.And click Save
Enabling static websites on the blob service allows you to host static content.
In the Index document name field, provide the name for your default index page, for instance index.html. This is the page that displays when a user navigates to the root of your static website.
In the Error document path field, specify the path to a default error page of your site(404.html). This is the default error page that is displayed when a user attempts to navigate to a page that does not exist in your static website.
Azure created a storage container to host the static website $WEB, Click on it or Navigate to Containers
.On Data storage dropdown
.Click container
.Click $WEB
Step 7: Upload Website Files
click on Upload.
Navigate to where the website folder is located on the computer.
Drag and Drop the files from the location to the provided box.
Upload:
index.html/css/images/js/font/news-detail.html/about this template.txt
Step 8 — Verify the Deployment
Open the endpoint: go back to static web site and copy the endpoint
You can open this URL in your browser to view your static website.
https://flackernprod.z19.web.core.windows.net/
Conclusion
In this project, I successfully deployed a free static website template downloaded from Tooplate to Azure Blob Storage using Azure Static Website Hosting. This approach actually provides a simple, secure, scalable, and cost-effective solution for hosting static websites without the difficulty of managing web servers.
The project reinforced key Azure concepts such as Resource Group, Storage Accounts, Blob Containers, Static Website Hosting, and cloud-based web deployment. For beginners entering cloud computing, DevOps, or Azure administration, this is an excellent hands-on project that demonstrates practical cloud hosting skills while building confidence in Azure services.
Top comments (0)