如何在Github Project Pages网站上使用github.io网站中的主题

时间:2019-09-11 18:45:37

标签: jekyll navbar travis-ci github-pages

我从事my website的开发工作已经有两年了,在此过程中我学到了很多有关JavaScript,CSS,HTML,Bootstrap,Jekyll,Travis-CI和Github Pages的知识。 (长列表是花这么长时间的主要因素。)

我发现了一种使用Travis部署到仓库的gh-pages分支(包含令牌和gem对其进行加密)的巧妙方法,实际上使它成为了我网站的子域。示例:hereherehere

这非常棒,但是那些子页面最终感觉像它们不是同一网站的一部分,因为它们没有提供返回首页的方法。我希望他们包括我的navbar

是否有一种优雅的方法?

2 个答案:

答案 0 :(得分:0)

我还没有实现此功能,所以还有很多,但我想我已经找到了规范的解决方案,并希望自己记录下来。

所有Github Pages网站都有一个主题。您可以:

  1. 转到设置->选项->向下滚动到Github Pages和select a theme from the theme chooser。这是 lame ,因为只有很少的默认选择,您不能自己定制主题以反映网站的特质。
  2. 或者您可以将_config.yml文件添加到项目中,当github生成Github Pages网站时,github将尝试读取并遵循该文件。您可以在其中指定theme,白名单中的一个选项(有限列表)或remote_theme,任何人都可以创建。这是 great ,因为您可以指定自己的主题。

这意味着具有一致的导航栏和主题的方法以及User Pages Site and all my Project Pages Sites中的所有内容都是从用户页面网站中将我的主题挑出到其自己的存储库中,然后从配置文件中的所有其他网站中引用它。

听起来像杂事,但肯定有助于提高可重复性。

我可能还需要在每个项目的顶层指定index.md,以取代自述文件作为主页,并确保将<head>之类的内容和导航栏插入其中。

答案 1 :(得分:0)

