问题

I want to use an Azure blob file storage to host a static website.

This works fine, if the html-page is located in the root folder of the $web-storage.

But if I put the webpage into a subfolder, the relative links (e.g. to css files) don't work anymore - since they are interpreted as root-based links

<link href="css/bootstrap.css" rel="stylesheet">

index.html is located in "subfolder1"

But instead of

https://blablabla.web.core.windows.net/subfolder1/css

it is resolved to

https://blablabla.web.core.windows.net/css

Is this an error of Azure or a misunderstanding/error in my html?

回答1:

Actually, $web is a special container on Azure General Purpose Storage V2, which be the root path like www for Apache HTTP server or wwwroot for IIS to hosts all static folders and files. All folders and their subfolders must have to be created in $web container. You can see its information on Azure portal as the figure below.

Here is my sample to create two folders a & b and their index.html under $web container in Azure Storage Explorer.

If access my primary endpoint https://<account name>.z7.web.core.windows.net, the index web page of my static website is an Angular sample web page as below,

Then, to access the subfolder a and b like you want, the index page of these subfolders as below.

index.html of folder `a`

<html>
<body>
<h2>A</h2>
</body>
</html>

Hope it helps for understanding the structure of static website on Azure General Purpose Storage V2.

Update for your comment:

I update my a/index.html file and add a new file a/a.css, the codes as below.

a/index.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<h2>A</h2>
<span id='test'>Hello</span>
</body>
</html>

a/a.css

#test {
    color: red;
}

There are some behavior up to the browser implement.

Q: What's the difference between http://host/a and http://host/a/? A: To access them in Chrome, the two urls will response the same content from a/index.html. However, their base paths are different: / for http://host/a , but /a/ for http://host/a/, that will cause different behavor for loading a relative path resource of a.css, as the figures below.

Fig 1.

Fig 2.

来源：https://stackoverflow.com/questions/56703196/subfolders-in-static-azure-hostings

标签

html