从 GitHub Pages 中删除 html 扩展

Posted

技术标签:

【中文标题】从 GitHub Pages 中删除 html 扩展【英文标题】：Remove html extension from GitHub Pages 【发布时间】：2014-02-10 06:24:09 【问题描述】：

我正在使用 GitHub 页面来托管我的最新网站：

http://mysite.github.io/

我想知道是否有办法从子页面的末尾删除 .html 扩展名：

http://mysite.github.io/contact.html

因为无法访问服务器。

【问题讨论】：

【参考方案1】：

它已经工作了，你不需要做任何事情

我不确定您是否已经意识到这一点，但要从 GitHub Pages 中删除 .html 扩展名，您所要做的就是从您的链接中删除 .html 扩展名。

换句话说，它已经有效，您无需执行任何操作。您不必使用子目录、CNAME、重定向、Jekyll _config.yml、YAML front-matter 或此处所有答案中建议的任何其他 hack。

示例

例如你可以使用：

https://rsp.github.io/gh-pages-no-extension/test1

代替：

https://rsp.github.io/gh-pages-no-extension/test1.html

它会显示相同的文件。 只需更改链接中的链接即可。

测试

我做了一些测试来演示它是如何真正工作的，您可以点击链接并突出显示哪个文件加载了哪个 URL，包括在某些情况下有关不安全重定向的警告。

例如，链接：

https://rsp.github.io/gh-pages-no-extension/test1

显示它是由URL中的test1显示的，但实际上显示的是文件test1.html：

其他解决方案的问题

在其他答案中建议的特殊子目录中使用 index.html 之类的东西不会做你想做的事，这只是在要求example.com/name 时提供example.com/name.html，而是会给你一个301重定向到@ 987654339@（注意尾部的斜杠）这反过来会给你example.com/name/index.html文件的内容。

这会导致以下问题：您位于不同的目录中，您需要使用<a href="../name"> 而不是仅使用<a href="name"> 来链接到同一级别的其他页面，并且所有资产也是如此（或者您可以像有人建议的那样使用绝对路径，这在 GitHub 页面（尤其是项目页面）上不是一个好主意，因为在分叉和项目重命名之后，您必须记住更新所有 html 文件中的所有链接和 js/css 资产）。

另一件事是，现在您对每个导航都有一个无用的重定向 - 它顺便将 从 HTTPS 重定向到 HTTP（从安全 URL 没有斜杠 to带有斜线的不安全 URL），例如见：

https://rsp.github.io/gh-pages-no-extension/dir（安全 HTTPS）

（在撰写本文时）重定向到：

http://rsp.github.io/gh-pages-no-extension/dir/（不安全的 HTTP）

并且不：

https://rsp.github.io/gh-pages-no-extension/dir/（安全 HTTPS）

如您所料，请确保您了解这一点。看： （请注意，此图片链接到安全的 HTTPS URL，但您最终使用了不安全的 HTTP 连接 - 您可能需要使用隐身模式才能看到这一点。）

截至 2016 年 6 月 17 日，标题如下所示：

$ curl -I https://rsp.github.io/gh-pages-no-extension/dir
HTTP/1.1 301 Moved Permanently
Server: GitHub.com
Content-Type: text/html
Location: http://rsp.github.io/gh-pages-no-extension/dir/
...       ^^^^

希望 GitHub 将来能解决这个问题。 （大约一年前我在写这个答案时发现了它，到 2016 年 6 月这个问题仍然存在。）

虽然奇怪的是，截至 2016 年 6 月 17 日（我不确定是否总是如此，因为我最近在更新此答案时注意到了）此 URL：

https://rsp.github.io/gh-pages-no-extension（安全 HTTPS）

重定向到：

https://rsp.github.io/gh-pages-no-extension/（安全 HTTPS）

应该如此。见标题：

$ curl -I https://rsp.github.io/gh-pages-no-extension
HTTP/1.1 301 Moved Permanently
Server: GitHub.com
Content-Type: text/html
Location: https://rsp.github.io/gh-pages-no-extension/
...       ^^^^^

唯一的区别是它是一个项目根 URL，而不是项目内部的更深目录（请参阅the project structure），因此错误重定向似乎只存在于项目 GitHub 页面内的深层链接中，并且在我的一个浏览器上仅在您使用隐身模式时进行测试。

底线是您需要小心。我的建议是完全避免所有重定向，并且只使用那些根本不会导致任何重定向的 URL。

【讨论】：

有没有办法阻止这种行为发生谷歌已经索引了有和没有.html的同一个页面我希望他们只创建我指定的canocal格式 快速注意：扩展名必须是“.html”而不是“.htm”，否则它不起作用。 @ChaseMoskal Google 不应将任何找不到链接的 URL 编入索引，因此，如果您始终链接到 / 而从不链接到 /index 或 index.html，那么它永远不会到达那里，但如果有这样的链接，那么它可以去那里并索引一个副本。请注意，对于每个带有/ 和/index.html 的服务器都是如此——这里有第三个/index 添加到这两个服务器上。为避免 Google 索引重复，您可以使用规范网址 - 请参阅：support.google.com/webmasters/answer/139066?hl=en 测试示例似乎不再起作用。 Github 最近有没有做出重大改变？ @JānisErdmanis 似乎是他们的一个错误。现在已经解决了……呸。我以为我必须重写所有链接。【参考方案2】：

