I hosted one of my project using GitHub pages but, for some reason, when I access the URL the page doesn't loads, and when I check it in the dev console it shows this error.
This is my GitHub page URL: https://prasunk96.github.io/colorsgame/
I checked that all the internal links that I have in my html file are all correct.
I have tried it several times but it showing the same problem again and again.
There are two issues with your CSS link:
It is not relative to your html file so the browser is trying to go directly from the base prasunk96.github.io/ and not include the /colorsgame/.
Github.io urls are case sensitive so your colorGamepro.css isn't being matched to the ColorGamepro.css file.
To correct the relative url you can either add a base tag to your HTML file or use a relative href. Once you correct the file name it should be able to find your file at https://prasunk96.github.io/colorsgame/css/ColorGamepro.css
In short use: href="./css/ColorGamepro.css"
Github project pages can sometime take a bit before being updated. See "My GitHub page won't update its content" for a similar issue.
I do see (a few hours later) a 404 for your css:
Try and see if using an anchored url works better:
<link rel="stylesheet" type="text/css" href="/css/colorGamepro.css">
^^^
|
Related
Let's say I have an object at http://mybucket.s3.amazonaws.com/folder1/folder2/pdf/something.pdf
There are NO other files in the bucket as this was setup for a legacy link that is being used in an old marketing campaign.
I want that link to redirect to https://example.com (the screenshot has a different domain but SO won't let me post it here).
Tried to setup static hosting with variations of this but can't seem to get this to work. Is there a way to do a redirect for this one file?
In the interim I had to add a blank pdf that just has a link for the user to click which isn't ideal.
I think this guide will work for you.
Basically it replaces the obsolete file with an HTML file, while retaining the old name something.pdf. The HTML contains meta header <meta http-equiv="Refresh" content="0; URL=http://www.example.com/target/"> that should force an instant redirect to the desired location. Make sure to edit the file metadata ContentType to text/html so that the browser is able to read it.
I tried this myself as well, it works!
The other option seems to be "Redirect requests for an object". Instructions are in the official documentation.
https://docs.aws.amazon.com/AmazonS3/latest/userguide/how-to-page-redirect.html
I've just set up a new GitHub Pages page: https://philipnye.github.io/ainfo. I'm not using Jekyll.
My GitHub repo has a web folder that itself contains a number of sub-folders, e.g. web/2044. Within each is an html file, with a name such as Abbey-Academies-Trust.html.
I was expecting to be able to view the relevant page at https://philipnye.github.io/ainfo/web/2044/Abbey-Academies-trust.html, but I'm getting a 404 error.
In that particular folder - web/2044 - I've also created an index.html file, but I'm getting a 404 error for https://philipnye.github.io/ainfo/web/2044/index.html too.
I'm clearly missing something, but I can't see anything in the documentation that suggests why this isn't working.
For the first url, it's a caps problem on Trust : https://philipnye.github.io/ainfo/web/2044/Abbey-Academies-Trust.html.
For the second url everything is ok. The problem was certainly that you have near 2000 pages and that Github page took a while to generate your site.
I've looked through just about every related question on here that I can find and none of the suggested solutions seem to resolve my problem.
I'm currently hosting a website on Amazon AWS using strictly the S3 and Route 53 tools to host a static website and re-route from a couple of different URL queries to our site. This morning I attempted to update the CSS files being used to style the webpage, as well as a bunch of new image files and some minor updates to the HTML pages, and noticed that all of my changes showed up immediately on the webpage except the changes I had made to my CSS file. I've checked, and the version of the file on the S3 is the correct/updated version, but when I attempt to use the Developer Tools in my web browser to inspect the webpage displayed, it's still showing an older version of the css file. This doesn't make any sense to me, as all of the other changes show up immediately except for this particular file. Does anyone have any thoughts on how to fix this/what could be going wrong?
NOTE: I'm not using AWS CloudFront on this webpage at all so I don't believe that any of the "invalidation" suggested elsewhere will help me. In the past, I've updated the files and seen immediate changes when loading my webpage.
You already know this is a browser cache issue - which you can clear the cache, but if you want to force everyone to automatically get the new CSS, what I usually do is add a query parameter to the file include, i.e. instead of
<link href="~/css/plugins/thickbox/thickbox.css" rel="stylesheet" />
do this:
<link href="~/css/plugins/thickbox/thickbox.css?v=1001" rel="stylesheet" />
and you can up the 1001 each time you push out an update - the browser will automatically grab the new file.
Google 'cache-busting' for other options.
When I run my project in browser I get the "can not find favicon.ico" error in browser console:
Failed to load resource: the server responded with a status of 404 (Not Found)
:8080/favicon.ico
But when I search for favicon in whole project in WebStorm it finds nothing:
This is normal. No matter if you declared it or not in your code, Chrome will try will try to fetch favicon.ico at the root of your site to display it in your tab. In your case it will try to fetch: http://localhost:8080/favicon.ico
All browsers will do this except SeaMonkey according to Wikipedia article on Favicon
In the old days, this was the standard way of personalizing the browser icon. Now there is a ton of possible icons you can set for various devices: https://stackoverflow.com/a/26768184/1375487
Also, you can check this answer as it suggests ways to prevent that auto-fetch: https://webmasters.stackexchange.com/a/34572
In any case, the best practice would be to set a favicon.ico for your project.
favicon.ico is the icon on the title bar in your website.
Browser did not find it in your website.
You should provide it to your index.html:
<link rel="shortcut icon" href="assets/images/favicon.ico">
The path you can change by your case.
I had a favicon working for a while on my index template, but not any any other template, and now even my index template won't show it.
I'm just in development, so I'm using ember server.
index.html
<link rel="icon" href="favicon.ico">
Just throwing around my favicon to see if it shows up anywhere, I now have it in the following locations:
app/
public/
public/assets
I think this should be very straightforward, especially since the index page doesn't change, just get's new stuff loaded into its outlets, so I can't figure out why it can't find my favicon file.
When running ember server, where actually is the / root pointing to?
If you keep the favicon file in public/assets/ you can reference it like this:
<link rel="icon" href="/assets/favicon.ico">
The Ember CLI docs have a good section on this
You could also check out ember-cli-favicon.
It's an addon that takes your source public/favicon.png and automatically outputs all the different favicon formats and sizes for different devices, as well as injects the appropriate HTML into your index.html file as part of the build process.