jekyll静态博客主题_免费开放源代码静态网站生成器Jekyll入门

jekyll静态博客主题

Jekyll是一个免费的开源 静态站点生成器 。 像内容管理系统（例如Drupal和WordPress）一样，Jekyll可用于构建具有丰富且易于使用的导航的网站。 与Drupal和WordPress不同，Jekyll一次生成所有内容，而不是等待人们访问您网站的页面。

此模型非常适合开放源代码项目的网站，因为它重用了已用于源代码的概念，例如版本控制 。 当然，主要的缺点是您的站点将完全缺少动态功能。 这些包括针对每个访问者的“建议”，用户评论或精美的管理界面； 每个用户的网站内容都是相同的。 另一方面，静态站点本来会更安全，因为Jekyll在您的计算机上运行，​​并且不会受到来自Internet的恶意攻击者的攻击。 服务器上的设置也将很简单。

Jekyll于2016年2月在Opensource.com上亮相（“ 使用Jekyll在Markdown上博客的6个理由 ”）。 我最近用它为QEMU创建了一个网站，这是我在Red Hat从事的开源项目之一。 在本文中，我将为首次使用Jekyll的用户提供提示，指导读者创建一个新的Jekyll网站，并研究Jekyll的主题和自定义功能。

入门

安装Jekyll的最简单方法是通过RubyGems 。 RubyGems可用于大多数GNU / Linux发行版。 例如，在Fedora上，可以使用dnf install ruby​​gems进行安装 。

安装RubyGems后，以下步骤将安装Jekyll并在test /目录中为新的Jekyll站点创建支架：

gem install jekyll
jekyll new test

目录内容将如下所示：

-rw-r--r--. 1 pbonzini pbonzini  525 15 mar 11.50 about.md
-rw-r--r--. 1 pbonzini pbonzini 1402 15 mar 11.50 _config.yml
-rw-rw-r--. 1 pbonzini pbonzini  953 15 mar 11.50 Gemfile
-rw-rw-r--. 1 pbonzini pbonzini 1180 15 mar 11.51 Gemfile.lock
-rw-r--r--. 1 pbonzini pbonzini  213 15 mar 11.50 index.md
drwxrwxr-x. 2 pbonzini pbonzini   50 15 mar 11.50 _posts/

这两个.md文件是网站页面的源代码。 您可以根据需要创建任意多个目录，Jekyll会在其中扫描.md和.html文件。 其他Markdown文件位于_posts目录中； 它们被处理以提供特定于博客的功能，例如发布日期和类别。

每个源文件都由描述页面特征的前题组成，其后是Markdown或HTML格式的页面内容。 这是about.md的开始：

---
layout: page
title: About
permalink: /about/
---

This is the base Jekyll theme. [...]

---之间的一切都是头等大事。 它以YAML编写，Yekyll使用的是人类可读的格式，用于结构化数据。 前面的问题很少使用花哨的YAML功能。

为了生成页面，Jekyll从主题模板中获取一个布局（在本例中为“页面”布局），并将其与前端内容和页面内容中的数据合并。 最前面的问题还告诉Jekyll将结果放在哪里（在这种情况下，在/about/index.html中 ）。

现在进入目录，键入bundle exec jekyll serve （如果您在多个网站上工作， bundle exec确保使用正确版本的Jekyll），然后将Web浏览器指向http://127.0.0.1:4000/ 。 您会看到以下内容：

^{该示例站点使用“ jekyll new”创建，如Mozilla Firefox所示。}

您的网站已经转换为HTML，结果放置在_site /目录中：

drwxrwxr-x. 2 pbonzini pbonzini   23 15 mar 11.54 about/
drwxrwxr-x. 2 pbonzini pbonzini   21 15 mar 11.54 assets/
-rw-rw-r--. 1 pbonzini pbonzini 3836 15 mar 11.54 feed.xml
-rw-rw-r--. 1 pbonzini pbonzini 5301 15 mar 11.54 index.html
drwxrwxr-x. 3 pbonzini pbonzini   19 15 mar 11.54 jekyll/

本文不介绍通过Web服务器部署Jekyll。 不过，值得一提的是，Jekyll还是GitHub“页面”功能背后的引擎。 命名GitHub项目“ example .github.io”足以使您的静态站点生成并发布在http：// example .github.io / 。 但是，在这种情况下，您将无法使用非标准插件自定义网站。

