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 website | Dynamic Website |
|---|---|
| Static or same content for every visitor like Forms | Different content, functional and user interactive. |
| Easier to create and require no database or advance programming skill | Requires more skills and work, in terms of advance web programming and Database design |
| Good use case, if pages are fixed or small website | A big website with a large number of web pages and content |
| Dependent on only client-side HTML and CSS coding | Dependent on both client-side and server-side scripting languages like PHP, Javascript or ASP. |
| Easy to build and inexpensive | Costly 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
Steps for hosting a Static website in Azure storage
Follow these simple steps –
- Login to Azure portal with your subscription
- Create storage account V2 to host your website
- Enable static website and provide a path of Index.html and Error. Html
- Upload website files to a container in Blob storage section
- Open your website from URL
Step #1
Login to Azure portal with your subscription on https://portal.azure.com
Step #2
Press Azure portal keyboard shortcut “G+/” and search for storage accounts.
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.
Select your Subscription and then create new resource group “static-website“
Provide “Storage account name” (all lower case) and then make sure you select “Account Kind” as StorageV2
Tap on “Review + Create” and then “Create”. As a result, it will take few minutes and your storage account will be ready.
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.
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.
Step #4
Click on $Web or Containers in the left panel in Blob section. Then, upload your website contents here.
I have created a simple index.html and 404.html file to upload.
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.
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.
