If you’re looking for a best hosting space for your static web site here’s the deal! If I would say that you can host your static website under $1 USD /month you wouldn’t probably trust me. But trust me its true and it’s fairly easy to do under 5 mins. If your intention is to host a static website without backend this tutorial would support you. This is serverless !
There are lot of hosting provider provide you with hosting services and some of them are much more expensive. Event when you compare Azure Web Apps they are also quite expensive. If you want to host a web site with Azure Web Apps with 10 GB storage, custom domain and SSL support you would probably need to go with B1 Appservice plan which cost you S13.39 USD/month.
But the strategy I’m going to reveal today does only cost less than $1 USD/month with 10 GB storage, custom domain. This includes 10 GB storage for the website content and bandwidth up to 10GB inbound.
You only need a storage account !
What “I only need a storage account..?” Yes ! you only need a storage account in-order to host your website, but in order to add SSL there’s bit of work to do. In this tutorial I will only cover the part of hosting the static website and adding a custom domain. In the next part of the tutorial I would share you how to add SSL to your static website.
How to do it ?
Let’s see how we can do this… First of all, if you don’t have an Azure Account you need to create an Azure Free account from here. You’ll get 12 months FREE services and $200 USD worth of credits for 30 days!
Step 1
Login to your Azure portal with Azure credentials and then create a storage account : All services >> Storage >> Storage accounts >> Click + Add on top of the menu. Now configure your storage account as follows. Make sure to select Account Kind property as “StorageV2 (general purpose v2)“- this is the most important configuration!
Step 2
Now navigate to the storage account created in the step 1 and go to the option “Static website” under Settings section from the left side panel. Now switch to “Enable” option under “Static Website” option.
Now you’ll see few options underneath that including the Primary endpoint (3) and Secondary endpoint which we’ll use later on to point our own custom domain, also the index document name and the error document path.The “Index document name” will be the file served up in each folder. So the root will look for “index.html” and /about/ will look for “/about/index.html”. The “Error document path” specifies where the error page lives for serving up a custom 404 page.
Let’s give “index.html” (2) for the index document file name and “error.html” (1) for the error document file path.
Step 3
Now it’s time to upload your static web contents (files) to the storage account.For the demonstration purposes I’m going to upload a sample web page to the storage account container. To upload these.html files just click “Blobs” under “Blob service” in the storage account left side panel, now you will see a storage container named “$web” (3) click that and go inside the $web container. In the top menu bar you have the option called “Upload” click that and upload the files for the website. In my case I’m uploading index.html and the error.html. If you have whole website upload everything here.
Now it’s time to test your web site. Remember the link from the section “Static website” which I mentioned in the step -2, you can get the link back again from the “Static website” section in the left side bar. Just copy that link and past it to the address bar and check whether it is showing your html website. Wohoooo! now it works…
Step 4
Now its time to configure a custom domain to your website. For this you can purchase a domain from a domain service provider and then configure DNS settings as follows.
Just login to your domain service provider, then go to the domain DNS management section in my case my domain provider is “Godaddy”. Now what you have to do is first add a CNAME record pointing to the storage account endpoint (either for primary endpoint or secondary endpoint). If you forgot to save this refer back to the step-2 or go to the section “Static Website” under the storage account overview on Azure portal. This end point should looks like – <<Storage Account Name.<<some key>>.web.core.windows.net (ends with web.core.windows.net )
Now you have tell your Azure Storage account that you have a custom domain. Once you added the above it might take some time, and will not propagate instantly, because of that you might get an error that “the domain name couldn’t verify” when you try to add domain name to the storage account. To add the custom domain to storage account navigate to custom domain section in the storage account left sidebar and add your domain name and verify it and save it.
If you add the CNAME record you’re good to go with the custom domain.Just open up a new tab on your browser and enter the domain and see. This will take up to several hours to get the DNS records to propagate.
If you try to use HTTPS with your domain it might not work… I know…huh? 😀 In the next tutorial I’ll bring you how you can bind a SSL certificate faster and easier.
Until next tutorial Happy Clouding ! Please SHARE this Today…
