jekyll GitHub Page page not loading assets - jekyll

I have a GitHub hosted https://waltershub.github.io the repo is https://github.com/waltershub/waltershub.github.io
The site builds properly locally with all assets and css but on the hosted version none of it shows
The errors in console are:
[Error] Failed to load resource: the server responded with a status of 404 (HTTP/2.0 404) (font-awesome.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (HTTP/2.0 404) (dark.css, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (HTTP/2.0 404) (function.js, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (HTTP/2.0 404) (walt.jpg, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (HTTP/2.0 404) (walt.jpg, line 0)
I have validated the YAML and it is good

In _config.yml you are using a baseurl of webpage:
baseurl: "/webpage" # the subpath of your site, e.g. /blog
When according to your setup should be '':
baseurl: ""
Then the part that load assets:
<link rel="stylesheet" href="{{ "/assets/fonts/font-awesome/css/font-awesome.css" | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{site.baseurl}}/assets/stylesheets/{% if site.blog_theme == "light" %}light.css{% else %}dark.css{% endif %}">
Will properly generate the urls like:
<link rel="stylesheet" href="/assets/fonts/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="/assets/stylesheets/dark.css">
Tnstead of the wrong:
<link rel="stylesheet" href="/webpage/assets/fonts/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="/webpage/assets/stylesheets/dark.css">

Related

Flutter App to Web through Github pages blank screen

I have a page generated by Flutter-Web shops and it is a blank page. And I have an error in the console. This happened after uploading the build web of Flutter into GitHub Pages.
Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://adamtechnologynl.github.io/') with script ('https://adamtechnologynl.github.io
/flutter_service_worker.js?v=2470069411'): A bad HTTP response code (404) was received when fetching the script.
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
(index):88 Failed to load app from service worker. Falling back to plain <script> tag.
(anonymous) # (index):88
(index):47 GET https://adamtechnologynl.github.io/main.dart.js net::ERR_ABORTED 404
loadMainDartJs # (index):47
(anonymous) # (index):91
I found the solution. This happens when you have put it another directory instead of the root of the GitHub.
So my code is in "https://username.github.io/demo/book-king/belasting-web-v1/" so that last part we should append everything after "https://username.github.io/" also in the index.html. You can solve it by modifying the line (number 17 by me):
Change:
<base href="/">
into:
<base href="/demo/book-king/belasting-web-v1/">
And then you are done.
This solution works. But for me, line no 17 was not <base href="/">.
It was like this <base href="$FLUTTER_BASE_HREF">. Given that FLUTTER_BASE_HREF is a variable, it can be modified.
How?: Provide --base-href argument to flutter build like below
HostingURL : https://<github_user_name>.github.io/project_aj/demo/gh-pages/
Apart from the https://<github_user_name>.github.io should go as the value for --base-href
flutter build web --base-href=/project_aj/demo/gh-pages/

400 Errors on Github Pages because of error on manifest.json being read as text/html

So I'm trying to serve my github pages website to https://dgatto.github.io/website/ and i keep getting these errors
Failed to load resource: the server responded with a status of 400 ()
manifest.json:1 Failed to load resource: the server responded with a status of 400 ()
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
I think that the 400's are because of the "syntax error" and I'm pretty sure that the syntax error is because of the manifest.json file being read as text/html in the network tab.
My question is, how do I change the server to accept the file as json? It's github pages so I don't really have access to the server itself.
Here's the repo if that helps: https://github.com/dgatto/website
Since you are serving your Application at https://dgatto.github.io/website/, you should define it as the homepage in your package.json file and then build.

angular-chart.js not loaded

I tried to use angular-chart. I've put Chart.min.js before angular-chart.min.js. Also I've checked those file at my root project. This is the dependency:
<script src="/bower_components/chart.js/dist/Chart.min.js"></script>
<script src="/bower_components/angular-chart.js/dist/angular-chart.min.js"></script>
But it produces an error:
(index):72 GET
http://localhost:5000/bower_components/chart.js/dist/Chart.min.js 404
(Not Found) (index):74 GET
http://localhost:5000/bower_components/angular-chart.js/dist/angular-chart.min.js
404 (Not Found)

Thymeleaf fails to load resources

Hello i'm trying to render my html page with thymeleaf but it fails to load the .js file. I'm using spring-boot and my file structure is src/main/resources/templates this contains all my html files. My css files are located in src/main/resources/static/css/. My .js files are located in src/main/resources/js/.
Now i tried rendering my guest.html file but it's failing to load resources as i tried inspecting the element on chrome and it displays error message below:
http://localhost:8080/js/bootstrap-formhelpers.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/js/bootstrap.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
Below is the issue in my guest.html file that fails to locate the resources:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" th:src="#{https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js}" ></script>
<script src="../js/bootstrap.min.js" th:src="#{js/bootstrap.min.js}"></script>
<script src="../js/bootstrap-formhelpers.min.js" th:src="#{js/bootstrap-formhelpers.min.js}"></script>
Spring Boot does not serve static content from src/main/resources by default. It serves content from the following classpath locations:
classpath:/META-INF/resources
classpath:/static
classpath:/resources
classpath:/public
Therefor, src/main/resources/static/css is served, but not src/main/resources/js/.
Move the js directory to the src/main/resources/static directory to have it served. Another option is to add a resource handler:
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/js/**")
.addResourceLocations("classpath:/js/");
}
You can also override the spring.resources.staticLocations property.
More information about serving static content with Spring Boot can be found in the Spring Boot Documentation: Static Content.

Bootstrap Example Not Rendering Gray Box. Everything Else Fine?

I used 'view source page' and took all the html from the this example on the bootstrap website: http://getbootstrap.com/examples/carousel/
It runs smoothly on my localhost using Django except for one small thing. That Gray Box within the sliding carousel doesn't appear? Oddly, if I put all the html into JSfiddle it's also missing.
I've included the CSS and works perfectly for everything else on the page:
<link rel="icon" href="../../favicon.ico">
<link href="carousel.css" rel="stylesheet">
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
So my django page looks exactly like this: http://jsfiddle.net/yU9zE/1/
Funkylaundry has identified that some of the css isn't loading for some reason. He found this warnings/errors using a debugging tool called firebug:
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/yU9zE/1/show/carousel.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/yU9zE/dist/css/bootstrap.min.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/yU9zE/assets/js/ie10-viewport-bug-workaround.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/yU9zE/assets/js/ie-emulation-modes-warning.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/yU9zE/dist/js/bootstrap.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/yU9zE/assets/js/docs.min.js
I'm not sure what to do because I'm new bootstrap and I usually just use a simple external css file. Should i be seeing new css files in my assets folder on django too? Becuase I don't. I'd love to get the gray box to appear, but I'm stumped.
It seems you did not hook your assets right (i.e. the carousel.css is never loaded). If you check your developer tools/firebug or whatever you're using you will see a bunch of 404s:
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/yU9zE/1/show/carousel.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/yU9zE/dist/css/bootstrap.min.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/yU9zE/assets/js/ie10-viewport-bug-workaround.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/yU9zE/assets/js/ie-emulation-modes-warning.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/yU9zE/dist/js/bootstrap.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/yU9zE/assets/js/docs.min.js