使用静态网站生成器构建快速网站

欢迎使用《使用静态网站生成器的PCPC.me指南》。在本指南中,我们将介绍什么是静态网站生成器(SSG),为什么要使用静态网站生成器以及如何使用它来构建全新的网站。我们将探索的一些细节:

目录

  • 静态站点生成器(SSG)简介
    为什么要使用SSG ? | SSG如何工作? |有哪些受欢迎的SSG? |选择SSG
  • 准备安装Jekyll
    本地安装的优点|远程安装的优点|前提条件
  • Jekyll安装
    在Linux上安装Ruby |在macOS上安装(更新)Ruby在Windows上安装Ruby安装Jekyll
  • 项目设置和结构
    创建Jekyll项目|了解Jekyll结构
  • Jekyll内容创作
    预览您的网站|更新“关于"页面|更新站点配置|在Markdown中创建新内容
  • 构建和部署
    Build |部署
  • Jekyll主题
  • Jekyll插件
  • 在过去的几年中,静态网站逐渐兴起。许多现代网站都使用内容管理系统(CMS),该系统涉及脚本和数据库内容的组合以动态构建其页面。

    相反,创建静态网站,然后将其上传到虚拟主机。听起来有点老,不是吗?是的,但这是一件好事。

    在互联网的早期,网页是通过将每个页面制作为文件,然后将文件上传到服务器来创建的。在当今的数据库和高级管理面板世界中,这似乎有些过时了。但是,两种趋势的结合导致了SSG的普及。

  • 首先,许多与网络合作的非技术作家(例如博客作者)已经使Markdown等轻量级标记语言非常受欢迎。随着人们习惯于以这些格式制作内容,SSG成为了将其转换为网站的便捷工具。
  • 其次,CMS系统的复杂性有时会导致性能和安全性问题(例如,无数简单博客)从功能上来说,静态站点比CMS的开销更具吸引力。
  • SSG还有其他好处,它允许用户彼此发消息或在文档上进行协作。但是,如果您正在寻找一种简单的方法来获得观众面前的内容,则SSG是一个不错的选择。

    现代CMS使用类似于以下内容的流:

  • 站点访问者从服务器请求网页。
  • 服务器接受请求并确定用户要查找的内容。
  • 服务器使用主要是查询数据库的脚本来组装内容。
  • 服务器以网页的形式将内容发送回用户,该网页会显示在浏览器中。
  • 静态网站通过构建静态网站来消除所有这些复杂性之前页。然后,访问者的浏览器只需请求该页面,服务器就会返回该页面。

    因此,您可以将SSG视为本质上的发布工具。您创建内容,运行SSG,然后它将内容转换为网页。然后您可以使用多种可用方法将这些页面上传到Web服务器。

    听起来不错吗?如果您感兴趣,让我们看看其中一些受欢迎的SSG,并查看它们所提供的功能。

    网站StaticGen是静态网站生成器的领先资源。它提供了可用列表的广泛列表,以及基于用户投票和Github分支的排名系统。

    您可以细读列表以轻松查看SSG使用的编程语言,并进行钻取。总结其功能。根据这些清单,让我们根据以下属性检查一些领先的SSG。

  • 编程语言:这描述了SSG工具本身的编写语言。这对于CMS应用程序非常重要,因为Web服务器环境需要对其进行支持。对于SSG来说,它仍然有些重要,但是您通常可以在自己的计算机上安装和不安装什么。
  • 模板语言:用于构建页面结构以及执行一些自动化操作(例如,显示分配给特定页面的标签)。
  • (本机)输入格式:,您可以使用哪种文本标记格式来编写内容。 li>
  • (本机)输出格式:我们专注于生成网站,因此此处提供了HTML(加上CSS / Javascript)。但是某些生成器也可以输出其他格式,例如PDF。
  • 功能:SSG可能还包含其他有用的功能。一个常见的示例是“博客意识",它允许您向内容文件添加标签和日期,并以类似博客的结构排列结果页面。
  • 此表总结了上述五个领先SSG的内容:

    与任何应用程序一样,您应根据1)它满足您的需求的程度以及2)进行一些初始测试来选择可用的生成器之一。从上表可以看出,它的三个选项对我来说是一个不错的选择。

    Jekyll是其中最受欢迎的选项,并且在可用主题,插件等方面得到了最广泛的支持。另一方面,我喜欢Hugo中更大的内容模型,以及使用Org-Mode作为输入的可能性。通过GitBook将网站导出为PDF图书的能力也很吸引人。

    最终,我决定选择Jekyll,因为我可以通过插件来实现某些缺少的功能。但是决定性因素是它是用Ruby编写的,并且与Hugo的Go编程语言相比,网络托管服务商更可能支持Ruby。 (“但是,我以为这是一个本地程序!"它是,或者至少是可以的。正如我们在下一节中看到的那样,这有其优点和缺点。)

    现在我们已经解决了Jekyll问题,让我们进行所有设置。以下各节将帮助您确定要在哪里安装生成器本身,以及所需的必备软件。

    与CMS不同,您可以灵活地选择安装静态网站生成器应用本身的位置。请记住,这些系统实际上并不能服务页面供网站访问者使用。他们以一种格式获取内容并将其转换为HTML。因此,您可以选择安装SSG:

  • 本地(即在您创作内容的同一台计算机上)
  • 在本地安装SSG的第一大优势是可以在发布之前轻松预览。您的SSG正在获取纯文本内容,并吐出应用了各种视觉效果的HTML版本。在担心复制到服务器之前,能够在浏览器中构建和预览网站(这将在后面详细介绍)非常有用。下图显示了正在运行的Hugo服务器-请注意其如何构建所有内容,然后启动Web服务器并为您提供查看它的URL:

    如上所述,本地安装可能是唯一的选择可供您使用。您的网络托管环境可能不支持基本的编程语言。

    另一方面,您可以选择在服务器上安装SSG。在这种情况下,您的工作流程如下:1)编写原始内容,2)将原始内容移动到服务器,以及3)运行SSG将原始内容转换为HTML。这种方法的一些优点如下:

  • 一组先决条件:在一个地方安装SSG意味着您只需完成一次安装即可。
  • 一个要管理的安装:与所有软件一样,SSG将发布新版本,并且如果需要这些甜蜜的新功能,则必须进行更新。如果您在多台计算机上使用SSG,则必须分别更新每台计算机。但是,将SSG放在中央服务器上意味着您只需要更新一次。
  • 创作平台的独立性:如果您在各种设备上工作,则远程SSG意味着您只需要担心本地创作。而且,由于您是以纯文本形式创作的,因此可以使用几乎任何您喜欢的设备。例如,您可以使用Android手机上的文本编辑器来撰写帖子,然后对其进行校对并在Windows计算机上添加图形。您甚至可以使所有内容与众多跨平台文件同步解决方案之一保持同步。
  • 一方面,在发布任何更改之前预览站点的能力远远超过了其带来的好处。远程安装。因此,如果您只选择一种,则进行本地安装。

    但是请记住,尽管两者并不是互斥的。没有什么可以阻止您为正常的“默认"工作流在本地(例如,在Windows计算机上)安装,也可以在您的服务器上维护安装以便从移动设备发送紧急信息。

    为了利用一般而言,SSG需要以下条件:

  • 能够以纯文本形式编写内容的编辑器。无干扰的情况如上图所示。)
  • 网络托管环境。
  • 可通过互联网访问将内容传输到您的托管环境。
  • 如果如果您正在考虑通过一种“点击式"网站建设服务考虑使用SSG的人的类型,那么您可能已经拥有了所有这些东西。此外,您需要满足软件要求。对于Jekyll,这些是:

  • Ruby 2.2.5或更高版本
  • RubyGems,一种用于打包基于Ruby的应用程序的格式
  • GCC并进行开放源软件编译器(不用担心,您根本不必担心,但是Jekyll确实会在后台使用它)
  • 在基于Unix的操作系统(例如Linux)上,先决条件是很简单的:几个简单的命令行安装。在Ubuntu及其衍生版本上,以下APT命令将为您设置Ruby语言:

    sudo apt install ruby ruby-dev

    这将安装Ruby语言以及开发工具,这些工具是处理某些所必需的宝石。 Gems是Ruby软件包格式,安装其中的一些实际上会在适当的位置构建它们。但是不用担心,安装程序会处理所有这些事情。

    一旦安装了Ruby,您就可以按照下面“安装Jekyll"部分中的说明安装Jekyll。

    macOS确实安装了Ruby。不幸的是,该版本(至少从High Sierra开始)是2.0.0,因此不足以运行Jekyll。

    最直接的安装方法是通过 Homebrew项目 >,它提供了命令行工具。

    首先,通过将以下内容粘贴到终端应用程序中来安装Homebrew基础。它将下载并运行安装程序,该安装程序将进一步解释该过程:

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    下一步,使用 brew 命令安装将支持的Ruby的更新版本。 Jekyll:

    brew install ruby

    这时,请确保您关闭并重新打开Terminal-它将获取更新的Ruby版本(如下图所示)。然后使用下面“安装Jekyll"中的命令进行安装。

    Windows并不是Jekyll的正式支持目标。但是,有几种安装方法,可以说比Mac的痛苦少。

  • 首先,可以通过标准的.EXE安装程序进行安装。 RubyInstaller项目支持最新的2.5.0版本。双击该文件(如上图所示)将运行一个熟悉的安装向导。
  • 或者,您可以使用Windows的软件包管理器Chocolatey安装Ruby。按照我们之前的指南安装Chocolatey,然后使用 choco install ruby​​ 命令安装Ruby。
  • 最后,如果您运行的是最新的Windows 10,则可以从Windows安装Ubuntu商店。然后,除了Ubuntu提供的所有开放源代码功能外,您还可以使用上述APT命令安装Ruby。
  • 一旦安装了Ruby,就可以在 gem 命令上使用安装Jekyll的所有三个平台及其所有依赖项(总共约25个):

    gem install jekyll

    注意:在Ubuntu上,在sudo之前安装上述内容以在系统范围内安装。虽然可能只进行用户安装,但我发现这是有问题的。进入下一部分,并设置您的第一个Jekyll站点。

    现在,您已经安装了Jekyll,第一步就是设置一个项目。这表示您要使用Jekyll创建和管理的单个站点。以下命令将在当前目录中创建一个新项目:

    jekyll new awesome-site

    这将创建一个名为 awesome-site 的新目录。让我们深入研究并熟悉它。

    Jekyll项目结构包含许多关键文件和子目录,如下所示:

  • _posts:顾名思义,这是您放置博客文章的地方。博客文章与“常规页面"的不同之处在于,它们将包含有助于对其进行排序的日期以及用于组织它们的可选类别。在内容创作部分,我们将对此进行更仔细的研究。
  • _config.yml:这是您网站的配置文件,以YAML格式编写。 YAML是用于结构化信息的标记语言,并且是配置的通用格式。在开始创作我们的内容时,我们将其中一些更改。
  • 404.html:与其他系统一样,当访问者请求未知URL时,将显示404页面。
  • Gemfile::这是Ruby配置文件。我们稍后会在安装其他组件时对此加以补充,但是目前不要对此进行任何更改。
  • index.md:如果您熟悉Web一般而言,服务器应该看起来很熟悉。当用户访问URL(例如“ www.PCPC.me")时,典型的Web服务器将尝试加载“ index.html"或“ index.php"。此Markdown文件将转换为“ index" .html"。
  • 您可能会注意到此列表…页面中缺少一件事!您怎么能拥有一个没有页面的网站?

    您可以自由为网站创建其他文件和文件夹。只要它们不以下划线开头,它们就将被视为“内容文件夹"。您可以将这些“原始"源文件放置在项目的根目录中(例如,显示在目录中的“ about.md"文件)。上图)或这些任意文件夹中。所缺少的只是我们实际编写一些内容。我们将在下一节中进行介绍,然后执行该操作。

    我们要做的第一件事是查看网站的外观。如上所述,在本地安装Jekyll的优点之一是使用其内置的Web服务器轻松预览我们的网站。以下命令将启动该服务器,并让您知道如何将浏览器指向该服务器。

    注意:从项目目录中发出Jekyll命令非常重要(即“ / home / aaron / Documents / awesome-site /")。否则,您会因为找不到正确的位置而出现关于丢失事物的各种错误。

    如输出所示,我们现在可以在浏览器中使用http://127.0.0.1:4080。如下图所示,现在有一个网站欢迎我们来到Jekyll。

    从上面的图像中,我们可以在标题菜单中看到“关于"链接。单击该链接会显示一个页面,其中包含一堆有关Jekyll及其极简主题的垃圾。

    但这是我的网站!让我们对其进行更改以使其个性化。我们可以在项目根目录的“ about.md"文件中添加一些Markdown。另请注意,在文件顶部已指定“ / about /" URL的“前题"。

    刷新我们的浏览器标签(Jekyll的服务器将实时获取我们的更改),我们的欢迎信息出现在顶部。完美!

    但是现在其他事情变得值得注意了。该网站的标题是“ 您的真棒标题",而不是“ 我的真棒标题"。而且,网站说明中也有一些关于“ _config.yml"的废话。我们来修复它们。

    _config.yml (实际上很重要,不是废话)文件包含有关我们网站的一些重要信息,如下图所示:

    在这里查找和调整内容非常简单,让我们1)更改标题,2)更改描述,3)删除Github链接。与页面更改不同,我们需要使用 Ctrl + C (停止)和 jekyll服务(重新启动)重新启动服务器以获取更新的配置文件):

    但是摆弄YAML并不是我们想要的。不,我们希望能够以Markdown之类的格式创建内容。

    如本指南前面所述,为大多数静态网站生成器创建内容的方法是在Markdown中。这种非常流行的轻量级标记语言使您可以在文本编辑器中轻松创建网页。在MUO上,我们已经进行了多次讨论,包括原因,值得学习,这应该是您学习来龙去脉的第一站。

    一旦您放心将Markdown放在一起,我们可以继续创建您的第一篇文章。通过任何喜欢的方法创建一个名称为“ YYYY-MM-DD-your-title.md"的新纯文本文件,其中名称的第一部分表示日期。将文件放在“ _posts"目录中,然后使用您喜欢的文本编辑器将其打开。

    原始的Jekyll源文件大多是标准Markdown,但前事除外。这是一些配置,以YAML格式显示在文件的开头(请参见,告诉您它很流行)。您可以通过首页提供的最基本的信息是帖子的标题。您还应该选择主题的可用布局之一(在下面的示例中为“发布")。将它们放在两组三个破折号之间的开始处的Markdown文件中:

    ---title: "Testing Out Some Headings"layout: post---

    用三个破折号结束前面的内容后,您可以将其余内容写到标准Markdown中。最好不要直接使用任何H1标签,因为Jekyll会将这些标签应用于您在上面定义的标题。但是添加一些较低的标题(第二和第三级)和其他文本(包括项目符号列表)可以使我们的页面更​​加充实。

    至此,您可以开始积累帖子了。如果您希望从Jekyll网站获得的只是一个简单的日记式博客,那么,您已经了解了。您可能要考虑采取的其他一些步骤包括(链接将带您进入更详细的资源):

  • 创建其他静态页面,例如我们之前修改的“关于"页面。请记住,您可以将这些文件的源文件放在项目的根目录中,或者放在您定义的子文件夹中。
  • 使用“ category"关键字将首页分类。然后,创建用于过滤您每个类别的登录页面。
  • 使用前件中的“ permalink"关键字将页面整理成站点树。例如,这允许您指定项目根目录中的“ about.md"实际上获得的地址为“ awesome-site.com / about / "。
  • 掌握了这些知识之后,您便拥有了创建网站以用作作品集,个人博客甚至小型企业网站所需的一切。问题是,到目前为止,它仍然仅限于您的桌面。在下一节中,我们将探讨您在构建网站时所发生的事情(您甚至不知道自己做了这个,对吗?)。我们还将研究将构建的或“生成的"网站发布到网络上的一些方法。

    请看一下上面的屏幕截图。在第五行,您会注意到输出“正在生成…"

    Jekyll要服务您的网站,首先需要对其进行构建。这需要将所有Markdown转换为HTML,并根据需要组装页面(例如我们前面提到的类别页面)。 jekyll服务命令还会为您构建项目。这就是为什么我们只需要刷新浏览器即可看到更改。

    我们还可以使用以下命令手动构建项目:

    jekyll build

    构建项目会创建一个子目录,目录名为 _site 。它包含您网站的“实时"版本(我们将在下一部分中讨论如何执行此操作)。它包含与主要项目结构相似但略有不同的结构:

    在构建项目的过程中,Jekyll将采取以下步骤:

  • 将Markdown转换为HTML。
  • 在网站页面上添加“包含"元素(例如页眉和页脚)。
  • 用其值替换模板中的动态摘要。一个示例是通过查找所有博客帖子并使用日期和标题填充列表来创建页面。
  • 在必要时创建导航,例如帖子类别的文件夹(上图中的“ jekyll")或指向“ awesome-site.com / about / "的“关于"菜单项。
  • 在此过程结束时,您只需按一下Web托管环境中“ _site"目录的内容。

    Jekyll生成的站点不需要任何高级数据库安装即可工作。您需要做的就是将“ _site"目录的所有内容放到您的虚拟主机上。您可以使用多种方法来执行此操作,包括:

  • 直接手动复制。不要大惊小怪。请记住要使用SFTP,而不要使用常规(不安全)FTP。
  • 文件同步。如果您可以找到同步工具的UI,那么它也将易于使用。
  • 源代码管理。最后,对于某些变化如博客一样快速且频繁的更改,您应该管理带有源代码控制的“原始"内容。一种部署选项是在源代码管理下设置“ _site"目录。每当您创建或修改内容时,它都可以将更新“ git push"到托管环境。或者,如果您真的很聪明,可以尝试在源目录上使用提交后的钩子,该钩子使用rsync将更新后的内容复制到Web主机上。创建一个网站。但这并不是说我们涵盖了所有内容。例如,默认的Minima主题有点……很好。让我们用一些更犀利的技巧来爵士吧。

    为Jekyll网站设置新主题最困难的事情是从所有选项中进行选择。有数百个可用。尝试在Jekyll主题网站上找到漂亮的,可浏览的主题库。确定其中一个后,请按照其网站上的说明进行安装。

    注意:许多主题都打包为Ruby gem,这意味着您可以利用“我们先前使用的“ gem install"命令。但是,这仍在进行中。另外,某些主题可能需要您手动安装。

    由于大型的侧边栏菜单很酷,因此我们将安装Hydeout主题。 (您会在整个Jekyll生态系统中找到许多有关经典小说的参考。)它被打包为Ruby gem,因此您可以使用与最初安装Jekyll相同的命令进行安装:

    gem install jekyll-theme-hydeout

    然后创建一个新的Jekyll网站,并将以下两个更改为1)考虑到包含主题的宝石,以及2)将主题实际应用到当前网站。首先,在 Gemfile中更改以下行:

    现在,将 _config.yml 中的设置更改为使用Hydeout(使用gem名称, “ jekyll-theme-hydeout")表示该站点的活动主题:

    现在,重新启动Jekyll服务器(记住,我们触摸了配置文件),然后看到了您很棒的新主题:

    主题并不是您修饰站点的唯一方法。 Jekyll插件有助于添加功能,包括新的输入和输出选项,自动生成目录或嵌入Spotify网络播放器。它甚至可以提供一些我们强调为SSG的缺点的功能,例如注释(例如,gems“ disqus-for-jekyll"启用了Disqus服务)。

    我们将为我们的站点安装一个管理面板,使其成为“静态站点CMS"之类的东西。“ jekyll-admin" gem具有此功能……我们要做的就是安装它:

    gem install jekyll-admin

    然后按照开发人员说明在我们的Gemfile中启用它:

    完成!在您的站点上转到站点的新管理面板:4080 / admin:

    摘要

    回顾一下,在本指南中我们了解到:

  • SSG的运行方式接收纯文本内容并将其转换为格式正确的网页
  • SSG的重要属性是什么,以及如何选择适合您的内容
  • 如何安装Jekyll static Windows,Mac和Linux上的网站生成器
  • 如何启动您的第一个Jekyll项目,其结构看起来如何
  • 如何使用Markdown语言为您的网站创建内容,以及预览结果
  • 如何获取Jekyll的输出并将其从本地计算机发送到Web主机
  • 如何为您的站点安装并选择新的Jekyll主题
  • 如何安装和使用附加组件来为Jekyll添加功能
  • 借助这些知识,您应该能够使用Jekyll来快速,轻松地运行以内容为中心的基本网站。此外,该站点将是快速,安全且易于管理的。您可以随时随地处理内容,无论是否可以访问互联网,都可以像在线一样预览您的工作。

    您可以将网站托管在几乎任何虚拟主机上,甚至可以使用非常实惠且“裸骨"的计划。同时,您可以使用美观的现代主题,甚至可以通过插件添加一些CMS功能。

    您如何看待基于SSG的网站?适合你吗?还是听起来太复杂了,您只想坚持使用WordPress?在评论中让我们知道!

    标签: 博客 长格式指南 Web开发