Resolved Secure site with Cloudflare

[montvil3]

I would like to secure my website using Cloudflare, but I can't figure out if that is possible or not on a free account or even on a paid plan.

My website is montville-weather.com

I created a new domain using the domain I bought from GoDaddy and removed my previous domain linked with x10host.com. I transferred all my files to the new domain, so the website is working fine. I changed the name servers on GoDaddy to the ones for Cloudflare. The website still loads on http, but with https I get a white page that says, "Apache is functioning normally". I'm not sure if that's because I removed x10hosting's name servers or if I just can't secure my site using this method.

Having a secure site isn't absolutely necessary, but I would like to have it if it's possible. Any advice would be appreciated.

 

[montvil3]

Well I'm not getting that apache message anymore. Going to the website automatically converts http to https, but the css and php is not loading right. This is using the flexible mode and not full. Trying to use Full gives me a 404 Error Message, as possible to flexible which doesn't load the css/php correctly.

Turning SSL/TLS encryption off, brings back the website without any issues.

 

[garrettroyce]

Flexible mode would be required on free hosting. I believe x10hosting premium supports even more modes of Cloudflare; namely you can use encryption between Cloudflare and x10.

Cloudflare does do some caching of some files; have you tried turning development mode on and reloading the page?

You may have to make your CSS and JS references HTTPS so you don't get security warnings and errors.

 

[montvil3]

Turning on development mode does nothing when I refresh the page. I tried removing the cache from Safari preferences and then reloading, but the website is still messed up. I also updated the path in my template to https://montville-weather.com, but that seems to have removed all of the images and icons. Not sure what other settings on Cloudflare I could try, or if there was anything on my DirectAdmin page I was supposed to change.

EDIT: It actually displays fine on Chrome, but not on Safari.

 

[montvil3]

Safari is first image, Chrome is the second. Not sure what is going on. Sometimes the CSS loads properly on both Safari and Chrome, sometimes it shows what is shown on the first picture. Other refreshes loads both the first image with the second image underneath it.

 

[montvil3]

I fixed the issue. In my admin panel for the template, I had the path set to https://www.montville-weather.com when it should have been set to https://montville-weather.com. Updating that change has resolved the mixed content issue and the Error 404 message on other pages.