How do I properly deploy my Jekyll blog on GitHub pages

Question

I created a simple Jekyll blog by following the instructions in the Quick-start guide in http://jekyllrb.com/docs/quickstart/.

I changed the blog a little bit to suit my needs and was able to successfully implement these changes and view them locally. But, as soon as I deployed the blog on Github Pages, I get this

http://palpen.github.io/palpen_articles/

which is nothing like the local version of the site. What did I do wrong?

I'm new to all of this, so forgive me if my mistakes are trivial. The GitHub repository for the blog lives here:

https://github.com/palpen/palpen_articles

Thank you

Answer 1

By going off the assumption that you mean the styling is off.

I opened the dev console in your website and noticed there was this error

http://palpen.github.io/palpen_articles/palpen_articles/css/main.css Failed to load resource: the server responded with a status of 404 (Not Found)

Notice that it's attempting to access a nested deep resource with your site host.

The culprit is this line

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

https://github.com/palpen/palpen_articles/blob/gh-pages/_includes/head.html#L9

When you prepend the base url for the site it creates a link

<link rel="stylesheet" href="palpen_articles/css/main.css">

If you prepend the / to that href your site style actually looks better.

Note that there are a couple of other links which are broken as well because of this reason.

The issue is that your _config.yml file contains a bad baseurl. The baseurl should be /palpen_articles instead of just palpen_articles.

Answer 2

Perhaps you might face more trouble in the future if locally you don't use the same environment as GitHub does. You'll need to serve Jekyll with bundler to accomplish that.

Take a look at this answer to check how to do it.

Hope to have helped!