我是如何通过链接每个页面回到其原始源代码来保持我的网站开放的。

我是一个开源的超级粉丝。

我支持这项事业的一个小方法是从一开始就保持我的个人博客网站开放。我这样做的部分原因是让人们看到每个页面背后的变化历史。还因为当我开始使用 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 中，生成这个完整的链接看起来像这样：

<a href="{{ page.path | prepend: site.content.blog_source_prefix }}" target="_blank">View source</a>

就是这么简单。

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中国 荣誉推出

使用 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: [email protected]
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/jekyll-config-files

作者：Ayush Sharma 选题：lujun9972 译者：geekpi 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

Jekyll 是一个开源的静态网站生成器。你可以使用 Markdown 编写内容，使用 HTML/CSS 来构建和展示，Jekyll 会将其编译为静态的 HTML。

近年来开始流行静态网站生成器和 JAMStack，而且理由很充分，它们不需要复杂的后端，只需要静态的 HTML、CSS 和 Javascript。没有后端意味着更好的安全性、更低的运营开销和更便宜的托管。双赢！

在本文中，我将讨论 Jekyll。在撰写本文时，我的个人网站使用的是 Jekyll。Jekyll 使用 Ruby 引擎将用 Markdown 编写的文章转换成 HTML。Sass 可以将复杂的 CSS 规则应用到普通文本文件中。Liquid 允许对静态内容进行编程控制。

安装 Jekyll

Jekyll 网站 提供了 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。

页面

你网站上的所有内容并不都是文章或博客。你需要“关于”页面、“联系”页面、“项目”页面或“作品”页面。这就是“页面”的用武之地。它们的工作方式与“帖子”完全一样，这意味着它们是带有卷首块的 Markdown 文件。但它们不会放到 _posts 目录。它们要么保留在你的项目根目录中，要么保留在它们自己的文件夹中。对于布局和包含，你可以使用与帖子相同的布局或创建新帖子。 Jekyll 非常灵活，你可以随心所欲地发挥你的创意！你的默认博客已经有 index.markdown 和 about.markdown。请随意自定义它们。

数据文件

数据文件位于 _data 目录中，可以是 .yml、.json、.csv 等格式的文件。例如，一个 _data/members.yml 文件可能包含：

- name: A
 github: a@a

- name: B
 github: b@b

- name: C
 github: c@c

Jekyll 在网站生成的时候读取这些内容。你可以通过 site.data.members 访问它们。

<ul>
{ % for member in site.data.members % }
 <li>
 <a href="https://github.com">
      { { member.name } } 
 </a>
 </li>
{ % endfor %}
</ul>

永久链接

你的 _config.yml 文件定义了永久链接的格式。你可以使用各种默认变量来组合你自己的自定义永久链接。

构建你最终的网站

命令 jekyll serve 非常适合本地测试。但是一旦你完成了本地测试，你将需要构建要发布的最终工作。命令 jekyll build --source source_dir --destination destination_dir 将你的网站构建到 _site 文件夹中。请注意，此文件夹在每次构建之前都会被清理，所以不要将重要的东西放在那里。生成内容后，你可以将其托管在你的静态托管服务上。

你现在应该对 Jekyll 的功能以及主要部分的功能有一个全面的了解。如果你正在寻找灵感，官方 JAMStack 网站上有一些很棒的例子。

编码快乐。

本文首发于作者个人博客，经授权改编。

via: https://opensource.com/article/21/9/build-website-jekyll

作者：Ayush Sharma 选题：lujun9972 译者：perfiffer 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

如果你正在建一个新的网站，静态页面生成器或许是个正确的选择。

除非你是像艾米莉·狄金森那样深居简出的人，否则，当做了点事情后，你就会想要与这个世界分享。分享你的作品意味着需要一个网站。当然，你可以只是享受数字时代的便利，使用任何不同的社交网站来将你的作品呈现在观众面前。还有很多选择，不仅仅是传统的社交网站，例如 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 ，基本上都是一个充满主题截图的巨大页面。一旦你点击主题，你能得到关于该主题的一些十分详细的信息，但是对于初步搜索相当困难。Hugo 的主题站有一些基本的标签分类，但是大体上在我看来，主题搜索和展示都是这两个项目需要继续努力的。