我假设您必须使用子目录（但可能有更简单的方法）：

/index.html            => http://jasonhoffmann.github.io
/contact/index.html    => http://jasonhoffmann.github.io/contact

但是，您可以使用 CNAME 将 GitHub 页面重定向到您自己的 domain 进行更多控制。抱歉，我没有给你一个明确的答案，但希望这可以让你开始。

【讨论】：

【参考方案3】：

您可以通过 Jekyll 来做到这一点，这是一个内置在 GitHub Pages 中的静态站点生成器。它有一些permalink settings，可以在_config.yml（这将影响您网站上的所有页面和帖子）或YAML front-matter 中为每个页面/帖子设置。

例如，您可以将以下代码添加到您的 contact.html 文件中：

---
permalink: contact/
---

这将被插入到 <!DOCTYPE html> 之前，但 Jekyll 会在它在 GitHub Pages 上提供时小心地将其删除。执行此操作后，您将能够访问jasonhoffman.github.io/contact 而不是jasonhoffman.github.io/contact.html 的页面。 Jekyll 实际上在做的是创建一个名为contact 的目录，并在其中放入一个index.html 文件，其中包含您的contact.html 内容。如果你install and run Jekyll locally，你会看到：

.
|- _config.yml (optional)
|- contact.html
|- index.html
|- css
   |- styles.css
|- img
   |- image.jpg
|- _site
   |- index.html
   |- contact
      |- index.html
   |- css
      |- styles.css
   |- img
      |- image.jpg

如果你没有在本地安装 Jekyll，你会看到所有这些，减去 _site 文件夹。当您将其推送到 GitHub 时，他们的服务器将运行 Jekyll 并为您生成和提供相当于 _site 的文件夹（但它不会在您的 GitHub 存储库中可见）。

您也可以跳过 Jekyll，创建一个 contact 子目录，其中包含 index.html。无论哪种方式，您还需要确保您网站中任何指向资产（img、css、js）的链接前面都有/。例如，

<link rel="stylesheet" href="css/style.css">

应该是

<link rel="stylesheet" href="/css/style.css">

【讨论】：

【参考方案4】：

我正在使用arctic fox theme，其中uses following link strings：

<a class="page-link" href=" page.url | prepend: site.baseurl "> page.title </a>

解决方案是添加remove: '.html'作为过滤器，结果是

<a class="page-link" href=" page.url | remove: '.html' | prepend: site.baseurl "> page.title </a>

Local serving with Jekyll 目前不起作用，但承诺用于 Jekyll 3.0：https://github.com/jekyll/jekyll/pull/3452

【讨论】：

当主题使用 .html 扩展时，这是要走的路，谢谢！【参考方案5】：

现在，您只需添加permalink: /your-pretty-url

另一个答案不起作用。我试过了。您需要添加“/”前缀。

例如：

---
layout: post
title:  "Welcome to Jekyll!"
date:   2017-04-29 22:04:31 +0700
categories: jekyll update
permalink: /welcome
---

【讨论】：

你明白了！ permalink: pretty 是要走的路 jekyllrb.com/docs/permalinks【参考方案6】：

正如用户 rsp 提到的，漂亮的永久链接已经由 GitHub Pages 实现，并且不需要做任何事情，在本地或默认情况下在 Jekyll 中运行 Jekyll 服务器时不会这样做。如果你想在自己的非 Github Pages 站点（仍然由 Jekyll 提供）中使用 Jekyll 从页面中删除 html 扩展，或者在推送到 GitHub 之前尽可能有一个类似于 Github Pages 的本地开发站点，

您只需将其添加到 _config.yml 文件：

permalink: pretty

这通过使所有帖子都有自己的文件夹并将帖子命名为 index.html 来从链接中删除 .html。

【讨论】：

不适用于arctic fox theme。必须使用page.url | remove: '.html'。本地服务将适用于 Jekyll 3.0 及更高版本：github.com/jekyll/jekyll/pull/3452 您是否在 GH Pages 上托管并使用了他们的 jekyll 版本？【参考方案7】：

通过将永久链接更改为删除 .html 扩展名

permalink: /:title/

别忘了最后一个/

【讨论】：

你把这个放在哪里？【参考方案8】：

您可以做一件简单的事情，那就是创建一个包含您的 html 文件名的文件夹...在您的情况下，它将是 /contacts。然后将您的contacts.html 重命名为index.html，然后将其移动到您创建的/contacts 文件夹中。

输出： http://mysite.github.io/contact

【讨论】：

以上是关于从 GitHub Pages 中删除 html 扩展的主要内容，如果未能解决你的问题，请参考以下文章

创建github仓库的gh-pages分支

Razor Pages Anchor Tag Helper 不会从 href 中删除索引

在github中使用pages上传自己的网页

如何将你的github仓库部署到github pages(转)

设置github上项目主页

php 从PAGES中删除帖子编辑器元框