Styles not rendered on deployment

[jwillmer]

Styles not rendered on deployment

[jwillmer]

Hi, you have a mixed content problem:

Mixed Content: The page at 'https://svanimisetti.github.io/USDCND17/' was loaded over HTTPS, but requested an insecure stylesheet 'http://svanimisetti.github.io/USDCND17/css/screen.css'. This request has been blocked; the content must be served over HTTPS.

This is a SSL problem and not a theme problem. Read about the problem: What Is Mixed Content?

For my blog I used the following setup:

• CNAME file in root of the GitHub project and content https://jwillmer.de
• Custom domain in Project Settings to jwillmer.de
• Cloudflare > Crypto > SSL: Flexible
• Cloudflare > PageRules:
  1. http://jwillmer.de/* : Always use SSL
  2. https://jwillmer.de/* : Cache Level: Cache Everything
  3. http://www.jwillmer.de/* : Forwarding URL: 301 - Permanent (https://jwillmer.de/$1)

[jwillmer]

Please merge to the latest version. It does not fix your problem and the latest bug is resolved in your current fork but I refactored the urls in my last commit to improve the readabillity of the theme code.

[svanimisetti]

Great! Thanks Jens.

[svanimisetti]

@jwillmer A quick note. This issue was with mixed content and I was able to figure out why. I had by mistake used 'http' on the 'url' parameter in _config.yml file. I udated it to 'https' and the site is rendered properly now.

[jwillmer]

Ah, o. K., thx for the info I will reference this issue any time someone else will have such a problem :-)

[jwillmer]

Now that I listed all the steps in this issue I used it to create a quick blog post about the setup called Setup custom domain and SSL for GitHub hosted website

[svanimisetti]

@jwillmer I have followed the instructions in your blog to the tee, but for some reasons am unable to get the website to work. Here are my steps and a few question:

1. Got a domain name for myself from namecheap.com for svanimisetti.in
2. Settings at namecheap.com for custom DNS pointing to Cloudflare servers (redundant pair). All other settings on namecheap.com are disabled or left at their defaults. I assume that the DNS management will be offloaded completely to Cloudflare.
3. Created free website on Cloudflare for svaimisetti.in.
4. Added single CNAME DNS record (NAME: www, VALUE: svanimisetti.github.io). If I try to give the full URL with https, Cloudflare seems to complain. There are warnings about A/AAA/CNAME entry for root doamain, which I am ignoring for now.
5. On page rules, I have replicated the settings from your blog.
6. On my GitHub repository, I have used a Slate Jekyll theme. For testing purpose, I have created an 'index.html' file with 'Hello World!' for content.
7. Created CNAME in repo root with (https://svanimisetti.in) as contents - as you suggest in your blog. I see different information on GitHub Docs.
8. Updated _config.yml to add 'url' variable. Again, 'https://svanimisetti.in' was used.
9. I also went ahead and updated the project settings -> 'Custom Domain' and input the domain root there ('svanimisetti.in'). One thing I noticed here is that if CNAME is populated with domain root as per GitHub docs, the settings don't complain. But, if I use a full https qualifier (https://svanimisetti.in) - then it shows a warning "Domain's DNS record could not be retrieved.".
10. Nonetheless, I have tried almost 8-9 combinations of settings, and nothing seems to help!

If I disable all settings related to svanimsetti.in, and try to load http://svanimisetti.github.io - I see the "Hello World!" prompt as expected.
Any of your thoughts would be really helpful.

[jwillmer]

Your _config.yml looks o.k. too me but your CNAME is missing https://. I don't know if it makes a difference and it is hard for me to diagnose because you use essentially 3 services and there can be an error in any one of them. Let me know if the CNAME change helps.

I read that GitHub does not promote having https:// in the CNAME but I guess using it forces SSL. I added an image of my current Cloudflare config to the blog post, maybe that helps you?

[svanimisetti]

Are you using Cloudflare as your registrar too? I can see that Cloudflare redirects to https://svanimisetti.in. But for some reason, GitHub pages are not serving that request.
Is there something specific to your setup - choice of service providers, etc? Perhaps you purchased some security/SSL certificates?

[jwillmer]

There is an option in your GitHub project to set a custom domain. I think it is set automatically by setting the CNAME but please double check.

[jwillmer]

I did not purchase any certificate.

[svanimisetti]

@jwillmer After multiple permutations and combinations, I have managed to get the setup working. The settings for me are quite distinct to what you describe in your blog. I found that the "Crypto" and "DNS" settings were the main areas where I had to experiment. Now the website is up an running. I will be running up a similar blog with my learning shortly. Thanks a lot for your help!

[jwillmer]

Can you tell me which settings differ from mine so that I can edit the blog post?

[svanimisetti]

@jwillmer Immediately below are GitHub settings. Further below is the summary of Cloudflare settings.

GitHub changes

Added enforce_ssl: svanimisetti.in to _config.yml (this is in addition to your recommendation).

DNS entries

Type	Name	Value	TTL
CNAME	svanimisetti.in	svanimisetti.github.io	Automatic
CNAME	www	svanimisetti.github.io	Automatic

Crypto

SSL : Full
Automatic HTTPS Rewrites : On

Note that the communication between GitHub and Cloudflare is also secured. So, it doesn't need to be 'Flexible' anymore. Note that 'Full (Strict)' will not work as GitHub/Cloudflare communication is not based on authenticated certificate.

Page rules

These are identical to the settings you indicate in your blog.

I will be replicating this in my blog - with of course a link to your original post. Is that fine by you?

I am all set will my personal and project website. I am using your template for one of my project websites. I think its coming out fab! Thanks for helping out!

[jwillmer]

Cool, thx for the info. Feel free to post a tutorial as well 👍