蚊章汇 - Jekyll
type: channel
link: https://linuxcn.bwsl.wang/tag/Jekyll/
items: 用 Jekyll 和 Git 展示你的源码
items: 如何动态生成 Jekyll 配置文件
items: 使用 Jekyll 构建你的网站
items: Hugo 对比 Jekyll ：两大领先的静态页面生成器之间的比较

用 Jekyll 和 Git 展示你的源码
type: item
date: 2021-12-18T17:33:00+08:00
description: 我是如何通过链接每个页面回到其原始源代码来保持我的网站开放的。我是一个开源的超级粉丝。我支持这项事业的一个小方法是从一开始就保持我的个人博客网站开放。我这样做的部分原因是让人们看到每个页面背后的变化历史。还因为当我开始使用 Jekyll 时，我没有找到很多开源的 Jekyll 博客可以学习。我希望保持我的网站开放并公开我的尝试和错误，可以为其他人节省很多时间。Jekyll 的 page.path 变量我实现这一目标的方法之一是将我发布的每一个条目链接到其原始的 Markdown。Jekyll 的变量 中正好有一个需要的工具：page.path。这个变量包含每个页面的原始文件系统路径。官方的描述甚至强调了它的作用是链接回源！在一篇文章的 Markdown 文件中打印 {{page.path }}，可以得到类似这样的结果：_posts/2021-10-10-example.md 假设该文章的源代码存在于这个路径：https://example.com/ayushsharma-in/-/blob/master/_posts/2021-10-10-example.md 如果你在任何文章的 page.path 前加上 https://example.com/ayushsharma-in/-/blob/master/，它就会生成一个返回其源码的链接。在 Jekyll 中，生成这个完整的链接看起来像这样：View source 就是这么简单。Jekyll 和开放 Web现代 Web 是一种错综复杂的多层次技术，但这并不意味着它必须让人摸不清。有了 Jekyll 的变量，你可以确保你的用户可以，了解更多关于你是如何建立你的网站的，如果他们愿意的话。你可以在我的个人博客上看到真实的例子：滚动到底部的查看源码链接。本文改编自 ayush sharma 的笔记，并经许可转载。via: https://opensource.com/article/21/12/reveal-source-code-jinja2-git作者：Ayush Sharma 选题：lujun9972 译者：geekpi 校对：wxy本文由 LCTT 原创编译，Linux中国 荣誉推出

如何动态生成 Jekyll 配置文件
type: item
date: 2021-11-07T01:27:29+08:00
description: 使用 Python 或 Bash 将动态数据插入 Jekyll 静态网站中，并且避免创建一个 API 后端。静态网站生成器 Jekyll 使用 _config.yml 进行配置。这些配置都是 Jekyll 特有的。但你也可以在这些文件中 用我们自己的内容定义变量，并在整个网站中使用它们。在本文中，我将重点介绍动态创建 Jekyll 配置文件的一些优势。在我的本地笔记本电脑上，我使用以下命令来服务我的 Jekyll 网站进行测试：bundle exec jekyll serve --incremental --config _config.yml 结合多个配置文件在本地测试中，有时需要覆盖配置选项。我的网站的 当前 \_config.yml 有以下设置：# Jekyll Configuration # Site Settings url: "https://notes.ayushsharma.in" website_url: "https://notes.ayushsharma.in/" title: ayush sharma's notes ☕ + ? + ?️ email: ayush@ayushsharma.in images-path: /static/images/ videos-path: /static/videos/ js-path: /static/js/ baseurl: "" # the subpath of your site, e.g. /blog 由于本地的 jekyll serve URL 是 http://localhost:4000，上面定义的 URL 就不能用了。我可以创建一个 _config.yml 的副本 _config-local.yml 并替换所有的值。但还有一个更简单的选择。Jekyll 允许指定多个配置文件，后面的声明覆盖前面的声明。这意味着我可以用以下代码定义一个新的 _config-local.yml：url:"" 然后我可以把上述文件和我的主 _config.yml 结合起来，像这样：bundle exec jekyll serve --incremental --config _config.yml,_config-local.yml 通过合并这两个文件，这个 jekyll serve 的 url 的最终值将是空白。这就把我网站中定义的所有 URL 变成了相对的 URL，并使它们在我的本地笔记本电脑上工作。C结合动态配置文件一个简单的例子，假设你想在你的网站上显示当前日期。它的 bash 命令是：> date '+%A, %d %B %Y' Saturday, 16 October 2021 我知道我也可以 使用 Jekyll 的 \_config.yml 的自定义内容。我将上述日期输出到一个新的 Jekyll 配置文件中。my_date=`date '+%A, %d %B %Y'`; echo 'my_date: "'$my_date'"' > _config-data.yml 现在 _config-data.yml 包含：my_date: "Saturday, 16 October 2021" 我可以把我的新配置文件和其他文件结合起来，在我的网站上使用 my_date 变量。bundle exec jekyll serve --incremental --config _config.yml,_config-local.yml,_config-data.yml 在运行上述命令时，{{ site.my_date }} 输出其配置的值。结论上面的例子很简单，但可能性是无穷的。Bash、Python 和其他编程语言可以动态地生成 Jekyll 配置文件。然后我可以在 build 或 serve 过程中结合这些文件。对于 findmymastodon.com，我使用 Python 来获取 Mastodon 的用户统计数据。然后我把这些写进一个新的 \_config-data.yml 文件（目前是手动）。最后，主页和其他页面从配置文件中显示这些。这样，我就可以利用一个动态的后台，并且仍然保持我所喜欢的所有静态网站的优点。我希望这能为你自己的静态网站激发一些想法。Jamstack 对于静态网站是很好的，但你可以避免为动态内容创建整个 API 后台。为什么不使用一个构建作业来创建带有更新内容的配置文件呢？这可能不适合每一种情况，但少一个 API 意味着更少的基础设施移动部件。我希望这能在你的下一个静态网站项目中给你一些帮助。继续阅读，并祝你编码愉快。这篇文章最初发布在 作者的网站 上，并经授权转载。via: https://opensource.com/article/21/11/j…

