一、静态站点生成器和 VuePress 简介
在 web 开发的早期，所有 web 页面都基于 HTML 和 CSS。一切都是静态的，内容管理系统等概念闻所未闻。动态数据库驱动的应用程序也出现得很晚。
然而，随着 WordPress 和 Drupal 等内容管理系统的出现，web 开发开始以更快的速度进行。静态站点和页面被动态查询驱动的页面所取代，这些页面从后端的数据库获取数据，并将数据写入数据库。当然，这允许更大的控制和更好的内容结构。
与这种动态数据库驱动的内容管理系统相关联的优点很多。首先，您可以按自己喜欢的方式呈现和存储内容！您可以拥有多个用户帐户，每个帐户都有自己的设置，自定义后端和前端，等等。
此外，对于最终用户，数据库驱动的动态网站管理程序可以提供更方便的访问和用户友好的界面。
那么，静态站点生成器呢？最近，许多新的静态站点生成器越来越受欢迎，势头也越来越强劲。它们有什么特殊用途吗？更重要的是，我们说的静态站点生成器到底是什么意思？
在本书的学习过程中，我们将学习 VuePress，这是一个激动人心且有用的工具，可以帮助您在几分钟内生成速度惊人且易于操作的网页。我们将探讨它的各种特性、能力、限制和依赖性，以及我们可以从中获得最大收益的方法，例如通过自定义主题、扩展、配置等！
VuePress 对于静态站点生成器的世界来说仍然是相对较新的，尽管它已经存在了一段时间。对于任何熟悉JavaScript（JS的人来说，Vue.JS 绝对不是前所未闻的名字。这是一个 JS 框架，它的忠实追随者与日俱增。下面是 Vue.js 的简要概述。
以下是我们将在本章中介绍的一些主题：
- 什么是 Vue.js？
- 什么是静态站点生成器？
- 静态站点生成器的优缺点
- 一些主要的静态站点生成器及其与 VuePress 的比较
- 什么是 VuePress？
- 为什么要使用 VuePress？
Vue.js 到底是什么？
Vue.js 是一个 js 框架，可用于构建用户界面。与许多其他巨型 JS 框架不同，Vue 可用于创建特定于内容的单页 web 应用程序。它可以与其他库和项目集成以满足您的需要。
详细讨论 Vue.js 显然超出了本书的范围。值得一提的是，Vue.js 是一个 js 框架，它更多地关注事物的视图方面，它是一个渐进的、开源的、有忠实社区支持的框架。它可以完全按照您希望的方式来呈现您的网页和数据！
正如我们所看到的，Vue.js 不是 js 框架世界中的小鱼。因此 VuePress 有一个非常坚实的基础。但是，即使您不熟悉 VuePress，您也可以在阅读本书的过程中掌握它。
然而，对于那些仍然想知道为什么像 VuePress 这样的东西值得这么麻烦的人，以及与像 VuePress 这样的静态站点生成器相关的交易是关于什么的人，我们应该首先介绍一些与此类站点生成器相关的基本信息。
什么是静态站点生成器？
因此，在进一步讨论之前，让我们首先简要了解静态站点生成器的概念。当我们说VuePress 是一个静态站点生成器时，我们是什么意思？
Simply put, a static site generator does what its name suggests – it generates a set of web pages that are static in nature. Thus, once deployed, a static site generator can generate web pages on the fly and with great speed.
大多数静态站点生成器通过非常简化的文件结构工作。您将获得一组 HTML 文件，再加上一些 CSS 样式表，以便更好地显示内容，仅此而已。除此之外，我们还有一组 JS 文件。没有复杂的插件、数据库或其他内容管理选项。
为了更好地理解静态站点生成器（如 VuePress）的操作模式，我们可以将它们与数据库驱动的动态内容管理系统（如 WordPress）进行比较。
比较静态站点生成器和动态站点生成器–方法上的差异
WordPress 或任何其他基于动态数据库的 CMS 是如何工作的？
当用户访问给定的 WordPress 网站时，浏览器会向网站所在的服务器发送请求。此后，WordPress 分析请求，并在此基础上准备数据。这意味着将加载给定的帖子及其媒体元素，显示评论，查询帖子的元数据，等等。要获取这样的信息，WordPress 需要从数据库服务器查询和提取数据。
因此，实际上，我们在这里遵循三步走的方法：
- 用户或客户端向 WordPress 服务器发出请求
- WordPress 查询并从其数据库中提取所需数据以完成请求
- 请求的信息将呈现给用户
现在，如果我们要删除对数据库的依赖关系呢？如果我们绕过所有不需要的代码和方法，简单地以静态形式生成页面，会怎么样？当然，我们可能无法展示复杂的操作，例如自定义插件功能、电子商务集成等。但我们将完全克服上一示例中的第二步，如下所示：
- 用户向服务器发出请求
- CMS 根据请求向用户呈现静态页面
通过这样做，我们在某种程度上加快了整个网站的性能。此外，我们还减少了服务器负载，因为没有重复的数据库查询。
这是动态内容管理系统和静态站点生成器之间的主要区别。虽然任何一方的支持者都可以支持或反对另一方，但基本区别在于工作方式。
静态站点生成器的优势
现在我们已经了解了 VuePress 等工具与 WordPress 等工具的不同之处，使用静态站点生成器工作流有什么好处吗？简单地说，像 VuePress 这样的静态站点生成器有什么好处？
首先，这种静态站点生成器在运行中消耗的资源要少得多。您可以在服务器上运行使用生成器（如 VuePress）构建的博客或网站，该服务器的内存少于动态内容管理系统驱动的网站所需的内存。此外，由于没有数据库或自定义数据查询需要处理，因此磁盘空间和带宽消耗也相对较少。
事实上，众所周知，您甚至可以使用静态站点生成器在几兆字节的空间内部署和运行个人博客！所有其他因素不变（视频、图像和博客帖子），数据库的缺乏确实在这里创造了一种非常轻松的氛围，操作起来要快得多。
静态站点生成器几乎总是比动态内容管理系统更快。事实上，静态站点生成器（如 VuePress）一旦调用，就可以作为单页应用程序运行。这意味着不会有重复的查询或调用来加载页面。一切都可以立即加载！正如你可能已经意识到的那样，在互联网上，速度和页面加载时间非常重要，因为人们的注意力跨度和耐心往往更短。
此外，由于谷歌和其他搜索引擎经常将页面加载时间视为排名因素，静态站点生成器默认是搜索引擎友好的。当然，您仍然需要处理元数据、站点地图等，但是我的站点加载缓慢的基本担忧将被消除。通常，单页应用程序（如 VuePress）甚至不需要单独的缓存机制。
人们普遍认为静态网站比动态网站更安全。这里的原因很明显——一个静态网站没有数百行 PHP（或任何其他语言）代码、数据库和其他可能被黑客攻击的内容。在这里，您不必担心过时的 WordPress 或 Drupal 版本。
类似地，几乎没有任何一个糟糕的编码或邪恶的插件或主题破坏你的努力工作的威胁。静态站点生成器以 HTML、CSS 和 JS 文件的形式存储其大部分数据。除非通过暴力攻击破解密码，否则很难使用劣质代码对数据造成恶意软件或安全威胁。代码注入、隐藏在服务器端文件中的恶意代码、损坏的数据库条目等等，在这里都是过去的事情。
对于高级用户，静态站点生成器提供了更大的定制和个性化空间。不喜欢给定的功能？想根据你的喜好调整一下吗？代码都是你自己定制的，因为没有绝对的数据库或插件的要求，你可以完全按照你想要的方式建立你的网站或博客！这是许多超级用户倾向于选择静态站点生成器的主要原因，尤其是对于他们的个人项目和网站。
另一方面，很自然，如此高水平的定制可能不是每个人都喜欢的。对于那些不太喜欢定制东西的人来说，静态站点生成器似乎是一项艰巨的任务。但对于开发者来说，这是天堂！
好的，现在我们已经看到了它的优点，可以安全地假设像 VuePress 这样的静态站点生成器是相当有能力的工具。借助速度和安全性的额外优势，您可以根据自己的喜好创建网站和页面，而不必担心动态数据库需求、安全插件、代码注入等问题。
静态站点生成器的缺点
每件事都有好的方面和坏的方面，静态站点生成器也不例外。
此类站点生成器的最大缺点是学习曲线陡峭。通常，为了安装站点生成器，您必须稍微调整您的工作环境。正如我们将在接下来的章节中看到的，安装通常会顺利进行，但您需要确保所有依赖项和变量都得到充分满足。
对于初学者来说，这种方法往往过于复杂，无法使用。如果无法安装所有必需的框架和库，那么很可能无法启动并运行静态站点生成器。
虽然静态站点生成器非常适合创建博客和基本网站，但您不能简单地使用它们创建所有其他网站。对于电子商务、复杂的数据库驱动的内容站点和其他内容感知项目，静态站点生成器通常不是最佳选择。
就其价值而言，与 WordPress 或 Drupal 相比，大多数静态站点生成器的知名度相对较低。对于 VuePress 这样的实体尤其如此。这意味着从另一个 CMS 迁移现有的博客或站点可能需要一些时间。
另一方面，将 VuePress 博客或站点迁移到另一个 CMS 可能更加耗时。在启动成功的迁移之前，您几乎肯定需要使用一些代码并调整一些设置。但是从 WordPress 迁移到 Drupal，或者从 Drupal 迁移到 WordPress，通常是一件轻而易举的事，因为这项任务很容易获得各种免费和高级插件。
这表明静态站点生成器有其自身的优缺点。但对于这些生成器用于写博客和创建简单静态 web 项目的意义来说，它们可以被证明是近乎完美的。此外，由于这里的目标受众包括知道自己在做什么的开发人员和爱好者，而不是需要拖放解决方案的最终用户，因此静态站点生成器不需要满足所有人的需求。这使得开发路线图更加精简和集中。
但是现在我们已经讨论了很多关于静态站点生成器的内容，我们的选择是什么？就像其他任何东西一样，您可以从中选择好的发电机。在本书中，我们将完全关注 VuePress。
但是，我们必须记住，VuePress 是一个相对较新的平台，它仍在积极开发中。因此，为了正确处理 VuePress，我们至少也需要了解一些其他静态站点生成器。这将帮助我们更好地理解 VuePress 的重要性和用法，并展示 VuePress 的特殊性。我们将只提及一些最流行的静态站点生成器，而不是讨论各种静态站点生成器的极端细节。
此外，虽然对多个静态站点生成器进行详细比较实际上超出了本书的范围，但我们仍将说明 VuePress 与某些其他静态站点生成器的比较情况，以便已经熟悉给定静态站点生成器的开发人员或读者（例如，Jekyll）可以更好地评估对 VuePress 的期望。
一些主要的静态站点生成器
现在是时候来看看一些主要的静态站点生成器了。
我们将主要关注那些在没有外部数据库的情况下运行并且在性质或功能上与 VuePress 类似的数据库
杰基尔
我们名单上的第一个名字已经出现很长时间了。事实上，Jekyll 正在成为静态站点生成器世界中的一个常见名称。它是一个简单易用的工具，可以直接使用，并且提供一个简单的想法，即能够将纯文本文件转换为博客或网站，作为静态网站使用。
Jekyll 不依赖数据库，并消除了动态内容管理系统的大多数不需要的功能。您可以用降价、液体或其他方式编写内容。由于所有内容都是以静态页面的形式大量生成的，因此速度也有相当大的提升。
与 VuePress 相比，Jekyll 有一个非常明显的优势：它支持博客，允许您轻松地从其他平台迁移博客。通过 blog-aware，我们的意思是类别、标签和其他特定于 blog 的实体或元数据被 Jekyll 很好地识别。我们将在本书的第 4 章中了解到，在 VuePress中创建一个站点，VuePress 默认情况下并不完全了解博客，因此您需要做一些额外的工作，才能在 VuePress 中获得与在 Jekyll 中一样的结果。
也就是说，Jekyll 不依赖 Vue.js，实际上主要基于 Ruby。对于 JS 程序员来说，调整 Jekyll 有时是一个挑战。
Jekyll 主页可在找到 https://jekyllrb.com 。
雨果
Hugo 是另一个非常流行且完全开源的静态站点生成器。它附带 Apache 许可证，并且基于 Go。因此，对于使用或熟悉 Go 编程语言的程序员来说，Hugo 通常是静态站点生成器领域事实上的选择。
但这并不是雨果的终极 USP。与许多其他静态站点生成器不同，Hugo 还可以很好地使用大多数动态 API 自定义内容、分类法、菜单等。在这方面，Hugo 更像是静态站点生成器和动态 CMS 的混合体。此外，Hugo 自带了自己的搜索引擎优化和网站分析模板。此外，雨果有一系列的自定义短代码和大量的主题集，你可以从中选择，以充分利用你的网站或博客。
然而，对于一个追求极端简单并且不想使用无数短代码或 API 的人来说，Hugo 似乎有些矫枉过正。它更多的是一个初学者友好的 CMS 和一个开发者友好的站点生成器之间的折衷。学习曲线也不是很难。
雨果主页位于https://gohugo.io 。
盖茨比
现在，最后来看一些基于 JS 的站点生成器！
Gatsby 是一个基于 JS 的静态站点生成器，它使用 React 作为模板引擎。最明显的部分是什么？由于 React 的流行，《盖茨比》在其社区中自然拥有大量忠实用户。这里的工作模式很简单：盖茨比可以从大量的数据源中提取数据，然后对其进行处理，生成可以在您选择的平台上托管的静态网页。
因此，如果您拥有无头 CMS、数据库、自定义动态 API、JSON 甚至动态内容管理系统（如 WordPress 或 Drupal）形式的数据，您可以使用 Gatsby 处理该数据，然后将其导出为静态页面。换句话说，如果您希望创建设备感知的渐进式 web 应用程序并使用 React，则 Gatsby 是理想的工具。Gatsby 就像一个 JS 框架，可以根据项目的需要进行扩展。然而，与 VuePress 相比，《盖茨比》的局限性在于它依赖于 GraphQL 和 React。
盖茨比主页位于https://www.gatsbyjs.org 。
多恩
Hexo 是一个静态站点生成器，主要以其创建博客、文档站点和其他需要频繁更新内容的项目的能力而自豪。它有自己的插件系统，你甚至可以使用其他类似项目的插件。
Hexo 也是基于 JS 的，在遗传学方面与 VuePress 相当接近。但是，它并不是所有事情都完全依赖 Vue.js。事实上，Hexo 和 VuePress 之间最大也是最明显的区别在于前者的主题化架构是基于字符串的，而不是从 Vue 派生的。
Hexo 主页可在找到 https://hexo.io 。
Nuxt.js
列表中的最后一个条目 Nuxt.js 与 VuePress 有很多共同之处。与 VuePress 非常相似，Nuxt.js 也基于 js，并使用 Vue.js 作为其模板引擎。事实上，Nuxt.js 本身就是一个非常强大的工具包，可以完成 VuePress 声称的许多功能。
那么，如果 Nuxt 是我们问题的答案，那么 VuePress 需要什么呢？VuJS 和 VuJS 的基本原理主要是基于静态的博客，而 VuJS 和 VuJS 的基本原理主要是基于静态的博客！因此，VuePress 非常适合创建以内容为中心的网站和实体，如博客、文档网站等。Nuxt.js 通常处理基于 Vue.js 的应用程序，而不是以内容为中心的站点。
Nuxt.js 主页位于https://nuxtjs.org 。
现在，我们已经讨论了一些主要的静态站点生成器。那么，是什么让 VuePress 与众不同呢？
为什么要使用 VuePress？
基于我们对其他静态站点生成器的简要讨论，很明显，VuePress 在其他静态站点生成器可能不够用的情况下可以证明是有用的。例如，考虑以下情况。
如果您使用 JS，VuePress 是一个不错的选择。现在越来越多的开发人员转向 JS，因为它具有高度的通用性、可扩展性，并且可以轻松地完成大型项目。此外，如果您不喜欢依赖 React 或 AngularJS 作为默认框架，那么 Vue.js 在能力和功能方面是一个自然的选择。
如果您不需要创建仅应用程序的项目，但需要一些可用于构建以内容为中心的网站的东西，那么 VuePress 是一个值得选择的选项。
由于 VuePress 的主题引擎是基于 Vue 本身的，因此如果您刚刚开始使用 Vue.js 框架，它将被证明是一个很好的学习工具。
好的，在这个阶段，我们已经了解了什么是 VuePress，静态站点生成器可以做什么，应该做什么，为什么要使用它。现在正是为未来的 VuePress 开发、定制、部署和更多工作做好准备的最佳时机！
VuePress 入门入门入门
在接下来的章节中，我们将深入讨论与 VuePress 相关的概念。首先，我们将从安装开始，然后转到基本自定义、调整、启动博客或网站、自定义主题等。
但正如您所看到的，安装显然是第一步。VuePress 在磁盘空间、带宽或内存方面没有巨大的需求池。事实上，您甚至可以在共享主机环境中运行它，前提是您的 web 主机提供商支持所需的 JS 脚本（尽管从实际情况来看，目前没有多少共享主机可以声称这样做）。
如果您熟悉 JS 开发，您可能已经知道您需要的一切以及如何获得它。很有可能您已经建立了这样一个环境。为了帮助您为未来做好准备，以下是运行 VuePress 所需的所有内容的基本概述：
The biggest pre-requisite here is that you need Node.js version 8 or higher. It will come bundled with npm, so just make sure that your environment has the right version of Node.js.
除此之外，要求也很简单。对于生产站点，最好使用一些服务器端缓存。如前所述，VuePress 等静态站点生成器本身速度非常快，因此不需要定制编码缓存系统。
A server-side caching mechanism can help further boost the performance of your sites.
基本上，现在就这些了。我们将在接下来的章节中保存编码细节和其他输入。
总结
在这一章中，我们讨论了很多事情。我们学习了静态站点生成器，它们是什么，为什么我们应该使用它们，以及它们的优点和缺点。虽然我们不能为每一个场景使用静态站点生成器，但有各种类型的网站、博客和其他项目可以证明这些生成器是有用的。
现在，在静态站点生成器的世界中，我们有很多选择。但是，VuePress 对于希望创建依赖内容的网站并将其呈现为单页应用程序以加快页面加载速度的任何人来说都是一个不错的选择。VuePress 依赖于 Vue.js—因此，了解 js 及其框架的方法对于帮助您充分利用 VuePress 至关重要。
随着本书的深入，我们将更详细地了解 VuePress。在下一章中，我们将花一些时间熟悉 Vue.js 及其功能。这将帮助那些不是 Vue.js 专家的读者。
此后，我们将开始学习 VuePress，从它的安装、操作环境、设置、配置等开始。更重要的是，我们还将涵盖安全步骤，以确保我们的生产现场安全无风险。在我们开始学习 VuePress 开发之旅的下一章中，再见！
版权属于：月萌API www.moonapi.com，转载请注明出处
