Hosting Static Website using Azure Storage Blob Part 1/2
These days, a lot of people have their own personal branding and portfolio. There are ton of services which provide to create your online portfolio. Having static website as a portfolio establishing a professional presence, improved discoverability and online presence. Unlike using online portfolio services or other third-party services, the static website we are going to build in few mins gives you full control and ownership over your content.
Ok Let start.
What is Azure Storage Blob?
Azure Storage Blob is a cloud-based object storage service provided by Microsoft Azure. It is designed to store unstructured data, such as text files, log files, images, videos and binary data. Users can access objects in Blog Storage via HTTP/HTTPS, Azure Storage REST API, Azure PowerShell, Azure CLI and Storage client library (.Net, Java, Node.js, Python, Go).
Step 1 — Create Azure Storage Account
You need to create Azure Storage Account in order to use Azure Blog Storage. If you already created, you ignore this step.
Login into Azure Portal and Search “Storage Accounts”.
Click “Create Storage Account”.
Provide the “Subscription” and “Resource Group” where the storage account put under. Here I gave the storage account name “medium920” and the account need to be unique across entire Azure storage. Here I select no redundancy for demo purposes. If you want to know more about redundancy, you can check out here.
Other tabs, we will let default setting and click “Review”. After validation is success, you can click “Create” button. Wait for few seconds to complete the deployment progress.
Now, the storage account is ready to host your static website.
Step 2 — Azure Storage Account Structure
Before hosting your static website, it is better to understand the storage account structure. Click the “Storage Browser” of left side panel.
One storage account has different types of storage. Let start with “Blob Containers”.
Azure Blob Containers Storage provides object storage to support massive amounts of unstructured data. For example, text and binary data files.
Azure File Shares is fully managed file sharing system. It uses SMB protocol and you can mount Azure File Shares from Windows, Linux and MacOS devices.
Azure Queue Storage is used for storing large numbers of messages. Those messages are used in communications between the different components of a distributed applications.
Final one is Azure Table Storage. It is used to stored structured NoSQL data which provide key/value pairs store and schema-less design.
For the static web page hosting, we will use the Azure Blob Containers Storage since static web page are text and binary files. If you click on “Blob Contaiers”, you will see the default folder name $logs. We need to put our static web page files same level with $logs.
Step 3 — Enable Static Website Capability
By default, Azure Storage doesn’t enable capability for hosting static web page. You need to enable that feature first before uploading your contents.
Go to “Overview” Page and select “Capabilities” tab. You will see “Static Website” is not configured yet.
Select “Static Website” Card in order to enable setting. Enable the Static Website switch and put the file names of your page.
And the click “Save” button and it will generate primary endpoint URL as follow.
By accessing that URL, you can see the static webpage which we going to host in next step.
Step 4— Create $web Folder
After enabled static website capability, you need to upload your static contents under $web folder. If the folder doesn't exist yet, create a new one.
Go to “Containers” under “Data Storage” Section and click “+Container”.
Select Blob for Public access Level and give the name $web.
and then click “Create” button. Now we have $web folder where we can upload our static contents. If you don't have any static app to upload, you can clone from here.
Here, I going to use my static pages and upload into $web folder.
Copy the URL into your browser and you can see the static web content.
Step 5 — You did a great Job.
Now you have done create your own static website using Azure Blob Storage. You can upload other static web templates like Jekyll, GatsbyJs and other so on.
But there is some kind of limitation hosting static website on Azure Blob Storage. In next article, I will cover those limitations and how to use your custom domain with Blob Storage and setup the monitoring metric.
If you like my article, please follow me. Thanks
