How I made my blog cheap to host, customizable, and lightning-fast. — Part 4: Hosting on the Cheap

Part 1: Setting up — Azure DevOps and Our Headless CMS
Part 2: Building out our Angular Site
Part 3: Meet Scully, our Static Site Generator
Part 4: Hosting on the Cheap — you are here
Part 5: Build and Deploy with Azure DevOps

photo credit: Patrick Fore

There are lots of places you could host a static site. I have lots of things in Azure already and had heard that you could serve a static site out of blob storage and I wanted to give it a shot. It’s cheap and low on complexity.

When I say cheap, it’s almost free. I used the pricing calculator, and set it up to have the following options:

• 10,000 write operations
• 10,000 list and create container operations
• 10,000,000 read operations

The monthly price was $4.14. If you drop it down to 1 million reads, the price plummets to $0.54. We’re also going to be putting all the reads onto our CDN, so we’re likely to pay pennies for the storage account.

Here’s how to set it up:

Create an Account/ Login to Azure

https://portal.azure.com

Create a Storage account

1. Click “Create a Resource”
2. Search for “Storage Accounts”
3. Click “Create”
4. Ensure “Account Kind” is set to “StorageV2” and set other options as you’d like
5. Click “Review and Create”
6. Wait for it, it might take a minute or two to complete

Set up the Static Website

1. Open the Storage Account you created
2. Find the “Static website” blade
3. Set the toggle for “Static website” to “Enabled”
4. Click “Save”

Set up a CDN

I’m going to assume you want an Https domain as that is pretty standard now. If you only want Http, it’s easier and the steps are here.

For Https we need to first set up a Content Delivery Network(CDN). A CDN puts your content on different servers all over the world and delivers the one closest to your user when they request it from your URL. It’s something you can do when your site is all just static filed. It’s amazing because it is going to make our site even faster for the end-user, the cost is that our updates are not instantaneous. We have to wait for them to propagate through the CDN. We can, and will, request a purge of the CDN when we update but it takes a few minutes.

The cost of the CDN varies based on how much content you’re serving and what region it’s being served from. Pricing (as of 3/26/2021) ranges from $0.08-$0.23/GB for the first 10TB. If you have a personal blog without a ton of traffic, the cost should be nominal.

Here’s how to set it up:

1. Open your Storage Account
2. Under “Blob Service” select “Azure CDN”
3. Select your options
4. make sure that the “origin hostname” field is set to your blobs endpoint (e.g. mystorageaccount.z5.web.core.windows.net)
5. Click “Create”

Once the creation completes you should have a new resource called an “endpoint.”

Set up your Custom Domain

1. Open the endpoint created above.
2. Note the “Endpoint hostname” value
3. Go to your DNS provider and create a CNAME record that points to the hostname. You can set the “name” value of the record to “cdnverify” so long as you change the “data” value to “cdnverify.yourendpoint.azureedge.net”. This will allow you to verify the name without interrupting your website’s current DNS.
4. Wait for the DNS change to propagate
5. Go back to your endpoint in Azure
6. Click the “Custom Domains” blade.
7. In the top left select the “+ Custom Domain” to add a custom domain.
8. Add your domain
9. Toggle Https to “On”
10. Set “Certificate management type” to “CDN Managed” **
11. Save
12. Wait

* if you want to use your root domain instead of www.mydomain.com, azure doesn’t support that with their free certificate. There are two paths I know to get around this.

Path 1: Go to your Domain provider and forward the root to www. Here are instructions for Google Domains (yours may vary). This is what I did. Mine looks like this:

Path 2 is to go out and get yourself a real certificate. DO NOT PAY HUNDREDS, you can get one from Namecheap… cheap. There is a great article on configuring this for our situation here.

Phew!

If you have any content in your $web blob, you should now be able to browse it on your domain. If you don’t have anything in there, but want to try it, just use Azure Storage Explorer to drop a simple index.html file in there.

We’re live now! The last thing for us to do is create our build and release pipelines. Let’s go.

< Part 3: Meet Scully, our Static Site Generator
Part 5: Build and Deploy with Azure DevOps >