Project Overview
Introduction
Today more and more organizations are using serverless static website hosting in order to provide fast, secure and cost-efficient web experiences. Instead of having to maintain virtual machines or web servers, companies can store their HTML, CSS, JavaScript and media files directly in Azure Blob Storage, which in turn reduces their operational burden and at the same time improves scalability and reliability.
In order to offer users a professional experience, organizations generally set up a custom domain name (for example www.flackern.com) and secure their websites by using HTTPS together with an SSL/TLS certificate; this guarantees that communication between users and the website is encrypted and thus protects sensitive information while also enhancing trust.
For this end-to-end project we will create a fully production-ready solution by deploying a static website to Azure Storage, setting up Azure DNS, mapping a custom domain, enabling HTTPS using either Azure CDN or Azure Front Door, and then verifying secure access via a web browser.
When you are done going through this step by step guide, you will own a fully functional, secure, serverless website that is running on Microsoft Azure in accordance with enterprise best practices.
Project Objectives
By completing this project, you will learn how to:
Create an Azure Storage Account
Enable Static Website Hosting
Upload website files
Configure Azure DNS
Purchase or use an existing domain
Map a custom domain
Enable HTTPS (SSL/TLS)
Validate website accessibility
Understand enterprise serverless architecture
Prerequisites
_Before starting, ensure you have:
_
An active Azure subscription
Owner or Contributor permissions
A registered domain name
A static website (HTML, CSS, JavaScript)
Azure Portal access
Visual Studio Code (optional for editing files)
Basic knowledge of DNS and web hosting
Deployment Workflow
Create Resource Group
│
▼
Create Storage Account
│
▼
Enable Static Website Hosting
│
▼
Upload Website Files
│
▼
Test Azure Web Endpoint
│
▼
Create Azure DNS Zone
│
▼
Map Custom Domain
│
▼
Configure Azure CDN / Front Door
│
▼
Enable HTTPS (SSL)
│
▼
Verify Secure Website
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: Login to your Microsoft Azure Portal by going to https://portal.azure.com.
Step 3: 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 4: 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 - flakern2026 (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 5: 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
Step 6: 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 7 — Verify the Deployment By Testing the Azure Website Endpoint
Open the endpoint: go back to static web site and copy the endpoint
Confirm the website loads successfully
You can open this URL in your browser to view your static website.
https://flackern2026.z1.web.core.windows.net/
Step 8: Create an Azure DNS Zone
Navigate to: Azure DNS Zones → Create
Configuration:
Name: flackernagentic.com
Resource Group: Flackern-RG
Step 8: Configure DNS Records
Create the appropriate DNS records.
Click on Recordsets -> +Add
Root Domain (Apex)
If using Azure Front Door or Azure CDN, configure an ALIAS or A record according to the service documentation.
Subdomain
Create a CNAME,@,_dnsauth record:
Name Type Points To
www CNAME Azure CDN or Front Door endpoint
@ A YES (Azure Resources)
_dnsauth TXT _3brw0rg1m1a2xpj0b0d67juoch804vg
If your domain is managed by another registrar, update the nameservers or create the required records there.
Step 9: Configure Azure Front Door or Azure CDN
Type Front Door on the search box and click on Front Door icon
Click on create
Scroll Down and ensure that Azure Front Door and Quick Create is selected
Then click on continue to create front Door
Create A Front Door Profile
Subscription :Azure Subscription
*Resource Group: Select the Resource group created
*Profile Name: Give your front door a profile name
*Tier: Standard
*Endpoint Name: Give it a unique name
*Endpoint hostname: Comes by default
*Origin Type: Toggle down and select storage(static website)
*Origin hostname: Toggle down and select static website created
**Click on Next->Review + Create*
After Validation have been passed click on CREATE
Wait until all your resource is been deploy successfully.
When your resource deployment is complete, click on Go to Resource
*Step 10: Update Default Route *
*To your left click on settings(Toggle Down) and click on Front Door Manager
*Click on Default-route(Toggle down)
*On Default-Route: Update Route->Click on "Add a new domain"
Step 11: Configure Domain Name
On this project we are not using domain name gotten from Azure but we are using domain name gotten from Domain name provider
*Domain type: Highlight Non-azure validated Domain
*DNS Management: Highlight all other DNS services
*Custom Domain: We will be using domain name gotten from domain name providers
Note: Register with a domain name with domain name providers like Qservers, Godaddy, Namecheap, Hostgator
*Click on Domain on the left side *
Under the Validation state for our website you can see pending
In order to solve the pending issue we click on pending and Validate custom domain ownership by copying the record name
Step 12: Configure DNS Records on Domain Provider Platform
Create the appropriate DNS records.
Copy the following from Azure under Validate custom Domain Ownership and go ahead and paste it under "Add a new DNS record" in your domain name provider
COPY(AZURE) PASTE(DN PROVIDER)
Record Type: TXT TYPE: TXT
Record Name: dnsauth Host Name:_dnsauth
Record Value: _3brw0rg1m1a2xpj0b0d67juoch804vg Add/value:_3brw0rg1
_Click on SAVE CHANGE
This show we have addded DNS Record successfully
Step 13: Verify the Secure Website
Open: https://www.flackernagentic.com
Verify that:
*The website loads correctly.
*The browser shows a secure padlock.
*The certificate is valid.
Conclusion
Hosting a static website on Azure Blob Storage is a smart, serverless way to put your site online — perfect for things like portfolios, landing pages, business sites, or marketing campaigns. When you hook up Azure Storage with services like Azure DNS and Azure CDN or Azure Front Door, you end up with a web setup that’s safe, can handle traffic spikes, and doesn’t break the bank.
For this project, you set up Azure resources, turned on static website hosting, uploaded your site files, attached a custom domain, added HTTPS for security, and double-checked everything worked. The whole process hits all the marks for modern cloud architecture. It’s a great example to show off your skills in Azure admin, networking, DNS management, and web deployment skills for any Cloud or DevOps engineering portfolio.
Top comments (0)