使用 Jekyll 构建你的网站
type: item
date: 2021-10-12T22:53:58+08:00
description: Jekyll 是一个开源的静态网站生成器。你可以使用 Markdown 编写内容，使用 HTML/CSS 来构建和展示，Jekyll 会将其编译为静态的 HTML。近年来开始流行静态网站生成器和 JAMStack，而且理由很充分，它们不需要复杂的后端，只需要静态的 HTML、CSS 和 Javascript。没有后端意味着更好的安全性、更低的运营开销和更便宜的托管。双赢！在本文中，我将讨论 Jekyll。在撰写本文时，我的个人网站使用的是 Jekyll。Jekyll 使用 Ruby 引擎将用 Markdown 编写的文章转换成 HTML。Sass 可以将复杂的 CSS 规则应用到普通文本文件中。Liquid 允许对静态内容进行编程控制。安装 JekyllJekyll 网站 提供了 Linux、MacOS 和 Windows 安装说明。安装完成之后，快速引导 将会安装一个基础的 Hello-World 项目。现在在你的浏览器访问 http://localhost:4000，你可以看到你的默认“真棒”博客。目录结构这个默认站点包含以下的文件和文件夹：_posts: 你的博客文章。_site: 最终编译成的静态网站文件。about.markdown: “关于页”的内容。index.markdown: “主页”的内容。404.html: “404 页”的内容。_config.yml: Jekyll 的全站配置文件。创建新的博客帖子创建帖子很简单。你需要做的就是在 _post 目录下使用正确的格式和扩展名创建一个新文件，这样就完成了。有效的文件名像 2021-08-29-welcome-to-jekyll.markdown 这样。一个博客文件必须包含 Jekyll 所谓的 YAML 卷首块 Front Matter 。它是文件开头的一个包含元数据的特殊部分。如果你查看默认的帖子，你可以看到以下内容：--- layout: post title: "Welcome to Jekyll!" date: 2021-08-29 11:28:12 +0530 categories: jekyll update --- Jekyll 会使用上面的元数据，你也可以自定义 key: value 键值对。如果你需要一些提示，请查看我的网站的卷首。除了前面的问题，你还可以 使用内置的 Jekyll 变量 来自定义你的网站。让我们创建一个新的帖子。在 _posts 文件夹下创建 2021-08-29-ayushsharma.markdown。内容如下：--- layout: post title: "Check out ayushsharma.in!" date: 2021-08-29 12:00:00 +0530 categories: mycategory --- This is my first post. # This is a heading. ## This is another heading. This is a [link](<http://notes.ayushsharma.in>) This is my category: 如果 jekyll serve 命令仍在运行，刷新页面，你将看到下面的新帖子。恭喜你创建了你的第一篇帖子！这个过程看起来很简单，但是你可以通过 Jekyll 做很多事情。使用简单的 Markdown，你可以归档博客、高亮显示代码片段以及分类管理帖子。草稿如果你还没准备好发布你的内容，你可以创建一个 _drafts 文件夹。此文件夹中的 Markdown 文件仅通过传递 --drafts-- 参数来呈现。布局和包含请注意 _post 文件夹中两篇文章的卷首块，你将在其中看到 layout: post。_layout 文件夹中包含所有布局。你不会在源代码中找到它们，因为 Jekyll 默认加载它们。Jekyll 使用的默认源代码在 这里。如果你点击该链接，你可以看到 post 的布局使用了默认（default）布局。默认布局包含的代码 {{ content }} 是注入内容的地方。布局文件还将包含 include 指令。它们从 include 文件夹 加载文件，并使用不同的组件组成页面。总的来说，这就是布局的工作方式：你在卷首块定义它们并将你的内容注入其中。而包含则提供了页面的其它部分以组成整个页面。这是一种标准的网页设计技术：定义页眉、页脚、旁白和内容元素，然后在其中注入内容。这就是静态站点生成器的真正威力，完全以编程的方式控制，将你的网站组装起来并最终编译成静态的 HTML。页面你网站上的所有内容并不都是文章或博客。你需要“关于”页面、“联系”页面、“项目”页面或“作品”页面。这就是“页面”的用武之地。它们的工作方式…

