Github page not working completely

Question

I've created my github.io page but it's graphics are not loading completely and browser display a warning: opera has blocked content of this page which comes from insecure sources.

How to fix this?

my github page: https://msdeep14.github.io

repo link: https://github.com/msdeep14/msdeep14.github.io

Answer 1

Page URLs in https should NOT link to http resources.

You might have hard-coded 'http' only values for your assets like css and images. Debug your page in inspector and see network log.

Press F12.

Answer 2

What Bimal already was trying to say: Your page is served via HTTPS (that is, over an encrypted connection). To ensure that everything is secure in such a case, browsers require all resources, like CSS and JavaScript files and images to be also served via HTTPS.

The easiest solution in your case is to replace all occurrences of http: with https: and check if the page still works. If it doesn't, then some file is presumably not available via HTTPS. In that case, you might need to add it to your Github repo and change the link accordingly.

Answer 3

You can use https:// in the URLs of the external elements used by your page (images, scripts, stylesheets) as other answers suggest.

But you can do even better by using protocol-relative URLs, like this:

<link rel="stylesheet" type="text/css" href="//msdeep14.github.io/static/css/syntax.css" />

For URLs of resources located on your own domain you can even use host-relative URLs:

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

(but you have to stick to the first form for URLs outside your domain).

Both the above solutions work (since forever) with all browsers. The browser compute the complete URLs using the URL of the current page as base. This way, when the page is loaded using HTTP , the external resources are also loaded using HTTP and when it is loaded using HTTPS , the resources are also loaded using HTTPS and the browsers do not display annoying warnings.