主题管理也是一个有趣的主题。在两个项目中，几乎每一个主题都是一个 Git 仓库（经常是托管在 Github 上），你需要 克隆 （ clone ） 下来到你的网页建设地。在 Jekyll 里，有额外的使用 RubyGems 的 bundle 的步骤来确保主题是由网站管理的。大部分主题都有一个 Gemfile，使得这一步骤轻松不少。如果主题没有一个 Gemfile，添加也相当简单。在 Hugo 里没有捆绑这一操作，只要在 config.toml 指向你的主题即可。

我发现我偏爱 Hugo 的主题处理。你可以 克隆 （ clone ） （或者新建）主题到 themes 里它们自己的子文件夹里。这不仅使得当你开始时能轻松地切换主题，而且也能让你用自己的文件替换主题里的任何组件。这意味着你能根据自己的品味自定义主题，而不用弄乱原始主题，使得这主题也可以通用于其他人。当然如果有一个你觉得其他用户会觉得值得的改变，你仍然可以编辑源文件，提交一个 PR（ 拉取请求 （ pull request ） ）给主题维护者。

工作流程

一旦你设置好初始的配置，Jekyll 和 Hugo 的网站建设流程都很相似。两者都有一个实时的 serve 命令，能在你的电脑上运行一个小型、轻量级的网页服务器，所以你能在在本地测试你的网站而不用上传到哪里。很棒的是无论你是运行着 jekyll serve 还是 hugo serve，都默认配置为当你为之开发时，监视你对网站的任何修改。当你在浏览器里看本地版的网站时，它会根据你的修改自动更新，不管你改的是内容、配置、主题、还仅仅是一张图片。这确实很方便和节约时间。

在两个系统中都是用 Markdown 写你的网站内容。如果碰巧你不熟悉 Markdown，（我来解释下，）它是种很简单的纯文本编写方式，还能有一些很好用的格式化符号。它很容易使用而且可阅读。而且因为是纯文本，你的内容（其实是你的网站）很容易进行版本控制。这是我最近写几乎所有东西的主要方式。

新内容能通过在正确的地方手动创建文件添加到网站里。新的文件只需要是有恰当的 前置配置 （ front matter ） 元数据的 Markdown 文件即可。至于配置文件，Jekyll 对于前置配置使用 YAML 语法，Hugo 接受 TOML、YAML 或者 JSON（默认是 TOML）。新文件需要放置在正确的文件夹内，在 Jekyll 里你需要把你编写中的文件和已经完成了的内容页分别放在 _drafts 和 _posts 目录中。在 Hugo 中只有单独一个 content 目录。你可以根据文件的前置配置判断这是否是一个草稿。

现在，虽然可以手动完成所有这些事情，但是 Hugo 提供了一些方便的功能确保你的新文件创建在正确的文件里，那些文件也用恰当的前置配置预先配置好了。简单地在终端中进入你网站的目录，输入 hugo new content/<page.md> ， <page.md> 代表着你想新建的新页面。你甚至可以设置些包含为不同页面自定义的前置配置、叫原型的模版（例如在你的网页上同时有博客和播客）。

当你的网页弄好后，你能关闭你的预览服务器，并用一个命令来建立你网站的真正页面。在 Jekyll 里是 jekyll build，Hugo 就仅仅是 hugo，Jekyll 把完成好的页面放在 _site 的子目录中。然而 Hugo 把这些文件放在名为 public 的子目录中。不管哪种情况，一旦你完成后，你就有了一个完整的静态网站，你能上传并把它托管在几乎任何地方。

可拓展性

Hugo 和 Jekyll 都能让你自定义你自己的网站上哪怕最小的一个点。然而就可拓展性而言，现在 Jekyll 因其插件 API 而远远领先。因为这种插件结构，很容易为你用 Jekyll 生成的网站添加功能，通过 Jekyll 社区或者你自己写的相当短的代码片段就能完成。

Hugo 现在根本没有插件 API，所以添加功能有点难。希望以后支持编写并包含插件。但是现在看不出有人在做这一点。

结论

大体上讲，Hugo 和 Jekyll 十分相似。归根结底由你工作体验和你的网站需求决定。如果你已经设置好了 RubyGems 环境而且你需要插件的可拓展性，Jekyll 是你的选择。然而，如果你看重一个简单的工作流程，一个直接自定义网站的方式，那你首选 Hugo。

我发现我更喜欢 Hugo 的方法，而且在建设一个小型网站，我不需要任何插件。当然，每个人的需求都不同。你会为你的网站选择哪一个静态页面生成器？

（题图：opensource.com）

via: https://opensource.com/article/17/5/hugo-vs-jekyll

作者：Jason van Gumster 译者：ypingcn 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出