CODEWITHSUNDEEP
csslayoutgithubjekyllblogs
Dog
Dog

Reputation: 2916

Jekyll Blog Not Displaying Properly After Pointing to Custom Domain

I've searched everywhere for a solution to this issue but no sources address this directly. I have a Jekyll Blog setup through Github at: http://jwolfe890.github.io/johns_tech_blog/

I went through the process of setting up a CNAME, purchasing a domain and hosting and connecting this domain to GITHUB.

However, once the connection was made between my host (namecheap) and Github, the blog was published/redirected to my custom domain www.johnwolfe.tech however the css formatting and links no longer work. Although it does work if I run jekyll serve and access the link through that approach.

While some sources have discussed this issue when it occurs directly with github, I haven't found any sources that address when the wrong layout occurs because of adding a custom domain name, so I'm lost.

The github repository for the blog is:

https://github.com/jwolfe890/johns_tech_blog

The custom domain I added was:

johnwolfe.tech

And the original github link was:

jwolfe890.github.io/johns_tech_blog/

Thank you very much for your insight!

Upvotes: 2

Views: 459

Answers (2)

David Jacquel
David Jacquel

Reputation: 52829

You have to change baseurl in _config.yml.

baseurl: ""

And the way you call your css in _includes/head.html :

<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">

Bonus : Allowed markdown files extensions are, by default, markdown, mkdown, mkdn, mkd, md. That's why your _posts/2016-06-6-my-fascination-with-css.mdown is bugging.

Upvotes: 1

akajut
akajut

Reputation: 31

Change your baseurl: "" in _config.yml to baseurl: "/".

The code in your head.html include is <link rel="stylesheet" href="{{ "css/main.css" | prepend: site.baseurl }}">

Jekyll renders this code as <link rel="stylesheet" href="css/main.css">. That code tries to find main.css relative to the page.

Add the / and the code rendered will be <link rel="stylesheet" href="/css/main.css">. This will try to find main.css relative to the site root.

More info on relative paths - http://www.motive.co.nz/glossary/linking.php

Upvotes: 1

Related Questions