CODEWITHSUNDEEP
rubyjekyllliquidgithub-pages
Steve McGeachy
Steve McGeachy

Reputation: 33

Jekyll Deployment on Github Pages doesn't format correctly and links broken

I am learning about how to use Jekyll and Github recently and I am having a hard time getting my website to display correctly online but it does display correctly locally when I run:

jekyll serve --baseurl ''

My Github repo that I am working on is http://yungkickz.github.io/kingwizard

Github Tree

Any help or hints would be super helpful.

Edit: Basically this entire website is missing the correct CSS and links are pointing to the wrong place; especially the first Home and About link as any the other links were made to just test.

My config.yml:

name: kingwizard
description: wizardly blog

paginate: 5
url: "http://yungkickz.github.io"
baseurl: /kingwizard


markdown: rdiscount

Also here I've added the beginning of the html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ site.description }}">
    <meta name="author" content="">

    <title>{{ site.name }}</title>

    <!-- Bootstrap core CSS -->
    <link href="{{ site.baseurl }}/css/bootstrap.css" rel="stylesheet">

    <!-- Custom Arreis Style -->    
    <link href="{{ site.baseurl }}/css/custom-style.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="{{ site.baseurl}}js/html5shiv.js"></script>
      <script src="{{ site.baseurl}}js/respond.min.js"></script>
    <![endif]-->
  </head>

Upvotes: 3

Views: 2082

Answers (1)

Nicky McCurdy
Nicky McCurdy

Reputation: 19573

Judging from the source code of your site, I have noticed some issues:

  1. Many of your references to HTML, CSS, and JavaScript files begin with //. It seems like site.baseurl is set to / on GitHub for some reason, despite the setting in your config file. However, you often add addition slashes after site.baseurl in paths, which causes the second slash to appear.

  2. Because site.baseurl is /, browers will expect to find your files at http://yungkickz.github.io/SOME_PATH. However, your site is actually deployed to http://yungkickz.github.io/kingwizard, so your links should be pointing to http://yungkickz.github.io/kingwizard/SOME_PATH instead.

  3. Because of the 404 errors, your CSS styles are not loaded, which is why your site looks like it isn't formatted correctly.

Before:

<link href="{{ site.baseurl }}/css/bootstrap.css" rel="stylesheet">

After:

<link href="/kingwizard/css/bootstrap.css" rel="stylesheet">

Upvotes: 4

Related Questions