I like to use static websites. It is fun to see that so many go back to the “old” way of working, but still try to find our ways to add our content dynamically.
Retro tech is hip again
Last year I made my move to static with my blog, which is now running on the Azure Storage static website option and powered by Hugo and do not regret it. It is a lot easier to use, and you do not have to worry about updates from the CMS you are using.
Microsoft is not the only one that provides you this static website option, and many people might not even know about the Microsoft Azure offerings. Even Microsoft is coming with a new and easier static site offering called Azure Static Web Apps, which has close integration with Azure Functions.
As I work mainly on the Microsoft technology stack, I wanted to explore other options to see what the competition has to offer. That is why I tested Vercel and Netlify (also running a test on Heroku - but as I did not check it out thoroughly, I did not want to include it).
Info: Azure Static Web App is currently still in preview, so it is unfair to compare it against well-known brands. To give it a chance, I will only tell my findings and wish list for the platform.
For the Pimp Your Own Device - Sticker store, I wanted a host that could easily make the static web site deployment work. As some people I know make use of Netlify, I wanted to give it a try.
The sign-up experience and configuration were straightforward. Think I spend less than one hour on setting up the deployment and configure my domain. Compared to my previous experience with Azure Storage Static sites, this was a considerable change. No fiddling around with CDNs and SSL certificates. The service does all of that for you. In the end, this is all you want, because let us be honest, who likes waiting?
Netlify also has a free tier, which is excellent to get you started. In most cases, the free tier is even enough if you want to host a blog. The best is to check out their pricing model as there are a lot of things you need to take into account. There are many things measured, and you will have to pay when you reach certain thresholds like, for instance:
- Deployment time (build minutes)
- Serverless function executions
- Form submissions
Besides that, the service has a lot of great features. It has plugins that you can use during deployment (like a plugin to purge your Cloudflare Cache), and forms as static websites do not have any back-end (if you do not write it yourself). Netlify forms make it easy for you to have your contact forms on your website.
Honestly, the thresholds are high enough to run your website. In our case, with the sticker store, the build minutes are the most important. Every time somebody buys a sticker, our inventory gets updated, and this triggers a new build. The build minutes are currently the only threshold we face. You can purchase extra build minutes for $ 7 and gives you 500 minutes on top of the 300 minutes you get in the free tier.
The builds itself are very fast and allow you your site before you put it public.
Check out their pricing plans: Netlify Pricing Plans.
- Free tier
- Extra features like forms and build plugins
- Full DNS Management (it has its name servers)
- Free SSL and automated configuration
- AWS Functions
- Identity management: allows you to manage and authenticate users on your site
- Other services available to purchase like analytics
- Allows you to run multiple sites
- There are a lot of thresholds per tier set like bandwidth and deployments minutes
- Most probably the starters plan is enough, as it already comes with 100GB bandwidth and 300 deployment minutes
- Pay extra if you exceed bandwidth or deployment times.
- Functions have a 10 seconds execution limit
Vercel (formerly ZEIT) is another service that allows you to deploy your web projects like static sites quickly. It has a lot in common with Netlify but comes with less extra features, but comes with simplicity.
The reason I wanted to test out Vercel is that I had yet again another project that needed to be put online. I could have used Netlify, of course, but where is the fun in that. No, I wanted to see how another service was handling things. The project itself is a URL shortener that I created with Hugo to generate short URLs for all the stickers we have in our store. Short URLs make it easier to share them via Instagram.
Last week, when I was sitting on my sofa, I was checking out a couple of services like Netlify, and Vercel was the one that got my attention. Before its name change, it seemed to have a bad reputation, but a lot has changed. Their pricing model is exciting. The pricing models come with fewer limitations and threshold limits.
So I thought, why not give it a try. From my phone, I managed to put the site online in 10 minutes. Yes, just 10 minutes, and this includes the domain configuration.
Info: Fun fact, I would have never thought that I would ever put a site online just from my phone. When I started creating websites, I had to upload all my files for hours over FTP. Indeed, FTP, because HTTP was the standard at that time.
All I had to do was link my GitHub project to Vercel. Tell Vercel which build commands it has to run and done.
- Free tier (which includes unlimited bandwidth - fair use policy)
- Domain management - unlimited sites and domains
- Free SSL
- Deployments are not based on minutes like with Netlify, but on how many deployments you can do per day (100 for free tier)
- Simple deployments
- Great documentation
- Create APIs with functions
- Deployments/builds are a bit limited, but you can extend things with GitHub actions for example
- No extra features
- No identity integration
Info: check the Vercel platform limitations.
Azure Static Web Apps
Azure Static Web Apps is the new kid on the block, and currently, it is still in preview, which does not mean that you cannot yet use it. Just be aware that things might change before they release the generally available version.
Both Vercel and Netlify run within their application. Azure Static splits it up in two pieces. The deployments of your sites will run on GitHub Actions, and the site itself gets hosted on Azure. Luckily you can configure everything from the Azure Portal itself. The GitHub workflow is set for you and uses the Oryx system.
Info: The connection to GitHub is not an issue for me, but it might be for others. A good thing about this is that you can easily extend it. It requires a bit more knowledge as it is YAML-based, but is out-of-the-box more powerful than Netlify and Vercel.
With GitHub’s Actions, you get a lot more power over the whole deployment pipeline. However, Oryx might be a black box, do not be scared by it. Oryx will automatically figure out which platform you use and do the builds according to your use.
A great thing about Azure Static Web Apps is its seamless integration with Azure Functions. Do you need an API? Add an API folder to your solution and initiate a new Azure Functions project. This approach is similar to that of Netlify and Vercel.
Overall the service is similar to the others mentioned but is a little bit harder to configure. If you are not familiar with Azure yet, there are many things to set before you can get started. If you do, you get a lot of power in return. As there are so many options on Azure and you can easily integrate other services.
As mentioned, I am not going to make a comparison for this service as that would not be fair. Instead, I will say what I like and what Azure Static Web Apps can improve or implement to make it an excellent service.
What I like
- Usage of GitHub Actions. Using GitHub Actions for the deployments makes them very powerful.
- Seamless integration with Azure Functions
- Globally distributed on the Azure platform
- Custom domain support, although at the moment root domains (apex domains), are not supported in the preview.
- Authentication providers build-in. You can use Azure Active Directory, Facebook, Google, GitHub, and Twitter. The configuration is a matter of writing your website routes in a JSON file.
- Staging environments powered by Pull Requests
As it is a preview, I am not talking about the disadvantages as things will likely change or get improved. Instead, this is my wishlist for the service:
- If you compare it to Vercel and Netlify, you will have to do many more configuration steps. It would be great if they would implement a similar experience in which you do not have to go to the Azure Portal. I would love to see a simplified configuration.
- At the moment, the Azure Static Web App has hidden away from all the standard functionalities which an Azure Web App or Azure Functions has. For instance domain management, or more details on the Azure Functions. I would love to get full control of the functions, but this might be what you have to deal with when choosing this service.
- Full Azure Active Directory integration or bring your Azure AD App. If you can link your Azure AD App to the site, it would mean that you can get full control over the authentication and authorization process.
In the end, all three of the services provide the same things. It will be your choice to see the best fit to your site you want to host. If I have to choose, I would consider these questions:
- Want quick and easy hosting? Go for Vercel.
- Want extra features like Forms and Identity management? Go for Netlify.
- Already using Azure? Want full control over the deployments? Go for Azure Static Web Apps.