组态

jekyll init创建的文件中有_config.yml ，它为Jekyll提供全局配置。 就像前面的事情一样，该文件为YAML格式。

Jekyll文档详细解释了各种设置。 默认值通常很好。 以我的经验，我主要使用_config.yml来定制插件的操作，这将在本文的后面讨论。 永久链接选项的默认值是一个例外，它是：

permalink: /:categories/:year/:month/:day/:title.html

如果您在生成的网站中注意到jekyll /目录，那么它就是从那里来的！ 该示例网站包括一个示例博客文章， jekyll只是其中的一种。

我认为这是一种相当奇怪的永久链接格式； 幸运的是，更改它就像在_config.yml中添加一行一样简单：

permalink: /blog/:year/:month/:day/:title/

主题

令人遗憾的是，许多开源项目的网站看起来好像它们上一次在1990年代进行了更新，只是没有“正在建设中的” GIF。 通常，问题仅仅是作者缺乏作为设计师的经验。 如果是这样，您可能应该寻找一个好的免费模板并使之适应您的需求。 jekyllthemes.org提供了许多示例主题。 许多托管在GitHub上，并且已经有一个Gemfile ; 在这种情况下，您可以克隆存储库并立即开始使用它们：

git clone https://github.com/daviddarnes/alembic jekylltest2
cd jekylltest2
bundle install
bundle exec jekyll serve

如果选择的主题不具有Gemfile ，则可以直接使用jekyll 服务 ，而无需通过bundle ，但是将来可能会遇到向后兼容的问题。 创建自己的Gemfile更好，并且可以像这样简单：

source "https://rubygems.org"
ruby RUBY_VERSION
gem "jekyll"
group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.6"
end

你自己的主题

许多网站提供CSS和HTML5模板，这些模板是在免费的Creative Commons许可下发布的，可以免费使用。 两个示例是TEMPLATED和HTML5 UP！ ，它提供了数百个响应主题，每个主题都至少包含一个主页和一个二级页面。 对于QEMU的网站，我从他们的Linear模板开始，尽管结果看起来根本不像它。

并非所有主题都适合博客-另一方面，您可能没有使用Jekyll的博客功能-因此请确保模板与您网站中所需的功能完全匹配。 例如，如果要对博客使用Jekyll，则可能应将自己限制为具有可选边栏的模板。 侧边栏可用于链接每月或每个类别的存档。

确保事先检查模板的要求。 例如，TEMPLATED和HTML5 UP中一个有争议的主题方面！ 他们使用JavaScript来提供响应行为，甚至页面样式方面的内容。 您的某些访问者可能会禁用JavaScript，即使未启用，也可能会在加载JavaScript时在浏览器中看到未样式化内容的“闪烁”。 就我而言，我删除了该库，并用简单的 CSS 文件替换了该库，而又不牺牲页面的响应能力。 CSS使针对“移动”和“桌面”查看器的单独样式表变得容易，并且为移动用户添加菜单按钮仅需要十几行JavaScript代码。 如果您不想做这种工作，请事先检查模板的要求。

因为您将使用文本编辑器编辑Jekyll页面和布局，所以还应确保模板具有可读HTML和CSS。 一些设计师在演示中使用“精简”HTML和CSS代码，并且仅提供实际的收费来源。

从jekyll new创建的支架开始，您可以直接在Jekyll源代码目录中添加主题的源代码。 如前所述，Jekyll的模板系统通过定义多个布局工作 ，这些布局存储在_layouts /目录中。 QEMU网站具有三种主要布局 ，这很典型：

• 主页首页
• 对网站的网页（无侧边栏） 页面 ，
• 和博客页面博客（带有侧边栏）。

博客布局进一步专门化为一种用于博客帖子 ，一种用于存档页面 。

HTML源代码的大部分内容可以由不同的布局共享。 使用Jekyll的模板系统来避免重复，并将这些公共元素放在_includes /目录中的单独文件中。 带有CSS和JavaScript库链接的所有HTML标头 ， 导航菜单和站点地图 ， 鸣谢以及博客侧边栏都可以通过这种方式提取。

