Today we are excited to announce the general availability of static websites on Azure Storage, which is now available in all public cloud regions.
What is a static website?
Static websites refer to websites that can be loaded and served statically from a pre-defined set of files. You can now build a static website using HTML, CSS, and JavaScript files that are hosted on Azure Storage. In contrast, if you want to host a dynamic website with the ASP.NET, Java, or Node runtime, use Azure Web Apps and rely on the runtime to generate and serve your web content dynamically.
Static websites can be powerful with the use of client-side JavaScript. You can build a web app using popular frameworks like React.js and Angular and host it on Azure Blob storage. If there is a need to manipulate or process data on the server side, simply call the relevant managed Azure service like Azure Cognitive Services or leverage a web server of your own hosted on Azure Functions.
Get started now
Azure Storage makes hosting of websites easy and cost-efficient. When you enable the static website hosting on your Azure Storage account, a container named ‘$web’ is automatically created for you. You can then upload your static content to this container for hosting. Your content will be available through a web endpoint (i.e., myaccount.z20.web.core.windows.net) and will get a default page and a 404 page of your choice.
You can enable static website hosting using the Azure portal, Azure CLI, or Azure PowerShell. If you prefer a guided experience, follow the tutorial series on hosting your website on Azure Storage and configuring a custom domain with an SSL certificate.
A sample website – your own file browser for Azure Storage
One scenario where you might use static website hosting is to build a website to interact with your data in Azure Storage. You can secure your data by protecting your files via RBAC roles and Azure Active Directory authentication, and manipulate the data using the Azure JavaScript SDKs. This example uses the new Azure Storage SDK for JS to list files in Blob storage and render in a file browser in a statically hosted website. The example uses anonymous authentication to interact with Azure Blob storage, but you can also use Azure AD authentication to restrict access to your data.
Get the sample on GitHub, and try the demo.
There are many other use cases for static websites with today’s distributed architectures. A common use is building a serverless application in the cloud and creating a front end for it using a static website. Watch our photo gallery demo, “Serverless compute architectures with Azure Blob Storage,” from Ignite 2018, or follow the tutorial, “Build a serverless web app in Azure,” to learn more about building serverless architectures fronted with a static website.
Pricing
There are no additional charges for enabling static websites on Azure Storage. The pricing for storing and accessing your data will apply and can be viewed on the pricing page. In addition to the storage costs, data egress charges will apply and are described within the Bandwidth Pricing Details.
Additionally, you might want to enable Azure CDN to use a custom domain with an SSL certificate, as well as making use of features like custom rewrite rules. If you do so, Azure CDN charges will apply, and may lower your costs depending on your usage pattern.
Feedback
Thank you to everyone who participated in the preview of the static website feature. In the upcoming months we plan to make many enhancements to the feature based on your feedback. Continue providing feedback by posting on Azure Feedback.