Page only displaying text

[audreycs]

• I have read the Filing Issues and subsequent “How to Get Help” sections of the documentation.
• I have searched the issues (including closed ones) and believe that this is not a duplicate.

• OS version and name:
• Python version: 3.11.6
• Pelican version: 4.8.0
• Chrome version: 118.0.5993.117
• Link to theme: https://github.com/ivanhercaz/buruma
• Link to your site: https://audreyw.top/

Issue

I've hosted my personal page https://audreyw.top/ on this Github repo, but it does not display properly when opening with Chrome. It only shows text but no theme. However, when I open it with Safari, it displays fine.

Initially, I suspected this might be an issue specific to Chrome. However, when I build the site locally and access it at http://127.0.0.1:8000/, everything appears as intended in Chrome.

This sounds very bizarre, and any solutions or advice would be appreciated!

[justinmayer]

Hi Yuxin. Your site definitely does not load properly for me in Safari, but the cause has nothing to do with Pelican itself. I highly suggest that you become familiar with the development tools built into browsers, as they will usually point you in the right direction. This case is no different in that respect, as I see a bunch of errors in Safari > Develop > Show Web Inspector > Console tab that have to do with CORS, re-directs, and loading insecure content.

In short, these issues have nothing to do with Pelican itself and everything to do with how modern browsers work (or don't work) with mixed HTTPS/HTTP content loading.

[audreycs]

Thank you! I will have a check on the browser.

[audreycs]

Problem solved!

So as @justinmayer suggested, I checked Chrome's web Inspector and came across the following error:

mixed content: the page at 'https://my.custom.domain/' was loaded over https, but requested an insecure stylesheet 'http://my.custom.domain/theme/css/style.min.css'. this request has been blocked; the content must be served over https.

This error suggest that the style.min.css was loaded through http while the website was accessed via https. Chrome blocked it since http is viewed as insecure. Initially, I followed the solutions in this post by changing all http://... links in my pelican config and content files into https://.... But this error somehow persisted even though the .html sourse of my page didn't contained any http links.

Then I checked Safari's web inspector, and I noticed errors related to 'redirection conflict'. This led me to thought the custom domain might be the cause. Previously, I set SITEURL as the original github.io domain https://myusername.github.io. But now I am using a custom domain for my page. This seemed to create a conflict in website direction? After I set SITEURL as my custom domain address, the website can be loaded properly.