Host HTML5 site on Google Cloud Storage

2
votes

I'm trying to host my HTML5 site on Google Cloud Storage.

When I load the site locally, all the animations work. When I upload it to Google Cloud Storage and access it, my CSS animations don't work.

The CSS files are in css/theme.css in my storage bucket and the HTML file points to it like this:

<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-animate.css">
1
htmlcssgoogle-cloud-storage
Can you access it by show source & click on the link's ? - Superdrac
Are there errors in the error console? - jterrace
Now it reads the HTML page, but it reads it with simply HTML, it doesnt aply my CSS images or anything. What do i miss? I have made all files Public accasble. - user3432918
If i click on the "public link" it presents the page perfect - user3432918

1 Answers

1
votes

Make sure the Content-Type metadata is set properly for your CSS files via the Developer Console.

If not, you should manually edit the metadata to set the proper type, which is text/css for CSS files. If the type is neither not specified nor auto-detected at upload time, Google Cloud Storage serves files as binary/octet-stream which may prevent the browser from properly rendering it.

Alternatively, you can also specify the MIME type in HTML, e.g.,

<link rel="stylesheet" href="css/theme.css" type="text/css">

to make sure that the browser handles it appropriately.