I have a github pages static website at norricorp.github.io/sveltekit. The root of the site is sveltekit. (I also have an unrelated website at norricorp.github.io). The site is built using sveltekit.
Entering the website, I get the following error in the console.
Loading module from “https://norricorp.github.io/sveltekit/_app/start-248e1695.js” was blocked because of a disallowed MIME type (“text/html”).
If I use the navigation (which does as expected) I get the following errors
GEThttps://norricorp.github.io/sveltekit/_app/assets/start-a8cd1609.css
[HTTP/2 404 Not Found 15ms]
more like this then
Loading module from “https://norricorp.github.io/sveltekit/_app/start-248e1695.js” was blocked because of a disallowed MIME type (“text/html”). about
I suspect the problem lies in the svelte.config.js file
kit: {
target: '#svelte',
paths: {
base: '/sveltekit',
assets: '/sveltekit'
},
adapter: adapter({
pages: 'build', // path to public directory
assets: 'build', // path to public directory
fallback: null
})
}
Initially, paths was set ‘/’ or ‘./’ which caused navigation to use either norricorp.github.io/about(does not exist) or norricorp.github.io/sveltekit/about/about (same again). But navigation does now work with the above values but no formatting.
The generated index.html file is within the repo on the gh-pages branch.This looks correct.
<link rel="modulepreload" href="/sveltekit/_app/start-248e1695.js">
<link rel="modulepreload" href="/sveltekit/_app/chunks/vendor-111805ed.js">
<link rel="modulepreload" href="/sveltekit/_app/chunks/paths-45dac81d.js">
<link rel="modulepreload" href="/sveltekit/_app/pages/__layout.svelte-1d5e7523.js">
<link rel="modulepreload" href="/sveltekit/_app/pages/index.svelte-fdf5a78d.js">
<link rel="stylesheet" href="/sveltekit/_app/assets/start-a8cd1609.css">
<link rel="stylesheet" href="/sveltekit/_app/assets/pages/__layout.svelte-8ddef586.css">
I have cleared the browser cache. I have also created another github pages project under a different account so that it was a top level domain. Same result.
So the browser is looking in the right place, the files are there in the correct branch of the github repo but the browser is not finding them. Is github pages not serving these?
I had deleted the .nojekyll file and forgot to replace it .....
Related
I'm not sure if this is a Django-specific issue but right now I see it in my project.
Because browsers tend to cache favicon and I have changed them for my website, I came up with a trick to force anyone who have visited my site before to receive the new icons, adding "?" followed by some random characters to the image file name, so currently it is like this:
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png?v=Gv6qnaoWO5' %}">
Now the issue is, the favicon is not loading and when I check the source I see this:
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicons/favicon-32x32.png%3Fv%3DGv6qnaoWO5">
and when I click on the above link, I get 404 error from django.views.static.serve. If I remove the "?" and rest of characters, everything works fine.
If memory serves, this is normal encoding of special characters and the web server should decode it, but this is not happening on Django's built-in server.
So, is there a fix for this, or I should wait until moving the site to production?
static takes a filename, and builds the URL. A filename doesn't have query parameters. Add the query parameters to it after the fact:
href="{% static 'images/favicons/favicon-32x32.png' %}?v=Gv6qnaoWO5">
I'm transitioning to serverless and trying to server all html/jpeg/png/css/js files in a GCP storage bucket, fronted by a GCP external HTTP/HTTPS load balancer.
HTML and images are served as their expected content-type, but CSS and JS files show this:
content-type: application/octet-stream
For Chrome, this appears to be a big problem because it will refuse to load the CSS with this error:
Resource interpreted as Stylesheet but transferred with MIME type application/octet-stream:
I have to work around it with by changing my HTML from this:
<link rel="stylesheet" type="text/css" href="css/main.css">
To this
<link rel="stylesheet" href="css/main.css">
Is there a way to have the GCP load balancer (or backend bucket) set the proper MIME type for JS and CSS files?
You can set the correct Content-Type using this gsutil command:
gsutil setmeta -h "Content-Type:text/css" "gs://mybucket/**/*.css"
The /**/* part will recursively check all files and folders in the bucket.
I can not preview a html file in webstorm 9.0.1 when I run it, it shows web page is not available because in addressbar it shows localhost:63342/---project folder.---. How can I access from local harddisk html file.
And, another question can I preview html in google chrome/firefox as docable?
To access http://localhost you need to have running local server (like XAMPP or WAMPP). If you have no localhost server (or you have no idea if that thing exist in your computer) than you can't access http://localhost. That means any *.php file will be not usable.
If you are font-end developer, you don't need server. You can access your *.html files directly: file:///C:/path/to/file.html (in browser site url box). Also, for any external sources to work, path to that file must be relative:
//C://myProject
myProject
|-index.html
\
css
|-styles.css
\js
|-functions.js
You enter to browser url bar: file:///C://myProject/index.html
Your index.html looks like this:
<html>
<head>
<script src="js/functions.js"></script>
<-- WRONG:
<script src="http://localhost/js/functions.js"></script>
<script src="C:/myProject/js/functions.js"></script> // valid, but better to avoid
-->
</head>
</html>
To preview HTML file on disk (using file:/// protocol) in WebStorm, hold Shift when choosing a browser
I'm using the package, "django-wysiwyg-redactor," for a blog entry interface within the admin application. When the admin site loads, the package injects a handful of source URLs for the JavaScript files it needs to render the rich text editor:
<script type="text/javascript" src="/static/redactor/jquery.min.js"></script>
<script type="text/javascript" src="/static/redactor/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/static/redactor/redactor.min.js"></script>
...and so on...
The project I'm working on is using the Boto backend to serve files from an S3 bucket. The URLs injected by Django to render the admin page render correctly, appending the proper S3 data to make the call to the bucket:
<script type="text/javascript" src="https://siteName.s3.amazonaws.com/admin/js/jquery.min.js?Signature=signatureKeyGoesHere&Expires=1454163206&AWSAccessKeyId=AWSAccessKeyIDGoesHere"></script>
<script type="text/javascript" src="https://siteName.s3.amazonaws.com/admin/js/jquery.init.js?Signature=signatureKeyGoesHere&Expires=1454163206&AWSAccessKeyId=AWSAccessKeyIDGoesHere"></script>
<script type="text/javascript" src="https://siteName.s3.amazonaws.com/admin/js/actions.min.js?Signature=signatureKeyGoesHere&Expires=1454163206&AWSAccessKeyId=AWSAccessKeyIDGoesHere"></script>
For some reason, the Redactor URLs don't render correctly -- appending the data necessary to make the call to the S3 bucket.
I had everything working fine during local development (while still using the remote file backend)
I also had everything working fine during my first deployment.
Just this evening I went to go mess around with the development branch site - which had the exact code base as the production (which was working during initial deployment) - and saw that the blog entry form was not rendering. I checked the in-browser javascript console and found the handful of resource load failure messages pertaining to the files Redactor uses:
Failed to load resource: the server responded with a status of 404 (Not Found) http://siteName.herokuapp.com/static/redactor/jquery.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://siteName.herokuapp.com/static/redactor/css/redactor.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://siteName.herokuapp.com/static/redactor/css/django_admin.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://siteName.herokuapp.com/static/redactor/jquery-migrate.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://siteName.herokuapp.com/static/redactor/redactor.min.js
As you can see, those URLs aren't in the same format as those listed above.
All necessary files are indeed present within the S3 bucket.
I can't seem to figure out what's going on.
Any help is greatly appreciated.
Thanks!
Make sure your STATIC_URL is set to use your bucket location.
STATIC_URL = "https://siteName.s3.amazonaws.com/"
See also here:
Serving Django's static and media files from S3
In general, redactor users the Django Form Media class. For more information: https://docs.djangoproject.com/en/dev/topics/forms/media/
I have a Django 1.4 webapp using storages.backends.s3boto.S3BotoStorage as the file storage backend to serve static files from AWS S3.
Everything works -- except admin static files. On inspection of the admin page source, it's clear the problem is coming from the admin static file URLs, for example for the admin's base.css stylesheet:
<link rel="stylesheet" type="text/css" href="https://watchdog_staticfiles.s3.amazonaws.com/admin/css/base.css?Signature=sFKzAavHHKYdJQVDGTwwSAyrrjc%3D&Expires=1387824617&AWSAccessKeyId=AKIAJAYZSKEJIVD52OCQ" />
The problem is the presence of the Signature, Expires, and AWSAccessKeyId URL parameters. With these there, the link leads to an access denied response from AWS. Without them, i.e. just going to the plain URL https://watchdog_staticfiles.s3.amazonaws.com/admin/css/base.css, there's no problem (as the file is set to be publicly readable).
These signature/expires/etc parameters are not being added to static URL links in my main webapp, just within the admin.
So my question is -- where are they coming from and how do I get rid of them?