如果单击链接，您将在文件中注意到更多高级内容，例如模板指令。 不用担心 您可以轻松地从CSS / HTML模板开始使用占位符内容。 大多数Jekyll模板都以类似的方式来组织_includes目录，并且从标准Jekyll模板，其他教程或QEMU网站上合并这些高级元素将非常容易。

高级功能

到目前为止，我所介绍的内容足以建立一个对您的项目而言独特的功能性网站。 但是，Jekyll提供了许多其他功能，可以使您的网站更好，工作更简单。 对于QEMU网站，我使用了两个：插件和集合。

外挂程式

Jekyll的插件系统提供了在站点生成时运行自定义Ruby代码的挂钩。 有几种插件，其中最常见的是generators和tags 。

许多插件以Ruby gem的形式存在。 Jekyll文档再次说明了如何将宝石添加到您的Gemfile并与bundle一起安装。 jekyll new已经配置了jekyll-feed gem； jekyll-feed是一个生成器插件，可生成Atom格式的博客文章供稿。

但是，有时候，现有的宝石无法完全满足您的需求。 在这种情况下，您的网站可以使用自定义插件。

插件示例：博客存档

生成器插件使您可以将目录和文件添加到Jekyll的输出中。 其Ruby代码定义化身的发电机类的子类，并且产生能够产生的输出文件的任意数量。 例如，生成器子类可以查看网站中的所有帖子，将它们按月分组，并为每个月生成一个存档页面。

实际上，这正是每月存档插件的功能。 QEMU使用此插件，并从博客的侧边栏链接到每月存档。 另一个类似的插件生成基于类别的存档页面，这些页面链接在每个博客文章的底部。

这些插件是高度可定制的。 我之前提到过，归档文件的布局位于一个单独的文件中，位于_layouts /目录中。 _config.yml告诉插件使用哪种布局以及如何格式化URL：

monthly_archive: {
  path: 'blog', layout: 'archive'
}
category_archive: {
  path: 'blog/category', layout: 'archive', slugify: true
}

示例插件：MarkDown包括

除了生成页面之外，插件还可以用于向Jekyll的模板系统添加新命令。 QEMU网站使用一个这样的插件来简化其页面 ，可以说是网站中最复杂的页面 。

该页面有一个水平菜单，可让您选择显示四个窗格中的哪个。 该菜单是使用HTML和JavaScript实现的，其代码很长 。 保持窗格内容分开是可取的，而且在我这样做时，我认为使用Markdown而不是HTML编写它会很好。 奇怪的是，Jekyll的include和include_relative指令仅允许您包含HTML。 就我而言，除了Markdown支持之外，我想要诸如include_relative之类的东西（它包含当前目录中的文件而不是_includes / ）。

解决方案只有20行代码 ； 整个插件都放在一个文件中，您可以将其放在_plugins /目录中。 它提供了两个新的模板指令-markdown和markdown_relative-后者正是我所需要的。

馆藏

Jekyll的另一个有趣功能是收藏。 集合有助于将结构化数据包含在您的网站中-通过将数据从其表示形式中分离出来，它们使任务更容易且更不易出错。

收集数据存储在_data子目录中，并以YAML格式设置，如下所示：

- name: Paolo
  birthday: March 17
- name: Luisa
  birthday: November 28

如果以上四行存储在_data / birthdays.yml中 ，则模板将能够以site.data.birthdays的身份对其进行访问。 以下液体代码：

{% for person in site.data.birthdays %}
<p>{{person.name}}'s birthday is on {{person.birthday}}.</p>
{% endfor %}

将转换为：

<p>Paolo's birthday is on March 17.</p>
<p>Luisa's birthday is on November 28.</p>

我使用QEMU网站上的收藏集来表示我们的发行版和首页图库的屏幕截图 。 在这两种情况下，演示文稿都将进一步包含在包含文件中，例如本发行版 。 发布集合特别有用； QEMU的发布过程很长，而且漂亮的YAML格式最大程度地减少了网站更新的负担。

结论

使用Jekyll建立QEMU的新网站真的很有趣。 我能够在大约一天的时间内建立该网站的第一个版本，并且根据Reddit和QEMU IRC频道的用户反馈，在完善它的过程中，学习过程仍然很轻松。 希望我在本文中分享的技巧也能对您有所帮助。

翻译自: https://opensource.com/article/17/4/getting-started-jekyll

jekyll静态博客主题