如何让 GitHub 的 Jekyll 与 index.html 一起工作？
Posted
技术标签:
【中文标题】如何让 GitHub 的 Jekyll 与 index.html 一起工作？【英文标题】：How to make GitHub's Jekyll work with index.html? 【发布时间】：2021-01-13 17:35:48 【问题描述】：我正在尝试制作一个 GitHub 页面。一开始，我使用 GitHub 生成器。我加入了Gemfile 和_config.yml 来生成SEO 标签，它按预期工作。生成的网站将包括以下部分。
<!-- Begin Jekyll SEO tag v2.6.1 -->
<meta ...
<!-- End Jekyll SEO tag -->
现在，我刚刚使用来自html5 UP 的 HTML 模板将我的网站更新为新网站。它正常启动并运行，但是，我找不到让 Jekyll 为我的index.html 文件生成 SEO 标记的方法。我尝试在第一行的index.html 中添加三个破折号（前面的内容）。
---
---
<!DOCTYPE HTML>
<!-- Other code below -->
问题是，它部分破坏了网站（页面未正确呈现）。因此，我必须复制/粘贴生成的标签并将它们手动添加到我的代码中。有没有办法让 Jekyll 为我的网站正确创建 SEO 标签？还是我在这里误解了一些非常基本的东西？
需要明确的是，我在 Web 开发方面的知识非常有限，这就是我首先使用模板的原因。这是我的页面，以防它有助于澄清问题https://hunghvu.github.io/，这是它的GitHub repository，以防您想知道文件结构。
更新
(09/30)
我尝试将index.html 文件转换为index.md，同时仍保留所有代码（加上三重破折号）。从某种意义上说，它有效。该页面已生成，但仍然没有像我使用 html 格式时那样正确呈现。我知道使用 Jekyll 实际构建网站的方式有很大不同，但这并不能回答我的问题。
如果有必要通过“未正确呈现”来说明我的意思，我将在稍后更新此问题。
(09/31)
下图是我添加front matter和% seo %后页面的样子。请注意，当我第一次进入页面时，侧边栏已经在SOME OTHER WORK 或最后一节中。它应该在WELCOME 上。 WELCOME 部分未呈现，侧边栏功能已损坏。
【问题讨论】：
您是否将% seo % 标记添加到您的索引站点？
我试过了，添加在head部分的底部，但它不起作用。
“不起作用”是什么意思？结果如何？
它在页面上呈现为一行文本。就像一个没有任何 css 元素的纯 html 页面。
你能添加一个截图吗？我怀疑您的默认布局可能是原因。
【参考方案1】：
问题
GitHub pages gem 未包含在您的项目中，因此 GitHub 未运行 Jekyll 构建。此外，您在前面的事情中没有任何指定。你也没有布局。
解决方案
在您的 Gemfile 中包含 gem "github-pages", "~> VERSION", group: :jekyll_plugins。
注意事项
考虑使用 front matter 并创建一个布局文件 _layouts/default.html 并将除正文（包括 SEO）之外的所有内容移动到布局文件中。 index.html 应该通过在前面指定 layout 属性来扩展布局。
参考文献
头条：https://jekyllrb.com/docs/front-matter/ GitHub（第 9 步）：https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/creating-a-github-pages-site-with-jekyll
【讨论】：
我将尝试_layouts 方法并稍后报告结果。您是否介意详细说明“将除正文（包括 SEO）之外的所有内容移动到布局文件中。”对我意味着什么？据我所知，您发送的教程（我之前确实看过）是关于使用 Jekyll 完全创建 GitHub 页面，但 我想要的是让 Jekyll SEO 插件与我的非Jekyll 页面 为了方便起见，所以我认为它没有帮助。
@HungVu 你不能。 Jekyll SEO 插件仅在您使用 Jekyll 时有效。不使用 Jekyll 就无法使用它。你不能有一个静态页面和也使用插件。这根本不是它的工作原理。
@Hung Vu 首先将 GitHub gem 添加到您的项目中。然后通过 Jekyll 教程来创建布局等。
看来我没有办法让 Jekyll SEO 插件与网站一起工作，除非我按照建议完全使用 Jekyll 重建网站，这不是我的首选方法。无论如何，谢谢你的回答。以上是关于如何让 GitHub 的 Jekyll 与 index.html 一起工作？的主要内容，如果未能解决你的问题，请参考以下文章
hexo与jekyll 搭建github pages 哪个好
如何在 github.io 上使用 Jekyll 制作一本书
如何将 Jekyll 站点从 github repo 部署到我的 ftp？
markdown 如何使用Jekyll在GitHub页面上嵌入Gist的示例。