GitHub 页面和相对路径

2024-04-13

我创建了一个gh-pages我正在 GitHub 上开发的一个项目的分支。

我使用 Sublime text 在本地创作网站,我的问题是,当将其推送到 GitHub 时,所有指向 javascrips、图像和 css 文件的链接都无效。

例如,我的头部有这个。

<link href="assets/css/common.css" rel="stylesheet">

这在本地工作得很好,但在 GitHub 上不起作用,因为无法使用存储库名称作为 URL 的一部分来解析链接。

它要求:

http://[user].github.io/assets/css/common.css

当它应该要求时:

http://[user].github.io/[repo]/assets/css/common.css.

我当然可以将存储库名称作为 URL 的一部分,但这会阻止我的网站在开发过程中在本地工作。

知道如何处理这个问题吗?


你需要使用杰基尔 https://help.github.com/articles/using-jekyll-with-pages.

逐字复制相关文件 http://jekyllrb.com/docs/github-pages/#project-page-url-structure:

有时,在推送 Jekyll 网站之前预览一下 Jekyll 网站是件好事。gh-pages分支到 GitHub。然而,类似子目录的 URL GitHub 用于项目页面的结构使正确的操作变得复杂 URL 的解析。这是使用 GitHub 的方法 项目页面 URL 结构 (username.github.io/project-name/) 同时 保持在本地预览 Jekyll 站点的能力。

  1. In _config.yml,设置baseurl选项/project-name– 注意前导斜杠和尾部斜杠的缺失。

  2. 引用 JS 或 CSS 文件时,这样做:{{ site.baseurl}}/path/to/css.css– 注意紧随其后的斜杠 变量(就在“path”之前)。

  3. 当做永久链接或内部链接时,这样做:{{ site.baseurl }}{{ post.url }}– 请注意,之间没有斜杠 两个变量。

  4. 最后,如果您想在提交/部署之前预览您的网站,请使用jekyll serve,一定要传递一个空的 字符串到--baseurl选项,以便您可以查看所有内容localhost:4000通常(开头不带 /project-name):jekyll serve --baseurl ''

这样您就可以从网站根目录本地预览您的网站 localhost,但是当 GitHub 从 localhost 生成您的页面时gh-pages分支所有 URL 均以以下开头/project-name并解决 适当地。

