Search code examples
htmlcssgithubjekyllgithub-pages

My CSS doesn't render at all when I host my jekyll on gh-pages with my own domain

When I test my site on local host, the CSS and JavaScript are looking perfect. But when I push it to github repo I only see the HTML. No style. https://github.com/jaubut/website I've tried to change my URL to https://chanvrequebec.com in my config.yml. I've also try to change my href="/css/main.css" to href="css/main.css". BUT NOTHING happens at all. I don't know what to do. Please help. Thanks

Solution

  • your website is beautifully displayed at http://chanvrequebec.com/ - not https:// as described in your question!

    If you have a SSL/TLS certificate for this domain, you'll need to change the url on _config.yml to the same protocol https://chanvrequebec.com

    Things to be aware of:

    1st. in you _config.yml you've set:

    markdown: redcarpet

    But from May 1st on, GitHub Pages will not support redcarpet anymore. So, I suggest you to change it to:

    markdown: kramdown

    2nd. Your website should be also completely accessible under http://jaubut.github.io/website, but it's not, due to mistaken configuration of GitHub Pages. You created a project website, so you'd need to set the baseurl to baseurl: '/website' to correct that. Or set the url to http://jaubut.github.io/website. But this not the best approach here, as all your internal links would redirect the pages to the github.io subdomain.

    So, finally, to fix this properly, the best approach would be:

    • Create a new repository called jaubut.github.io (User website)
    • Transfer the content of your repo website into the master branch of the repo created on the previous step
    • Keep your _config.yml the way it is now
    • Your website will be accessible under http://jabot.github.io and also under http://chanvrequebec.com/
    • Delete website repository
    • If you have a SSL/TLS digital certificate for your domain chanvrequebec.com, don't forget to change the url on your _config.yml from url: "http://chanvrequebec.com" to url: "https://chanvrequebec.com"

    Done!

    I hope to have helped!