Github Pages doesn't show my index.html - html

I just recently bought a porfolio template and try to install it onto github pages. It will only show the background but there will be no images or text.


Note that your Github Pages site is hosted over https and your template is including plain text http links to resources. You cannot safely load plain text http resources in a secure https connection. You need to fix the error messages such as:
Blocked loading mixed active content http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic”
Note the conversion from http to https in the following links:
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
And there's another with the jQuery link:
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
On a related note, your repository is missing the magnifique popup library. You can replace the URL with a link to a CDN. For example, change this line...
<script src="js/jquery.magnific-popup.min.js"></script>
to this line...
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>


It's loading your index.html just fine, the problem is that your webpage is loading resources over insecure http when github defaults to using secure https, this results in mixed content errors so a bunch of other resources are failing to load.

Related

CSS not loading for GitHub pages

I have a site published with GitHub pages:
https://safelyswift.github.io/Swizzle/
I want to use docs/css/style.css in my index.html file. I have tried using the full url, GitHub raw url, and shortened url but none of them work.
ie: I have tried many variations on this line:
<link rel="stylesheet" href="https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css">
<link rel="stylesheet" href="/Swizzle/docs/css/style.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/SafelySwift/Swizzle/master/docs/css/style.css">
but none work.
Getting error:
Did not parse stylesheet at 'https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css' because non CSS MIME types are not allowed in strict mode.
in Safari debug console.

Try: <link rel="stylesheet" href="css/style.css">

You should link to css/style.css, which is short of https://safelyswift.github.io/Swizzle/css/style.css because the root directory of your GitHub Page is /docs.
The reason "https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css" not work is because this link actually goes to the GitHub code preview page. It's not a valid CSS file but an HTML page with lots of GitHub functions(preview, commit log, history, etc.) But "https://safelyswift.github.io/Swizzle/css/style.css" is served by GitHub Page, so this link contains only pure CSS file which is valid.
To see the difference between these files. Just navigate these link with your browser, and right-click your page to see the source code. You can see what your browser sees there.

Files load using different file paths on server and local

When using css on my local Dreamweaver setup, I can only use the URL "./path/to/url" to load files. This is a problem, because on the server, I can only use the url "/path/to/url". Is there any reason this is happening?
Example :
<link rel='stylesheet' type='text/css' href='./css/Defaults.css'> on local,
<link rel='stylesheet' type='text/css' href='/css/Defaults.css'> on server.
This has been an ongoing problem for a while now and all previous answers found on google and stack overflow haven't worked.

Cache online fonts in <link> tag

I load two fonts from google fonts with <link> tag in document header.
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'>
The problem is website always load fonts from URL and don't cache them (I think).
How can I cache these fonts and force to load them from local if they are present?
Thank you :D

Loading Google Fonts over HTTPS still give MixedContent error

I recently added SSL to my website but it keeps giving me the error:
Mixed Content: The page at 'https://youtubehulp.nl/comingsoon/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic'. This request has been blocked; the content must be served over HTTPS.
While the link to the fontsheet is https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic
I also tried downloading the file and then loading the local version but that didn't work either.
Tried code:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="font.css">
#import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");
Also made sure all links in the font file are HTTPS
I hope someone can help me with this.

You have a simple typo in your stylesheet https://youtubehulp.nl/comingsoon/css/style.css:
#import url("https//fonts.googleapis.com/css?family=…");
^^
The : is missing after the protocol name. Therefor, it is a relative URL, and when the browser makes an absolute URL out of that using the current URL, the result naturally is https://youtubehulp.nl/comingsoon/css/https//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic
And requesting that URL makes your server issue a redirect to http://www.youtubehulp.nl/comingsoon – and that is the origin of the mixed content warning.

Stylesheets not linked with https

I have a standard page, with the following code on
<head>
<link href="http://path.to/stylsheet.css" rel="stylesheet">
</head>
However when I load the page via https and force https traffic through ReWrite conditions the stylsheet fails to load
Any Ideas?
Thank's in Advance
-C

Access your stylesheet over HTTPs as well.
<link href="https://path.to/stylsheet.css" rel="stylesheet">

All files in a site must be references as https if you intend to use it.

The syntax below allows your stylesheet to be loaded via whatever protocol your site is accessed through (assuming the stylesheet is accessible via http and https:
<link href="//path.to/stylsheet.css" rel="stylesheet" />