(显然有人发现了这一点就在几个月前 https://github.com/mojombo/jekyll/issues/332#issuecomment-18952908.)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

GitHub 页面和相对路径 的相关文章

  • 在 Javascript 中获取文本框的值

    我有这个html代码 table border cellpadding 3 cellspacing 0 tbody tr td Song td td td tr tbody table
  • 如何隐藏 URL 中的 ID

    我以前在 Stack Overflow 上见过这类问题 但没有一个真正有帮助 我也用谷歌搜索过 但没有骰子 我想知道如果用户单击选项卡本身是否可以隐藏 URL 中的 ID 这是网页 www planet nu dev new experia
  • 为什么有些网站在 iPad 上无法缩放?

    有谁知道为什么 iPad 缩放 你知道 你用两根手指放大文本 屏幕 在某些网站上不起作用 例如 脸书网 c3 arc nasa gov nex 我正在工作的网站 谷歌搜索没有显示任何内容 这让我认为这不是一个常见问题 预先感谢您的任何见解
  • 如何在 Angular 模板中嵌入 GitHub gist?

    角度忽略script其模板中包含标签 但加载 GitHub gist 需要它们 执行此操作的最佳做 法是什么 使用iframe 创造script动态标记 或者是其他东西 一种方法是创建一个iframe with script里面并在你希望你
  • 修复 PHP 中格式错误的 HTML?

    我正在根据用户提供的片段构建一个大型 HTML 文档 这些用户有以各种方式格式错误的烦人习惯 浏览器足够强大且宽容 但我希望能够验证并 理想情况下 修复任何格式错误的 HTML 如果可能的话 例如 td b Title b td 可以合理地
  • min-height 和 height 属性有什么区别? [复制]

    这个问题在这里已经有答案了 我查了一下这个问题 但无法理解它与我的具体问题的关系 我将有问题的 html 设置如下 div class container fluid div class inner div class weatherdat
  • 单击 div 中的图像时如何翻转该 Div?

    好吧 我对编写 Javascript 知之甚少 我可以对其进行一些编辑 并且涉足了 CSS3 动画 我将向您展示我正在努力实现的目标 然后在下面进行解释 网站布局将是这样的 https i stack imgur com RMb4R jpg
  • HTML 中按钮内的图标

    我需要在 HTML 中将小图标放在按钮内 例如 我需要在我的网站上有 facebook 按钮 在按钮内首先是 F 图标 然后是 facebook 怎么做
  • 猫头鹰轮播,制作自定义导航

    所以我有一个包含三张图像的猫头鹰旋转木马 我还在左侧和右侧添加了自定义导航箭头 png 图像 然而 这些箭头目前是无用的 因为我找不到一种方法来真正让它们在我的猫头鹰旋转木马的图像之间切换 我无休止地寻找 找不到解决方案 有任何想法吗 您需
  • 由于合并而不允许 git revert 但未给出 -m 选项

    我正在尝试使用 revert 命令恢复到 git 中的某个 哈希 号 我正在使用以下命令 git revert c14609d74eec3ccebafc73fa875ec58445471765 但是 我得到以下返回 错误 提交 c14609
  • 在 Flask 中使用 html 运行 python 脚本

    我是 Flask 新手 我试图在单击 html 页面中的按钮时从后台运行 python 脚本 这是我的代码 from flask import from functools import wraps import sqlite3 app F
  • 如何在 Bootstrap 4 中隐藏和替换 navbar-toggler-icon?

    如何隐藏和替换 Bootstrap 4 中的导航栏切换图标 现在 下面的代码只是将 X 放在汉堡菜单下方
  • 如何在environment.yml中安装CRAN包

    我正在使用 miniconda 来管理数据科学包的安装 这是我现在已经建立的工作流程 所以我希望它也能在这种情况下工作 我也认为它可以工作 因为它应该在这样的情况下有所帮助 比纯 python 需要更多的依赖项 我想安装pythonCDT工
  • 根据屏幕尺寸更改图像 src

    我正在尝试使用媒体查询根据屏幕尺寸更改图像 src 我尝试过背景 url x 但它不起作用 我在某处读到我应该使用 content url x 代替 但是当我这样做时 我得到一个空白页面 谁能告诉我我的代码有什么问题吗 HTML div c
  • 如何从左向右滑动文本和图像并具有滑动效果[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 使用mysql数据按高低价格排序

    这是我所拥有的以及我想做的 我的 MySql 数据库中有 12 个项目 4 个产品为 4 99 4 个产品为 3 99 4 个产品为 2 99 我意识到我可以像这样查询数据库 它会给我一个该价格的产品列表
  • 指定 body CSS 宽度安全吗?

    现在通常满足于以一定的尺寸居中 div Blah div 不使用包装器进行对齐和大小并直接将其应用到body tag 像这样 Blah 尺寸是
  • 如何加载Jquery Tiny滚动条

    所以我想自定义一个滚动条 我发现了一个很小的滚动条 这是一个jquery插件 http baijs nl tinyscrollbar http baijs nl tinyscrollbar 问题是 无论如何我都无法让它工作 我将 Jquer
  • 调用一个从 AngularJS 表达式本地计算值的函数是不是很糟糕?

    我读了关于使用范围的一些 AngularJS 陷阱的文章 http thenittygritty co angularjs pitfalls using scopes 并且它指出您不应在表达式中使用函数 并且我知道每次框架认为需要时都可能会
  • 了解客户端文件的对象 URL 以及如何释放内存

    我在用createObjectURL获取本地图像文件的引用 URL 当我完成文件 图像后 我打电话revokeObjectURL释放该内存 一切对我来说都很好 但我只是想确保我释放了我能释放的所有内存 我检查后出现了我的担忧chrome b

随机推荐

  • 交换 img src 或显示/隐藏多个图像是否更快?

    在网页上交换图像时使用的最佳做法是什么 更改图像源或只是在页面上显示 隐藏多个图像 为了平衡速度 你必须做出选择 有两个选择 更改图像源 这样 页面加载速度会更快 因为它只获取可见图像 但当您更改 src 属性时 显示新图像将花费更长的时间
  • 如何创建具有逐字环境的新 Beamer 环境?

    我正在创建一个 Beamer 演示文稿 其中包含大量 LaTeX 示例 并且必须在逐字环境中进行 我厌倦了打字 begin example begin verbatim Verbatim Text end verbatim end exam
  • 对于大输入,十进制扩展程序运行速度非常慢

    我正在编写一个程序来计算数字的小数扩展103993 33102我想根据用户输入的数字打印出所有尾随小数 它可以快速运行所有数量最多10 5但如果输入10 6编程大约需要 5 分钟才能打印出答案 我怎样才能加快速度 我尝试了两种不同的方法 一
  • Java从ZipInputStream条目创建InputStream

    我想编写一个从单个 InputStream 读取 ZIP 内的多个 XML 文件的方法 该方法将打开一个 ZipInputStream 并在每个 xml 文件上获取相应的 InputStream 并将其提供给我的 XML 解析器 这是该方法
  • 基于 Django 年/月的帖子存档

    我是 Django 新手并启动了一个应用程序 我做了模型 视图 模板 但我想在底部添加某种存档 页面的内容 类似这样http www flickr com photos ionutgabriel 3990015411 http www fl
  • JPA实体扩展类包含@Id

    我有实体类都包含 id 作为主键 我可以创建包含所有公共字段的抽象类并允许所有类扩展该类 如下所示 public abstract class CommonFields Id Column name ID private long id p
  • 不可能:没有附加布局管理器;跳过布局

    我完全迷失了这个错误 我理解它 但我不知道出了什么问题 对于代码 In the OnCreate of my activity historyRecyclerView RecyclerView findViewById R id recyc
  • 在 kotlin 中何时一起使用挂起函数和 Flow 或分开使用?

    在审查用 kotlin 编写的一些代码时 有件事引起了我的注意 我在一些项目中查看领域层 在一些项目中 我看到挂起功能和 Flow 一起使用 而在一些项目中 我看到只使用 Flow 例如暂停和流动在一起 class FetchMovieDe
  • 如何在Python中隐藏控制台窗口?

    我正在用 Python 编写一个 IRC 机器人 我希望为 Linux 和 Windows 制作独立的二进制文件 主要是我希望当机器人启动时 控制台窗口应该隐藏 并且用户不应该看到该窗口 我能为此做些什么呢 只需将其保存为 pyw扩大 这将
  • 将一个变量设置为等于另一个变量[重复]

    这个问题在这里已经有答案了 我有一些关于在 JavaScript 中将变量设置为等于另一个变量的问题 假设我们创建一个对象 a并设置b a var a fname Jon lname Smith age 50 var b a 我明白如果我们
  • 音色 `set-config!` 已经改变了数量,因此不知道如何使用它来将 std err/out 输出到文件

    我正在尝试使用https github com ptaoussanis timbre https github com ptaoussanis timbre记录到文件而不是控制台 以下是我找到的一些有关如何执行此操作的文档 The defa
  • 为 libstdc++ 生成 CTAGS(来自当前 GCC)

    I know 你完成了我 https github com Valloric YouCompleteMe基于 LLVM 但我想使用OmniCppComplete http www vim org scripts script php scr
  • 操作码的十六进制值

    我创建了一个非常简单的汇编程序 可以在 DOS 中打印字母 a 我在十六进制编辑器中打开它 结果是这样的 汇编代码 mov ah 2 mov dx a int 21h 十六进制代码 B4 02 B2 61 CD 21 我想了解它是如何生成的
  • 在 pdf 中按宽度调整内容

    渲染为 pdf 时 我需要 html 页面为打印宽度的 100 否则内容会被切断 是否有捷径可寻 我想出了一个解决方法 它在渲染后获取 html 宽度 然后设置缩放系数以强制正确的宽度 var page require webpage cr
  • 如何确定视图的列是派生的还是常量?

    假设我有下表 create table t Item ItemID int not null identity 1 1 constraint PK Item primary key Description varchar 256 not n
  • Apache AVRO 与休息

    我正在评估将 Apache AVRO 用于我的 Jersey REST 服务 我将 Springboot 与 Jersey REST 结合使用 目前我接受 JSON 作为输入 并使用 Jackson 对象映射器将其转换为 Java Pojo
  • Laravel 4:在包中部署自定义 artisan 命令

    我开发了一些自定义 artisan 命令 以便更轻松地与我的包一起使用 是否可以将 artisan 命令包含到包中以便于部署 如果可以 怎样做 Thanks 在你的包结构中有一个命令集
  • 如何获取包含越界对象的绘图尺寸

    我可以这样计算图的高度 library ggplot2 library egg library gridExtra g lt ggplot iris aes x Species y Petal Length stat summary geo
  • 如何在 Laravel 中检索 Mailgun 传递的消息

    在我的 Node js 应用程序中 我遵循了 Mailgun 文档https documentation mailgun com en latest quickstart sending html send with smtp or api
  • GitHub 页面和相对路径

    我创建了一个gh pages我正在 GitHub 上开发的一个项目的分支 我使用 Sublime text 在本地创作网站 我的问题是 当将其推送到 GitHub 时 所有指向 javascrips 图像和 css 文件的链接都无效 例如