hosting-a-static-website-on-azure

Static Website: Guide on hosting a static website free on Azure {update 2021}

If you have ever hosted a static website like a blog or information website. Then, you know the hassle and how much expensive it is. This Guide on “Hosting a static website on Azure” will help you host a static website on Azure storage. Which is really inexpensive or you can say almost free. Additionally, it’s fast and secure also.

What is a static website

Static websites are the basic or simple type of websites, which don’t require much database designing or web programming. Basically, the Content of these websites is fixed. All the pages are in either HTML or CSS and content is same for all visitors, unlike Dynamic websites.

Static vs Dynamic website

I have jotted down some of the important differences between static and dynamic website for your better understanding.

Static websiteDynamic Website
Static or same content for every visitor like FormsDifferent content, functional and user interactive.
Easier to create and require no database or advance programming skillRequires more skills and work, in terms of advance web programming and Database design
Good use case, if pages are fixed or small websiteA big website with a large number of web pages and content
Dependent on only client-side HTML and CSS codingDependent on both client-side and server-side scripting languages like PHP, Javascript or ASP.
Easy to build and inexpensiveCostly and complex to build
Static website examples
https://pointerpointer.com/
http://cartlidgesqualitymeats.com/
Dynamic website examples
https://www.quora.com
https://www.facebook.com
https://www.youtube.com

Static website generator

Static website generators are tools or scripts to publish websites on the basis of static HTML files or templates. These are highly secure and fast for end-user. Because there are no Database queries involved like CMS (Content management system) e.g. WordPress.

With static site generator (SSG), a developer deploys a series of HTML pages on the webserver. Whenever a user requests a page, it matches and delivers to end-user. It also improves cost and reliability. Additionally, version control is easy for static website.

Now let’s deep dive into the steps of hosting a static website-

Pre-requisite to host a Static website in Azure

To host a static website, below mentioned pre-requisite must be met

  • Azure subscription – You can utilize Free trial subscription offering of Microsoft Azure.
  • Storage account
  • Static website – At least index.html and Error.html page

Steps for hosting a Static website in Azure storage

Follow these simple steps –

  1. Login to Azure portal with your subscription
  2. Create storage account V2 to host your website
  3. Enable static website and provide a path of Index.html and Error. Html
  4. Upload website files to a container in Blob storage section
  5. Open your website from URL

Step #1

Login to Azure portal with your subscription on https://portal.azure.com

open-azure-portal

Step #2

Press Azure portal keyboard shortcutG+/” and search for storage accounts.

Search-for-storage-account

Click on Add storage account. You can use an existing storage account also, but I will recommend you to create a new one for your static website.

create-storage-account-on-azure

Select your Subscription and then create new resource group “static-website

Create-new-resource-group-for-static-website-on-azure

Provide “Storage account name” (all lower case) and then make sure you select “Account Kind” as StorageV2

provide-storage-account-name-all-lower-case

Tap on “Review + Create” and then “Create”. As a result, it will take few minutes and your storage account will be ready.

Storage-account-for-hosting-static-website-in-azure

Now you just need to Click on “Go to Resource”, once deployment is successful.

Step 3#

Once you will land on the resource page, then select “static website” from left panel and tap on “Enabled“. Because it’s disabled by default.

After that, Enter “index.html” and “404.html” in index document name and Error document path fields respectively.

provide-index-error-html-document-path-azure

Click Save and you will get links to your primary and secondary endpoints of the static website. Additionally, make a note, an Azure container named “$Web” has been created automatically. Copy primary endpoint link for later use.

primary-secondary-endpoints-for-static-website

Step #4

Click on $Web or Containers in the left panel in Blob section. Then, upload your website contents here.

upload-website-content-on-azure-container

I have created a simple index.html and 404.html file to upload.

upload-index-error-files

Step #5

Try opening your website in a browser with primary endpoint link copied in step #3. Then, check out the content of index.html. Voila! you have hosted your first static website on Azure blob storage.

open-your-static-website

Video tutorial

Video on “How to host a static website on Azure”

Summary

Hosting a website in Azure cost nothing, it’s free. You just need to pay for blob storage and operational cost. it’s fast, secure and reliable. Hosting a static website in Azure provides more advance options like Custom domain, SSL and CDN out of the box. Additionally, you can use them with static site generator engines like Jekyll. Try it and let me know issues and concerns in the comment box. If you find it helpful, please share it on your social media.

Further reading

How to Map a custom domain to your static website or Azure blob endpoints