昨天我终于经历了并完成了what I theorized about in SeptemberThe result lives here nowdespite the documentation trying to be helpful这不是一个容易的过程,因为Jekyll和GitHub页面的交集是一个非常复杂的不透明框,而ruby对我来说并不熟悉。但最终归结为几个重要步骤和陷阱:

  1. 您将需要红宝石和几个包裹。 sudo apt install ruby应该给您ruby(解释器)和gem(程序包管理器)。

    • Gotcha 1a:基础知识尚待解释,所以请允许我:Ruby代码来自称为gems的软件包,与python软件包非常相似。它们由gembundler而不是pip管理,并托管在rubygems.org而不是pypi上。就像在Python世界中,每个人都对conda赞美一样,在Ruby世界中,每个人都对bundler赞美,gem install本身就是一颗宝石,您必须gem因为它没有像bundle install github-pages本身那样被红宝石包装。我发现捆绑器有故障。当我尝试github-pages时,它挂起(稍后在Gemfile上进行介绍)。此外,捆绑程序还依赖于称为requirements.txt的更多配置文件,这些配置文件与pip文件bundle exec jekyll serve {em>可以相似,但不需要 进行摄取。老实说,谁愿意在一个没有复杂依赖树的小型项目中找到更多的杂物?还有谁想jekyll serve而不是gem?你在跟我开玩笑吗?只需使用Gemfile进行安装,然后跳过pip。与sudo apt install jekyll类似,我发现越简单越好。
    • Gotcha 1b:如果您github-pages,则将获得旧版本,例如3.1或类似版本。但是杰基尔是一颗宝石。您可以并且应该使用软件包管理器进行安装。 (但是实际上不要这样做,因为它是gem install jekyll gem的一部分,而且版本也不相同。稍后会详细介绍。)
    • Gotcha 1c:哦,那是什么?您想gem install bundler(甚至是sudo apt install ruby-dev)吗?是的,抱歉,我不能这样做,因为缺少一些东西,这里有很长的打印输出。 ... Google,Google ... sudo apt install g++。哦,抱歉,我 still 无法建立。这是一些 other 错误。 ... Google,Google ... jekyll。好的, now 可以。对于您来说,此过程可能会略有不同。关键是要建立一个红宝石环境。
    • Gotcha 1d:哦,那是什么?现在,您希望能够像在刚刚安装apt的情况下那样从命令行调用gem吗?好吧,很抱歉,我是jekyll,有时候我没有在您的路线上放gem。如果您遇到这种情况,请注意sudo ln -s /path/to/jekyll /usr/bin/jekyll保存gem的位置,在其中找到可执行文件,然后使用assets
    • 创建符号链接
  2. _includes_layouts_sassrubygems.org从站点移至新的存储库。做完了am您现在有一个远程主题。确实应该那么容易,但是...

    • Gotcha 2a:没有人告诉您这是最低可行的产品,因此您必须首先了解什么是远程主题以及它们如何工作。根据佳能的说法,它们是成熟的宝石。当您引用一个网站时,Jekyll需要先获取它,然后才能生成您的网站。 The Jekyll documentation旨在指导您如何将主题真正包装为宝石并将其推向.gemspec,这需要:(1)一个rubygems帐户,(2)您的主题包含remote_theme: user/theme-name文件,其内容没有得到很好的解释。继续阅读为什么这无关紧要。
    • Gotcha 2b:您必须了解 GitHub Pages 如何实际使用远程主题。关于这个主题,GitHub很高兴地告诉您关于在利用站点的_config.yml(Jekyll配置)中添加.gemspec的信息,但是他们却没有事先告诉您是从某个地方还是从某个地方获取宝石。事实证明,他们正在使用另一个名为jekyll-remote-theme的gem从存储库中直接提取原始文件,从而完成了编译和上传gem的步骤,并使.css没人理解或不想看不必要。 (祝你好运。)我只能在benbalter的远程主题gem本身的文档中找到此信息。
    • Gotcha 2c:请注意,由于Pages is still on Jekyll 3.8.6,您在like being able to define site data in the theme's _config.yml上的GitHub Pages上没有某些功能。结果,我的前置assets包含一些Liquid标记,这些标记在我未分离的站点的一部分上可以正常工作,最终在生成的站点中替换了空字符串标记。我最终以hard-coding some variables为主题。
    • Gotcha 2d:其他任何文件夹和文件(不在_includes_layouts_sasstheme中)(我有一个名为{{1} }包含像我的收藏夹之类的东西。)不要折叠到主题gem或通过GitHub采用的jekyll-remote-theme机制进行运输。通过仔细修改.gemspec,可以将这些文件包含在gem中,但是此方法对jekyll-remote-theme的行为没有影响,因此我最终基本上将所有内容都放在了assets中。 / li>
    • 投诉2e:Ruby Sass is apparently deprecated now?为什么杰基尔继续使用了这么长时间?我仍然没有遇到一个看起来有用的例子。
  3. 在要在主题中呈现项目页面的每个回购的_config.yml分支的根目录中放置一个包含remote_theme: yourname/yourtheme的{​​{1}}。没有Gemfile,没有废话。只需等待它部署。

    • Gotcha 3a:Jekyll专门在gh-pages中查找page.html文件中的{em} 以呈现_layouts的内容。如果您有readme,则可以使用Liquid标签向其中添加头部,导航栏和其他page.html东西。如果您碰巧忘记了此文件,或者认为Jekyll可以使用_includes,那么您就错了,并且该主题未应用。不确定post.html是否可以用作故障转移。无论如何,带有Jekyll的GitHub页面是 super 脆弱的,老实说,我很幸运能够发现它而没有被它阻止,因为(1)我还没有看到任何GitHub文档来准确描述正在调用哪些命令来生成项目页面,(2)您看不到远程编译过程的终端输出**,以及(3),因为您不知道GitHub在做什么,所以没有办法将其复制到本地以查看警告或错误打印输出-这是 if Jekyll甚至就此警告您。
      **如果实际上有办法在某个地方查看此内容,请告诉我。 GitHub says:“当您在GitHub上对发布源进行更改时,GitHub Pages将尝试构建您的网站。如果构建失败,您将在您的主要电子邮件地址收到一封电子邮件。您还将收到一封电子邮件。有关构建警告。您可以在站点存储库的“设置”选项卡中的GitHub上看到站点的构建失败(但没有构建警告)。”我确实收到一封电子邮件,指出“ default.html的第15行上的标记include_cached不是公认的Liquid标记。”但我不记得这是用于哪个版本的,而且我找不到故障记录在任何地方的回购设置中。
    • Gotcha 3b:如果您更新主题,则不会重建使用该主题的Pages网站以反映主题更改。您必须手动重新推送到构建站点的分支才能触发站点重建。对于我已与Travis-CI集成的存储库来说,这很容易,因为我可以在列表中重新运行最新的版本,最终将结果推向/_layouts/default.html分支,从而导致Pages服务器重新构建。但是对于其他站点,我必须进行一些合法的更改或推送一个空的提交。
  4. 在您的“用户页面”网站的gh-pages中添加plugins: - jekyll-remote-themeremote_theme: yourname/yourtheme

    • Gotcha 4a:本地执行令人困惑。 benbalter's readme很好,但是“用法”部分仍假定您正在使用_config.yml。如果您不是,那么bundler就像您将安装其他gem一样。此gem实际上是其他大量的Pages服务器实际运行以生成您的静态站点所用的gem,包括gem install github-pagesjekyll的相同版本。您将需要这些,以便您可以捕获所有细微的版本或在本地显示错误,并且在云中不会感到惊讶。最后,尽管似乎不需要实际部署,但对于本地执行,您必须确保将jekyll-remote-theme作为插件添加到利用站点的jekyll-remote-theme中。否则会出现_config.yml错误。
    • Gotcha 4b:具有远程主题的本地执行已中断-或at least it is for Jekyll 4.0.0。对于Jekyll 3来说,它工作正常,这是GitHub Pages服务器使用的东西,这就是为什么它可以很好地部署的原因。如果您使用jekyll serve而不是gem install jekyll列表获取Jekyll,则可能会像我一样遇到错误。

因此事后看来,这基本上并不难,但是要实现盲目飞行的惨败只是用过于冗长,令人失望的不完整地图来指导您。我希望GitHub可以向您展示某个终端中站点编译和部署的整个过程,就像Travis-CI进行构建一样。我希望Jekyll不会那么复杂。功能太多,无数次失败都会消失。

我希望这项研究可以对其他人有所帮助。