Hugo 对比 Jekyll ：两大领先的静态页面生成器之间的比较
type: item
date: 2017-06-24T18:52:00+08:00
description: 如果你正在建一个新的网站，静态页面生成器或许是个正确的选择。除非你是像艾米莉·狄金森那样深居简出的人，否则，当做了点事情后，你就会想要与这个世界分享。分享你的作品意味着需要一个网站。当然，你可以只是享受数字时代的便利，使用任何不同的社交网站来将你的作品呈现在观众面前。还有很多选择，不仅仅是传统的社交网站，例如 Artstation、Flickr、Soundcloud、Wattpad，不管你的媒介是什么，总有一款属于你的网站。实际上，你应该使用这些网站，毕竟，人们都在这些网站上。然而，没有一个地方是真正属于你的。没有一个网站是你能保证不管社交趋势如何，人们都能在该网站上找到你的作品的。控制权，这是拥有一个在网上属于自己的地方的意义。但是这篇文章不打算介绍注册域名和托管你的网站。要介绍的是后续的步骤，真正地制作网页。对于很多人来说，典型的选择是使用像 WordPress 那一类的软件。在大多数主机托管商上，只需一次点击即可安装，然后就会有海量的插件和主题可供选择。插件和主题的选择取决于你想要制作的网页的类型。但是 WordPress 不仅对于大部分网站来说有点过犹不及，还给了你一个有许多活动部件的动态页面。如果你没有保持这些部件最新，这些部件可能造成重大安全隐患，你的页面因此被劫持。替代方法是拥有一个静态网页，在服务端没有任何动态内容生成。只有一些原先的 HTML 和 CSS （或许还有点 Javascript 也挺好）。这种选择的不好的一面是以后你要亲自动手编写所有的代码。虽然可行，但你只是想要个地方来展示你的作品而已，你并不想知道底层网页设计的特性（和重要的但却令人头疼的跨浏览器兼容性）。使用静态页面生成器。你得到了静态 HTML 页面的速度与安全，但是是以有着接近于动态页面的便利性的工作流程完成的。在静态页面生成器世界的两大先驱是 Hugo 和 Jekyll ，（顺道说下，Paolo Bonzini 的文章 《Jekyll 起步》 写得不错）但是哪一个才是你的正确选择？希望阅读完这篇文章，你会更加了解。我们将基于易上手性、主题可用性、编辑方式和拓展性这几点评估这两个静态页面生成器。开始公平地提醒一下，这两个都需要你在命令行下使用他们。大部分命令都很直接和易于记忆，但是让我们相应地调整下我们的期望吧，这不是点击几下鼠标就能做事的界面。Jekyll 和 Hugo 的安装都相当的简单。 Jekyll 以 RubyGem 的方式安装，Hugo 提供了一个方便的集成的二进制文件让你迅速上手。因为安装包单一，Hugo 以微弱优势领先。虽然 Jekyll 的 RubyGems 安装方式本身就很简单，但是它确实需要你已经在你的电脑上正确安装并且配置好 Ruby 环境。除了社区设计者和网页开发者，大部分的使用者并没有提前安装好。虽说是这样，但是一旦安装好，Hugo 和 Jekyll 都很好用。它们都有良好的文档和快速开始指南。你用一个简单命令新建一个页面（在 Jekyll 里是 jekyll new <your_site> ，在 Hugo 里是 hugo new site <your_site>，译者注：<your_site> 指代你网页的名称）。这一步新建了一个通用目录结构和你网站的大致内容。目录结构和基本的配置都十分相似。Jekyll 使用一个 _config.yml 文件，Hugo 使用 config.toml（虽然你能在 Hugo 的配置里使用 YMAL 或者 JSON 语法，如果觉得其中一个使用起来更舒服的话）。每个内容文件的 前置配置 （ front matter ） 元数据使用相同的配置语法。然后，所有的内容都是用 Markdown 写的。我想说就帮助你开始第一个静态网页这一点来说，Jekyll 稍微领先于 Hugo ，因为它能以一些基本的内容和一个默认主题开始着手使用。当在建设网页时，你能使用这些内容作为一个样板。Hugo 没有样例内容，甚至没有一个默认主题。即便如此，样例内容和默认主题是我在用任何工具建设网站时第一个删除的内容，因此 Hugo 事实上帮我节省了这一步。主题正如我所提到的，Hugo 根本没有默认主题，所以主题可能是你打算最先设置的。Jekyll 有一个得体的默认主题，虽然它只是个骨架。你或许也会想去为你的 Jekyll 页面找一个主题。Hugo 和 Jekyll 都有多种多样的各类主题，网页样式从单页面的主题到带有博客和评论的完善的多页面主题都有，一应俱全。尽管如此，想找到满足你需求的主题事实上并不简单。无论使用哪个，主题网站——Hugo 的 themes.gohugo.io 和 Jekyll 的 jekyllthemes.org ，基本上都是一个充满主题截图的巨大页面。一旦你点击主题，你能得到关于该主题的一些…