Deploy and host static content in Azure Blob storage

Hosting static HTML and CSS in Azure Blob storage is pretty simple. Using the Storage Explorer it is as simple as drag-and-drop. But when you want to integrate this in your VSTS pipeline, content type issues arise. This tiny blog will explain how to identify and fix this problem.

Manual uploading static content

Using the Storage Explorer, it is easy to create a blob container, and drag-and-drop your static files, like in the screenshot below:

ContentTypeStorageExplorer

Highlighted are the file extension and the Content Type. When uploading via drag-and-drop the Content Type of the files, like HTML and CSS, is automatically set by extension. As a result, you can open these files in your browser and view these as webpages.

Integration with VSTS

If these files are copied using the Azure File Copy task, all Content Types are default set to application/octet-stream. Obviously this will result in a download of the file, instead of serving it as a webpage.

Solving this issue is easy, seen in the screenshot below:

ContentTypeVSTS

Simply add /SetContentType to the Additional Arguments box and the copy task will automatically set the Content Type, according to file extension,

Conclusion

When you are not able to serve HTML/CSS or even JS files hosted in Azure Blob storage, check the content type using a tool like the Storage Explorer. For automatic content type resolution, add the argument /SetContentType.

For more info on AzCopy, see http://aka.ms/azcopy.