简体   繁体   English

Github Pages上的Jekyll部署格式不正确,链接断开

[英]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和Github,我很难让我的网站在线正确显示,但在我运行时它在本地显示正确:

jekyll serve --baseurl ''

My Github repo that I am working on is http://yungkickz.github.io/kingwizard 我正在研究的我的Github回购是http://yungkickz.github.io/kingwizard

Github Tree Github树

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; 编辑:基本上整个网站缺少正确的CSS,链接指向错误的地方; especially the first Home and About link as any the other links were made to just test. 特别是第一个Home和About链接,因为任何其他链接只是为了测试。

My config.yml: 我的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 另外在这里我添加了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>

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 // . 您对HTML,CSS和JavaScript文件的许多引用都以//开头。 It seems like site.baseurl is set to / on GitHub for some reason, despite the setting in your config file. 尽管在配置文件中进行了设置,但似乎site.baseurl由于某种原因设置为/在GitHub上。 However, you often add addition slashes after site.baseurl in paths, which causes the second slash to appear. 但是,您经常在路径中的site.baseurl之后添加附加斜杠,这会导致出现第二个斜杠。

  2. Because site.baseurl is / , browers will expect to find your files at http://yungkickz.github.io/SOME_PATH . 因为site.baseurl/ ,所以浏览器会在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. 但是,您的站点实际部署到http://yungkickz.github.io/kingwizard ,因此您的链接应指向http://yungkickz.github.io/kingwizard/SOME_PATH

  3. Because of the 404 errors, your CSS styles are not loaded, which is why your site looks like it isn't formatted correctly. 由于404错误,您的CSS样式未加载,这就是为什么您的网站看起来没有正确格式化。

Before: 之前:

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

After: 后:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM