使用Jekyll构建您的网站

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，您可以看到默认的“Awesome”博客。默认“awesome”博客目录结构此默认站点包含以下文件和文件夹：_posts：您的博客文章。_site：最终编译好的静态网站文件。about.markdown：“关于页面”的内容。index.markdown：“主页”的内容。404.html：“404页面”的内容。_config.yml：Jekyll的全站配置文件。创建一个新的博客帖子创建一个帖子很简单。您需要做的就是在_post目录中创建一个具有正确格式和扩展名的新文件，您就完成了。有效的文件名类似于2021-08-29-welcome-to-jekyll.markdown。博客文件必须包含Jekyll所称的YAML标头块FrontMatter。它是文件开头的一个特殊部分，包含元数据。如果查看默认帖子，可以看到以下内容：---layout:posttitle:"WelcometoJekyll!"date:2021-08-2911:28:12+0530categories:jekyllupdate---Jekyllwilluse对于以上元数据，还可以自定义key:value键值对。如果您需要一些提示，请查看我网站的首页。除了前面的问题，您还可以使用内置的Jekyll变量来自定义您的网站。让我们创建一个新帖子。在_posts文件夹下创建2021-08-29-ayushsharma.markdown。内容如下：---layout:posttitle:"Checkoutayushsharma.in!"date:2021-08-2912:00:00+0530categories:mycategory---Thisismyfirstpost.#Thisisaheading.##这是另一个标题。这是一个[链接]()这是我的分类：如果jekyllserve命令仍在运行，刷新页面，您将在下面看到新帖子。新博客条目恭喜您创建了第一篇文章！这个过程可能看起来很简单，但您可以使用Jekyll做很多事情。使用简单的Markdown，您可以归档博客、突出显示代码片段以及按类别组织帖子。草稿如果您还没有准备好发布您的内容，您可以创建一个_drafts文件夹。此文件夹中的Markdown文件仅通过传递--drafts--参数来呈现。Layout和Contains请注意_post文件夹中两个帖子的标题块，您将在其中看到layout:post。_layout文件夹包含所有布局。你不会在源代码中找到它们，因为Jekyll默认加载它们。Jekyll使用的默认源代码在这里。如果单击链接，您可以看到帖子布局使用默认布局。默认布局中包含的代码{{content}}是注入内容的地方。布局文件还将包含include指令。他们从包含文件夹加载文件并使用不同的组件组成页面。通常，这就是布局的工作方式：您在标题块中定义它们并将您的内容注入其中。另一方面，包含提供页面的其他部分以构成整个页面。这是一种标准的网页设计技术：定义页眉、页脚、侧边栏和内容元素，然后将内容注入其中。这是静态网站生成器的真正威力，完全由程序控制，组装您的网站并最终将其编译成静态HTML。页面并非您网站上的所有内容都是文章或博客。您需要一个关于页面、一个联系页面、一个项目页面或一个投资组合页面。这就是“页面”的用武之地。它们的工作方式与“帖子”完全一样，这意味着它们是带有标题块的Markdown文件。但它们没有放入_posts目录。它们要么保存在您的项目根目录中，要么保存在它们自己的文件夹中。对于布局和包含，您可以使用与帖子相同的布局或创建一个新帖子。Jekyll非常灵活，您可以随心所欲地发挥您的创造力！您的默认博客已经有index.markdown和about.markdown。随意定制它们。数据文件数据文件位于_data目录下，可以是.yml、.json、.csv等格式的文件。例如，_data/members.yml文件可能包含：-name:Agithub:a@a-name:Bgithub:b@b-name:Cgithub:c@cJekyll在生成站点时读取这些。您可以通过site.data.members访问它们。

{%formemberinsite.data.members%}
• {{member.name}}
{%endfor%}

永久链接你的_config.yml文件定义了永久链接的格式。您可以使用各种默认变量来组合您自己的自定义永久链接。构建您的最终网站命令jekyllserve非常适合本地测试。但是，一旦您在本地完成测试，您就需要构建最终版本以供发布。命令jekyllbuild--sourcesource_dir--destinationdestination_dir将您的站点构建到_site文件夹中。请注意，这个文件夹在每次构建之前都会被清理，所以不要把重要的东西放在那里。生成内容后，您可以将其托管在静态托管服务上。您现在应该对Jekyll的功能以及主要部分的功能有了深入的了解。如果您正在寻找灵感，JAMStack官方网站上有一些很好的例子。来自JAMStackHappycoding的示例Jekyll网站。