Last post I talked about setting up a serverless website on Azure using BLOB storage. What I didn’t go into is how to publish files to that site automatically. Yes, you can use the BLOB explorer to manually upload your files but seriously, who wants to do that kind of boring task if you can let computers do that for you.
I commit & push my changes to the master branch of my git repository.
A GitHub action kicks in and published the site to the Azure BLOB container.
How sweet is that? Pretty sweet, I know. How do you set this up? Well let me take you through the steps my friend, and automated Git deployment will soon be yours to enjoy as well.
You need to create a Git repository on GitHub. Now that you can create unlimited private repositories, you don’t even have to expose it to the public, which is nice.
Clone the repo locally, and create a source/ directory in it. This is where the source code will go, and that’s what we’ll push to the Azure BLOB container. Any other files you don’t want published go in the root, or in other folders in the root of your repository.
Copy your source code into the source/ folder, or create a simple index.html file for testing the publishing action.
Go to your repository page on the GitHub site, and click the Actions tab at the top.
Click New Workflow, choose “set up a workflow yourself”.
It will now create a YAML file for you containing your workflow code.
Paste the content for your YAML file listed below. Notice the “source” folder in there? That indicates what folder will be copied to Azure. In case you run into trouble, you can dig in to the Azure Storage Action setup yourself, but it should do the trick.
Last step is to set up that CONNECTION_STRING secret. This is the connection string to your Azure storage container. You can set the secret from your GitHub repository Settings tab, under Secrets. Click New Secret, then use the name CONNECTION_STRING and paste the access key value from your Azure storage account.
You’re all set up! To test your publishing flow, all you need to do now is push a commit to your master branch, and see the GitHub action kick in and do its thing. You should see your site appear in a few seconds. Sweet!
Update: recently I found out the workflow broke because of a bug in the latest version of the action. To bypass this I now fixed the version in my workflow YAML file to v1.0, which still works. It’s probably a good idea to avoid this kind of breaking changes by fixing the version of any action you use in your GitHub actions anyway. It will avoid those annoying issues where things work one day, and don’t the next.
For my little gfpg project I wanted to put a simple static website online without having to set up and maintain a web server. I read about going serverless with a static site using S3 on AWS, but I wanted to try that on Azure instead. BLOB storage seemed the obvious alternative to S3, but it took some searching around and finding the right documentation on MSDN to get it all up and running.
If you’re on a similar quest to publish some static content to Azure BLOB storage as a serverless website, this short guide will help you along.
First of all we need to create an Azure BLOB storage account for the site. The most important part is to choose a general-purpose v2 Standard storage account, for the account kind. This is the only type that supports hosting a static website. Guess who didn’t do that.
Next thing is to enable static hosting of your files. This will create a $web folder in your storage account, which will be the root folder of your website. It’s that simple.
Copy your files into the $web folder using the Storage explorer blade in the Storage account menu, or the Storage explorer app. You can already test your site using the Azure endpoint.
You can stop here if this is a personal project and you don’t need HTTPS support or a custom domain. In my case, I did want to go all the way, so here’s how to get that working as well.
Get a domain name. Make it sassy ;). Make sure your domain registrar allows you to edit the CNAME records for your domain. This is pretty standard, but not all cheap web hosters allow this and you need it later on to hook up your domain to Azure.
Create an HTTPS certificate for your site on Azure with just a few clicks. I was afraid this was going to be hard but it’s so damn easy it’s beautiful. There really is no excuse anymore to let your site just sit there on HTTP these days.
Last thing to do is set up some caching rules for the CDN. We don’t want to be hitting the “slow” BLOB storage all the time and use the faster CDN instead. Depending on the option you chose for the CDN this will differ, but if you picked the Microsoft one you have to use the Standard rules engine to set your caching rules. If you picked Akamai or Verizon, you can use CDN caching rules instead. For a simple setup on the Microsoft CDN, go to the CDN settings Rules engine page, and set a global cache expiration rule to override and an expiration you like. After a few minutes you’ll see the cache header appear in your HTTP requests.
Here you can also create a rule to redirect HTTP traffic to HTTPS, so people don’t accidentally hit the insecure version.
One more tip on the CDN. You can also purge the CDN cache after you pushed an update to your site to apply the changes, before your CDN cache expires. This is handy if you’ve set a rather big expiration time, because you don’t expect the site to change very often.
Years ago I ran into a website offering crude design advice. I thought it would be funny to make something similar for programming advice or guidelines. I started with a one-page website with a bunch of tips and then after a while forgot about it. Recently I ran into that project again and figured I might as well put it out here for the heck of it.
So here it is, some good fucking programming guidelines for you developers out there to have a laugh with, or perhaps even find a few useful tips and links in there. I swear, most of those tips are actually valid, even though they are presented in a tongue in cheek way.
So have fun with it. I know I did when I built the damn thing.
Recently the mathematician John Horton Conway passed away, who invented the well known Game Of Life. An algorithmic game I ended up building a version of in HTML at some point for fun. After seeing the news I remembered I still had this sitting around on my hard drive somewhere. So in memoriam, here it is to play around with.
It’s in an iframe, but if it doesn’t render properly you can use the direct link as well. Thanks for the games John. RIP.