Setting up Azure storage static website for Jekyll

Before setting up Jekyll build and release pipelines on Azure DevOps we need static website service on Azure. It’s special feature of blob storage. This blog post shows how to set up and manage Azure static website.

Live demo and source are available! Live demo of Jekyll static blog is here: https://jekyll.gunnarpeipman.com. Source code with sample content is available at my Github repository gpeipman/JekyllBlog.

Creating Azure storage account

Go to Azure portal and start creating a new storage account but wait a moment before doing anything final.

Microsoft recommends V2 type of accounts and they say previous generation to be legacy. When I created storage account for this series then static websites wasn’t available for V1 anymore.

Configuring static website

When storage account is created enable static website. Make sure that index and error 404 document names are also given. You can also take primary endpoint address and paste it to Notepad or somewhere else where you can take it later conveniently.

Primary endpoint of static website is the address where we can see our blog running after publishing. Save this address to your bookmarks so it’s easy to open it from browser.

NB! Although it is possible to use custom domain with blob storage we don’t use it as it doesn’t support custom HTTPS certificates and therefore custom domain names. We will configure custom domain later with Azure CDN service.

Now you may want to ask what is blob storage address and what is static website address or what the hell is going on here? Well, static website defines additional host name for static site like shown here.

When accessing blob storage containers through blob storage URL there are access controls in place. Also there’s no support for directory index files (index.html). Static website URL skips access rules and handles $web container as just a folder in web server. When using static website URL our index.html files are served.

Managing files on Azure storage

For static web site Azure creates blob container called $web. You can upload some small file there and try to download it through browser.

To manage files on Azure storage I use Microsoft Azure Storage Explorer. It’s free to download.

For me it is main tool for managing blobs and file shares on Azure. It supports blobs, file shared, queues and tables. If you need to manage static blog files or just check what was deployed then Azure Storage Explorer is tool to use.

Wrapping up

Now we have Azure storage account ready with static website. Those who want to publish blog using Azure Storage Explorer can jump to blog post Taking Jekyll static blog live with Azure CDN and custom domain as it’s time to go live with custom domain. Lazy ones like me have next steps waiting on Azure DevOps – build and release pipelines.