VuePress 快速启动指南（二）（vuepress build）

原文：zh.annas-archive.org/md5/986b9a64ec5b7230ac6d991c3d740203

译者：飞龙

许可证：CC BY-NC-SA 4.0

第七章：更多 VuePress 的用法！

在上一章中，您学习了如何使用VuePress 设置和构建网站。我还知道如何使用Markdown 格式化内容和自定义VuePress 主题。

总的来说，读完前面的章节后你应该对VuePress 有一个很好的了解。

但话虽如此，网站开发仍然有一个重要方面。如今，越来越多的人转向互联网，英语不再是在线使用的唯一语言。因此，这个特别重要的方面必然包括网站的国际化。

在VuePress，国际化并不是火箭科学。事实上，向您的网站内容添加对不同区域和语言的支持非常简单，只需几分钟。

当然，您需要以您要添加的语言输入正确的内容。如果您正在考虑自动翻译，那您就错了。 —— 国际化并不意味着内容会自动翻译。

那么如何向VuePress 添加新语言呢？本章将详细讲解。

在本章中，您将学习：

国际化基础知识

国际化VuePress

分析VuePress 作为软件的未来增长

VuePress：国际化及其更多用法

但除此之外，您还应该了解VuePress 哪些内容？请记住，它正在积极开发中，并且不像许多其他内容管理系统那么古老。

因此，我们稍后将用本章的大部分内容讨论VuePress 的未来，以及在学习如何使用VuePress 后何时应该考虑使用VuePress。

好吧，让我们从国际化开始。

什么是国际化？

在进一步讨论之前，我们首先需要了解什么是国际化。

首先要强调的是，国际化实际上并不涉及内容的机器翻译。

指内容翻译功能。

国际化本身是指添加支持，以便软件或产品可以轻松适应并翻译成其他语言。因此，国际化需要适当的规划和战略，例如：

了解不同语言是如何说和写的

了解多种语言的文化方面及其差异

这两点都非常重要。例如，某些语言（例如阿拉伯语）是从右到左书写的，而不是相反。同样，泰米尔语和印地语等其他语言也有自己的高度复杂的文字，这对于说英语的人来说可能会令人生畏。此外，许多语言（例如日语和中文）通常包含需要特殊符号或键盘布局的字符。

因此，我们可以说国际化是准备将内容翻译成用户当地语言的方法和过程。事实上，使内容适应不同当地语言和地区需求的过程称为本地化。

国际化也缩写为i18n 或i-18-n。这意味着i-8-n，即从I 到N 的18 个字符。

软件方面最关心的问题通常是能够轻松地将需要单一编码的语言（例如英语）的字符翻译为需要多个字符编码的语言（例如中文）的相应字符。转变。

如果满足这个和其他一些小条件，我们可以有把握地说该软件支持国际化或已准备好本地化。

VuePress 中的国际化

VuePress 默认支持国际化。这意味着您可以轻松地为您选择的语言添加区域设置，并将网站内容本地化为您所需的语言。然后，VuePress 自动处理繁琐的任务，例如正确的内容结构、将菜单切换为其他语言等。

在VuePress 中，国际化本身是在两个层面上实现的。

站点级别配置

主题级别配置

我将解释两者。出于说明目的，该代码使用第二种语言，例如法语。但是，为了实际将您的网站本地化为特定语言，您需要正确输入有关目标语言的详细信息。

VuePress 中的 i18n 配置

让我们从主题级别的i18n 设置开始。

默认主题的 i18n 配置

默认的VuePress 主题具有对本地化的本机支持。这是通过themeConfig.locales 选项实现的。

理想情况下，您添加的每个区域都应该有自己的导航栏和侧边栏选项。侧边栏和导航栏选项在第6 章“使用VuePress 进行主题开发”中进行了解释。此外，必须为每个区域单独指定特定于站点的元数据和其他字段。

看一下下面的代码片段。

模块. 导出={

locales: { /* . */},

主题配置： {

区域设置： {

\’/\’: {

//菜单语言下拉文本

selectText: \’语言\’,

//语言下拉列表中该语言的标签

label: \’英语\’,

//edit-on-github 链接的文本

editLinkText: \’在GitHub 上编辑此页面\’,

//配置Service Worker弹出UI（可选）

服务人员： {

更新弹出： {

message: \’新内容可用。 \’,

ButtonText: \’更新\’

}

},

//算法文档搜索选项（可选）

算法： {},

导航：[

{ text: \’嵌套\’, link: \’/nested/\’ }

],

侧边栏： {

\’/\’: [/* . */],

\’/嵌套/\’: [/* . */]

}

},

\’/fr/\’: {

//菜单语言下拉文本

selectText: \’法语文本\’,

//语言下拉列表中该语言的标签

label: \’法语\’,

//edit-on-github 链接的文本

editLinkText: \’法语文本\’,

//配置Service Worker弹出UI（可选）

服务人员： {

更新弹出： {

message: \’法语文本\’,

buttonText: \’更新法语文本\’

}

},

//算法文档搜索选项（可选）

算法： {},

导航：[

{ text: \’嵌套\’, link: \’/nested/\’ }

],

侧边栏： {

\’/\’: [/* . */],

\’/嵌套/\’: [/* . */]

} }

\’/es/\’: {

//菜单语言下拉文本

selectText: \’西班牙语文本\’,

//语言下拉列表中该语言的标签

label: \’西班牙语\’,

//edit-on-github 链接的文本

editLinkText: \’西班牙语文本\’,

//配置Service Worker弹出UI（可选）

服务人员： {

更新弹出： {

message: \’西班牙语文本\’,

buttonText: \’更新西班牙语文本\’

}

},

//算法文档搜索选项（可选）

算法： {},

导航：[

{ text: \’嵌套\’, link: \’/nested/\’ }

],

侧边栏： {

\’/\’: [/* . */],

\’/嵌套/\’: [/* . */]

} }

}

}

}

上面的代码做了什么？

现在，主题—— 将多个区域设置设置为英语、法语和西班牙语。

菜单中添加了一个用于语言选择的下拉框。接下来，将不同语言的适当文本添加到GitHub 条目、Algolia 搜索和Service Worker 弹出UI。

因此，如果用户正在查看您网站的英文版本，他们将看到“更新”作为按钮文本。但是，如果您使用我们网站的法语版本(/fr URL)，您将看到法语中的“更新”一词，如果您使用我们网站的西班牙语版本(/es URL)，您将看到如果是法语中的“更新”一词，您将看到“更新”一词。您将看到相同语言的“刷新”一词。一个按钮会以您指定的西班牙语显示“刷新”一词。

请注意，在上面的代码中，您需要输入实际对应于法语和西班牙语区域设置的值。 Refresh-text-in-spanish 表示您需要在此处指定相应的文本。如果没有，VuePress 实际上会在前端显示短语Refresh-text-in-spanish（字面意思）。

您可以对任意数量的语言重复此过程。

站点级别的 i18n 配置

现在您知道如何在VuePress 中的主题级别添加多语言支持。然而，在我们真正做到这一点之前，我们首先需要在站点级别实现这一点。

因此，在向主题添加对特定区域设置的支持之前，必须首先在config.js 文件中指定区域设置选项。

考虑以下站点结构。

请注意，我们创建了具有相同结构的同一文件的三个副本。 /Copy 显然适用于英文网站。但是，法语和西班牙语版本分别使用/fr/和/es/的副本。 fr/about.md 文件包含与/about.md 文件相同的内容，只是语言不同。

按照您想要的方式构建网站后，您可以在config.js 文件中指定区域设置选项：

//输入.vuepress/config.js

模块. 导出={

区域设置： {

//默认区域设置允许“/”作为路径

\’/\’: {

lang: \’en-US\’, //这被设置为HTML lang 属性

title: \”早上好\”,

description: \’英语VuePress\’

},

\’/fr/\’: {

lang: \’fr-FR\’,

title:“祝你好”，

description: \’法国VuePress\’

}

\’/es/\’: {

lang: \’es-ES\’,

title:“布宜诺斯迪亚斯”，

description: \’西班牙语VuePress\’

}

}

}

正如您所看到的，通过为每种语言分别指定标题和描述属性，VuePress 支持多种语言，并根据您的语言/区域选择切换到正确版本的标题、描述和其他信息。

如果某个区域没有自己的标题或描述值，VuePress 会自动恢复为根值（在本例中为英语）。

在站点级别实施上述操作后，您可以安全地实施上述主题级别的更改。 VuePress 会自动将语言切换器条目添加到导航栏的级别菜单中。

一个活生生的例子是VuePress 官方网站本身，它已本地化为英语和中文。语言切换器将出现在菜单中，其中包含您需要的所有相关选项卡。

就VuePress 而言，国际化讨论就到此为止。添加正确的目录结构并验证您已针对特定主题的区域设置进行了必要的调整后，您就可以安全地启动并运行您的网站。

说到这里，我们很快就会进入下一章。然而，在这个阶段，立即讨论VuePress 的其他方面是明智的。

分析 VuePress

现在我们已经涵盖了与VuePress 开发相关的几乎所有内容，让我们重点关注与这个令人印象深刻的静态网站生成器相关的一些实际方面。

重要的问题是：我们对VuePress 的了解将带我们去往何方？

换句话说，在不久的将来，我们对VuePress 有何期望？从长远来看，维护VuePress 网站会是什么样子？

VuePress 接下来会怎样？

目前来看，这个问题基本上是在意料之中的。现在您有了一个新的静态网站生成工具，接下来会发生什么？

VuePress 绝对是一个随着时间的推移会变得流行的解决方案。这主要是因为它提供了一些开发者社区长期以来想要的功能。

例如，对国际化的直接支持是一个很大的优势。轻松创建多个地区的网站和项目。

VuePress 的另一个令人印象深刻的事情是它配备了功能齐全的默认主题。这并不是许多静态网站生成器可以夸耀的事实。此外，正如我们在上一章中看到的，这个默认主题不仅仅是一个起始主题或骨架主题。这是一个完整的代码，具有前端显示和令人惊叹的定制范围。

此外，VuePress 支持Markdown 编辑，由于Markdown 的广泛流行，这也可能对VuePress 有利。事实上，即使像WordPress 这样的流行工具最近也添加了用于Markdown 编辑和格式化的插件。 Ghost 是一个基于Node.js 的流行博客平台，也原生支持Markdown。

虽然我们讨论的是博客主题，但值得一提的是，VuePress 尚未准备好博客。是的，可以使用VuePress 创建博客，但这样的博客在功能上会明显缺乏。例如，几乎不支持对博客文章进行标记或分类。

VuePress 仍在积极开发中。这意味着在不久的将来可能会添加对博客的支持，类似于Jekyll。

然而，就目前而言，VuePress 更多的是一个文档生成软件，而不是一个博客平台。您可以创建令人惊叹的静态网站，这些网站可以动态地用作单页应用程序。这是VuePress 的独特卖点。

随着时间的推移，随着VuePress 越来越受欢迎，它的受欢迎程度和使用量可能会增加。在Vue.js 在JavaScript 框架世界中不断崛起的同时，VuePress 也有自己坚实的基础和基础。看到VuePress 继续受欢迎并开始被列为顶级静态网站生成器之一也就不足为奇了。

长期使用 VuePress

既然您已经学会了如何使用VuePress 构建和维护网站，您是否应该考虑在您的项目中长期使用此工具？

您可能已经在使用另一个静态站点生成器或类似的服务。在这种情况下，我改用VuePress能获得更多好处吗？

如果您计划为您的项目创建一个文档站点，那么从长远来看，您应该认真考虑VuePress。显然，VuePress 是为创建和维护文档而定制的。它具有对国际化的原生支持、多个标题链接结构、简单的导航机制，并与GitHub 或GitLab 集成以轻松推送更新。

此外，如果我们考虑其他常用于文档目的的项目，我们可以看到VuePress 比其他项目具有明显的优势。例如，Nuxt.js 可以让您创建令人印象深刻且文档齐全的网站，但它也专为应用程序级开发而设计。

另一方面，VuePress 并不是“万事通，一无是处”。虽然您可以使用它来构建单页应用程序，但完全在VuePress 之上构建事件或电子商务注册系统几乎是不可能的。但是文档呢？

也许VuePress 非常合适并且与Markdown 完全集成是另一个需要考虑的因素。如果您喜欢用Markdown 写作（就像我一样），VuePress 可能是您正在寻找的静态网站生成CMS。

另一方面，目前唯一的缺点是基本的VuePress 软件目前没有良好的博客支持。开发人员通常构建类似于博客的文档网站，包括评论、查询、标签和内容分类。 VuePress 目前不具备这些功能。当然，这些功能可能会在不久的将来添加，但这更多的是预测而不是确定。

归根结底，如果您满足以下任何条件，可以肯定地说您可以而且应该使用VuePress：

正在寻找一个简单的静态网站生成器？

更喜欢使用Vue.js？

您想要具有良好国际化功能、具有良好默认主题并支持Markdown 的东西。

主要目的是组织内容集合，Git 集成可以提供帮助。

另一方面，如果以下任何一项适用于您，您可能会觉得VuePress 不值得付出努力。

如果您需要博客、杂志式出版和所见即所得编辑等高级功能的支持。

我不喜欢Markdown，也不觉得需要像文档项目那样系统地组织内容。

总结

就是这样！

在本章中，我们涵盖了与国际化VuePress 相关的所有内容。通过选择适当的区域设置，您可以轻松地将VuePress 网站本地化为您选择的语言。

我们还简要讨论了VuePress 的未来方向。毫无疑问，该产品正在不断开发，新功能和错误修复的发布相当频繁。当然，它可能适合也可能不适合您的工作流程，但如果您想要基于Markdown 且易于使用的东西，VuePress 值得一试。

未来会怎样？

本书的最后一章重点介绍将VuePress 部署到云，以便您可以使您的网站上线。在第4 章“使用VuePress 创建网站”中，您创建了一个小型VuePress 网站。在下一章中，您学习了如何在VuePress 中使用Markdown 进行内容编辑和主题定制。

当然，学习如何部署VuePress 网站是有意义的。因此，在下一章中，我们将学习如何将VuePress 网站部署到Heroku、Netlify 等。

第八章：将 VuePress 部署到网络上

在本书的前几章中，我们了解了很多有关VuePress 的知识。我们从静态站点生成器开始，解释了VuePress 的位置，然后继续安装、设置、配置变量以及Markdown 中的实际用法和内容编辑。

除此之外，我们还特别关注VuePress的本地化、国际化和主题定制。

好吧，在这个阶段，您可能已经使用VuePress 准备好了一个网站。您可能还进行了设置和更改。

所以我们所要做的就是让我们的网站上线。为此，您需要让世界各地的人们都能看到您的网站。

部署Web 应用程序和网站并不是什么大事。如果您有Web 开发经验，您可能会经常部署项目。但是，像VuePress 这样的JavaScript 应用程序无法直接在任何服务器上启动。共享托管提供商通常不直接支持JavaScript。

因此，本章将重点讨论VuePress 的实现。涵盖诸如在何处以及如何部署网站等主题。

在本章中，您将学习：

VuePress 部署建议

将VuePress 部署到各种云/远程托管提供商

在您的VuePress 站点中使用自定义域名

VuePress 部署-简介

我目前有一个VuePress 网站，是我在第4 章“使用VuePress 创建网站”中构建的。此外，在下一章中，您可以使用Markdown 调整外观并编辑内容。

所以我们现在拥有的是一个本地主机，一个托管在您自己的设备上的网站。您可以使用笔记本电脑或计算机进行开发。或者，如果您直接在远程服务器上进行开发，您的网站可能已经部署。

因此，本章假设您正在构建的网站位于本地存储上并相应地进行。了解如何部署到不同的服务，包括：

GitHub 页面

亚搏体育appGitLab页面

谷歌火力基地

赫罗库

网络化

浪涌

但是，在继续之前，请注意，我们将仅关注完全免费使用或提供免费计划的服务。当然，如果您已经拥有或计划购买一项高级计划，您也可以选择一项高级计划。然而，纯粹为了部署静态站点而注册付费服务没有什么意义。

当然，这意味着您的VuePress 部署需要注册您计划使用的服务。在某些情况下，您可能已经有一个帐户。例如，如果您是GitHub 用户，则只需对其进行配置即可使用。

这就提出了一个重要的问题。为什么我无法使用云托管服务来部署我的VuePress 网站？

VuePress 部署的先决条件

如您所知，VuePress 本身的系统要求很少。 MySQL 或MS-SQL 很少需要，因为数据库不用于从服务器检索或写入数据。

考虑到VuePress 作为单页Web 应用程序运行，它的速度非常快并且内存占用率低。与其他需要大量内存才能运行的内容管理系统不同，它可以在内存有限的基本服务器上运行。

然而，VuePress 的正常工作有一些要求。

显然，VuePress 由Vue.js 提供支持。因此，您的服务器必须支持JavaScript 和Vue.js，并安装所有依赖项和变量。

VuePress 需要Node.js 8 或更高版本才能运行。

我们能使用共享托管来运行 VuePress 吗？

如今，在共享托管环境中运行网站和项目已经变得非常普遍，尤其是

别是如果它们不是高流量网站。这样的托管计划每月只需花费 3 美元，而且功能齐全。

事实上，许多 WordPress 网站往往可以在共享托管计划上顺利运行，有些甚至可以轻松处理每天超过 25,000 个访问者，如果进行了适当的优化。自然地，考虑在共享托管平台上运行 VuePress 可能是一种诱惑。毕竟，如果 WordPress 和 Drupal 都可以在上面运行，为什么 VuePress 不行呢（它消耗的资源远少于 WordPress 和 Drupal）？

嗯，在教科书上的术语中，是的，VuePress 可以部署到共享服务器上。

实际上，遗憾的是，这样的部署是不可能的。这是因为共享主机往往有自己预配置的变量和语言支持。您无法安装新的依赖项和其他语言或框架，因为您无法访问服务器的根目录。

大多数共享主机提供商默认提供 PHP 和 MySQL，以及 Python 和其他脚本语言。WordPress、Drupal 和其他各种 CMS 都需要 PHP 才能运行。但 JavaScript 框架，如 Vue.js 和 Node.js，在共享主机环境中很少见。

这意味着，虽然理论上您可以在共享服务器上运行 VuePress，但实际上不太可能。对于大多数共享主机提供商来说，支持 Vue.js 站点生成器在其服务器上的机会很渺茫。

那么这是否意味着您需要购买自己的 VPS 或专用服务器？当然不是！

有一些令人惊奇的服务，既免费又付费，可以帮助我们部署 VuePress 站点。

使用 VuePress 部署入门

在开始传输过程之前，请确保您的项目目录结构正确。

如果您将 VuePress 作为现有项目中的本地依赖项使用（请参阅本书的第一章，了解本地依赖项和全局安装之间的区别），您应该在开始部署之前运行以下 npm 命令：

{
\”scripts\”: {
\”docs:build\”: \”vuepress build docs\”
}
}

VuePress 默认的构建输出位置是.vuepress目录中的 dist 目录。如果您愿意，可以选择更改它，但在本章中，我们将坚持使用默认位置。如果您已更改了默认的构建输出位置，请确保相应编辑您的部署命令。否则，部署可能会失败。

将 VuePress 部署到 GitHub Pages

现在我们将学习如何将现有的 VuePress 站点部署到 GitHub Pages，这是一个非常受开发社区欢迎的托管静态站点的服务。

GitHub Pages 是什么？

GitHub Pages 是一个流行的服务，可以让您为项目部署和托管网站。您也可以直接从 GitHub 存储库部署。这意味着每次您对数据进行更改时，只需将它们推送到 GitHub 存储库，页面站点将相应更新。

GitHub Pages 在托管静态站点方面是一个非常知名的名字。在第一章中，介绍静态站点生成器和 VuePress，您简要介绍了博客工具 Jekyll，它也是一个像 VuePress 一样的静态站点生成器。GitHub Pages 在 Jekyll 中运行得非常好，实际上，它是目前托管 Jekyll 博客最流行的平台。

GitHub Pages 没有单独的定价结构，但您需要注册 GitHub 提供的计划之一。有一个免费的计划，并且对于高端用户，还有带有额外功能的付费计划。

在很大程度上，许多新开发者倾向于完全依赖 GitHub 的免费计划。

用法

使用 GitHub Pages 部署您的 VuePress 站点非常简单。

首先，您需要在config.js文件中指定正确的基础。默认情况下，VuePress 将基础读取为/，因此，如果您部署在根域上，可以选择不指定基础。

在这里，根域指的是类似yourusername.github.io的东西。

但是，如果您要部署到子目录，则需要指定基础。例如，如果您要部署到yourusername.github.io/vuep，那么基础将是/vuep/。

在使用 GitHub Pages 时，您的存储库名称通常也是部署地址。

下一步是创建一个部署脚本。在您的 VuePress 项目中，创建一个名为deploy.sh的文件，具有以下语法（确保将路径替换为您的存储库的路径）：

# !/usr/bin/env sh
# aborting on errors
set -e
# building
npm run docs:build
# navigating to the build output directory
cd .vuepress/dist
# if you are deploying to a custom domain
# be sure to add proper CNAME records to your domain
echo \’www.myfancydomain.com\’ > CNAME-record-here
git init
git add -A
git commit -m \’deploy\’
# if deploying to https://yourusername.github.io
git push -f git@github.com:yourusername/yourusername.github.io.git master
# or if deploying to https://username.github.io/reponame
git push -f git@github.com:username/repo.git master:gh-pages

请注意，在前述语法的最后两个命令中，您必须根据您的部署路径选择使用其中一个。

就是这样。一旦运行了前述脚本，部署就完成了。请记住，您必须根据您的项目结构指定路径和详细信息。

或者，如果您将 VuePress 作为 Pages 帐户的唯一站点，并且/或者希望创建一个组织站点，您还可以通过存储库直接部署。

为了实现这一点，第一步是使用您的 GitHub 用户名（或组织名称）创建一个新的存储库，类似于username.github.io，如下所示：

下一步是使用以下命令克隆新的存储库：

git clone https://github.com/username/username.github.io

使用前述命令时，请确保将用户名字段更改为您自己的用户名。

然后，剩下的就是添加、提交和推送更改，如下所示：

git add –all
git commit -m \”initial commit\”
git push -u origin master

使用自定义域名

GitHub Pages 允许用户向其项目站点添加自定义域名，而不受其所在计划的限制。

要将域名映射到您的站点，首先步骤显然是注册该域名。

有许多域名注册商，例如GoDaddy、Register.com、Gandi.net等。我个人使用Namecheap和Name.com注册所有我的域名，但这更多是偏好而不是推荐。

注册域名后，您需要修改其 DNS 记录，指向所涉及的托管平台，例如 GitHub Pages。通常，这是通过 CNAME 记录来实现的，尽管有些平台也可能使用 A 记录。

根据您的域名注册商提供的界面和设置，添加或修改 DNS 记录的程序可能会有所不同。如果有疑问，请务必联系您的注册商支持团队！不正确的配置可能导致域名无法解析。

对于 GitHub Pages，您只需将域名添加到存储库设置（而不是页面设置）中。然后，您只需输入 CNAME 记录并等待 DNS 传播。

您可以在help.github.com/articles/using-a-custom-domain-with-github-pages/找到详细的自定义域名映射指南。

将 VuePress 部署到谷歌 Firebase

VuePress 可以借助 Firebase CLI 工具部署到 Firebase 上。Firebase 是一个众所周知但相对更复杂的选项，用于在云中托管站点和项目。

什么是谷歌 Firebase？

如果您对 Firebase 还不熟悉，首先要注意的是它由谷歌支持。这意味着您的项目将获得企业级可靠性、令人惊叹的云基础设施以及谷歌提供的各种其他功能。

Firebase 让您可以使用谷歌基础设施在云中托管您的应用程序和项目。但它不仅仅止步于此——每个 Firebase 计划（包括免费计划）都附带了各种令人惊叹的功能：

A/B 测试
谷歌分析
Crashlytics
云消息传递（FCM）
远程配置
性能监控
云测试
自定义域
自定义 SSL 证书
还有更多！

事实上，一个简单的 VuePress 网站甚至不需要大多数这些功能。话虽如此，谷歌 Firebase 免费提供如此多的令人惊叹的功能，确实是一笔非常划算的交易！

Firebase 的免费计划为您提供 1GB 的存储空间，但没有数据库访问权限。对于大多数 VuePress 网站来说，这已经足够了。然而，令人遗憾的是，免费计划中只有 10GB 的月度带宽。对于一个繁忙的网站，10GB 的带宽可能不足够。

您也可以选择付费计划，起价为每月 25 美元，或选择按使用量额外付费。这意味着如果您超出了免费计划，您只需支付额外的使用费用。

如果您担心 Google Firebase 的定价结构，您可以使用他们的费用计算器来评估您每月可能支付的费用。在firebase.google.com/pricing/找到计算器。

用法

为了使用 Firebase，我们需要注册一个帐户，无论是免费还是高级。

一旦我们注册了 Firebase，就会得到一个 Firebase ID。确保将其保存在安全的地方（您可以在 Firebase 控制台中找到密钥）。

将项目添加到 Firebase 控制台很简单 – 我们只需要指定项目名称，如图所示（默认情况下，项目将添加到免费计划中）：

一旦我们创建了一个项目，Firebase 将自动带我们进入项目的控制台页面。随意尝试一下；由于 VuePress 还没有连接到 Google Firebase，在这个阶段不用担心破坏任何东西。控制台页面如下所示：

接下来，是时候为我们的 VuePress 实例做好部署的准备了。我们的系统上已经有了 Node 和 npm，但我们需要 Firebase 工具才能在系统上运行 Firebase 命令。

Firebase 工具是一组命令行工具和命令，可用于将代码部署到 Firebase 项目，向 Firebase 添加和删除用户和其他数据，并在需要时读取和写入数据到我们的 Firebase 数据库。更多细节可以在www.npmjs.com/package/firebase-tools找到。

要安装 Firebase 工具，我们需要运行此命令：

npm install -g firebase-tools

安装完成后，我们可以在 CLI 中使用 Firebase 命令。

此时，我们需要在 VuePress 网站的根文件夹中创建两个文件。

首先，我们将创建firebase.json文件，语法如下（添加到您特定的 dist 目录的路径）：

{
\”hosting\”: {
\”public\”: \”path-to-dist-directory\”,
\”ignore\”: [ ]
}
}

我们需要创建的第二个文件是.firebaserc（请注意，这是一个点文件，在 Linux/UNIX 系统的文件查看器中默认情况下将被隐藏）。此文件的语法如下（添加您的 Firebase ID）：

{
\”projects\”: {
\”default\”: \”Firebase-ID-comes-here\”
}
}

然后，我们只需要使用以下命令构建项目：

npm run docs:build

最后，要部署我们的网站，我们使用此命令：

firebase deploy

就这样！我们的网站将部署在 Firebase 服务器上。

然后，我们可以返回 Firebase 控制台进行其他任务，例如自定义域名映射、A/B 测试、Crashlytics，甚至其他集成，如 AdSense、Slack 等。

使用自定义域名

此时，我们的网站将位于免费子域，类似于yoursite.firebaseapp.com。

要映射自定义域名，在 Firebase 控制台中，我们需要点击“连接域”按钮，如此截图所示：

然后，我们将指定我们的域名，并验证其所有权。最简单的方法是通过 CNAME 记录来实现，如下所示：

请记住，域名传播可能需要几个小时，即使是 CNAME 记录的情况也是如此。

根据我们注册域名的域名注册商，添加 CNAME 记录的过程可能会有所不同。因此，建议与注册商的支持团队联系以获取更多建议。

了解如何将自定义域名连接到 Firebase 的更多信息，请访问firebase.google.com/docs/hosting/custom-domain。

将 VuePress 部署到 Surge

VuePress 可以部署到 Surge.sh 静态站点托管服务。这种特定的服务并不像 Google Firebase 那样功能丰富，但它已被证明非常可靠，并且在性能方面非常快。

什么是 Surge？

Surge 是一个让您可以直接从命令行发布网站到网络的服务。它更适合前端开发人员，但并没有严格限制谁可以使用它。

与 Firebase 不同，后者通常专门为 Android 或其他移动应用开发人员定制，Surge 旨在满足 HTML 和 JavaScript 编码人员的需求，特别是 Web 开发人员的需求。

Surge 自带了针对 Gulp 和 Grunt 的即插即用插件。它还与 GitHub 集成，并支持各种静态站点生成器，包括 Jekyll 和 VuePress！

在定价方面，Surge 也有免费和付费计划。付费计划每月 30 美元，提供无限制的一切，以及自定义 SSL、自定义重定向规则和密码保护。

另一方面，免费计划允许我们添加具有基本 SSL 的自定义域，但不会对发布设置任何限制。这意味着我们可以对我们的网站进行任意数量的更改，而不必担心带宽限制或其他类似问题。这就是使 Surge 对前端开发人员特别有帮助的原因！

用法

在继续之前，我们需要通过 npm 安装 Surge。只需运行以下命令：

npm install -g surge

这应该在我们的系统上安装 Surge，现在我们可以使用 Surge 命令。有关该命令的更多详细信息，请访问www.npmjs.com/package/surge。

之后，我们只需要构建我们的文档，如下所示：

npm run docs:build

最后，是时候部署了（请注意，如果您偶然更改了值或路径，可能需要传递正确的路径到您的 dist 目录）：

surge .vuepress/dist

就是这样！Surge 是最容易使用的静态站点托管服务之一！

如果我们在根目录中添加一个名为404.html的文件，Surge 足够智能，可以将该文件用作自定义 404 页面，在出现页面未找到错误时显示。

使用自定义域

如果您有一个希望使用的自定义域名，最好的做法是遵循官方 Surge 文档，其中包含逐步指南，适用于十多个域名注册商。

此文档可在surge.sh/help/adding-a-custom-domain找到。

然而，值得注意的是，如果我们不使用默认的 surge.sh 子域，我们需要在部署命令中传递自定义域名。因此，前面的命令将改为以下内容：

surge .vuepress/dist mycustomdomain.com

将 VuePress 部署到 Heroku

对于 VuePress 网站使用 Heroku 通常似乎有些大材小用。这是因为 Heroku 提供了大量功能，通常对于简单的 VuePress 网站并不需要。

但是，如果您已经有一个 Heroku 账户（比如，用于您的其他开发项目），将您的 VuePress 网站添加到其中可能比浪费时间、精力和金钱注册另一个服务更有意义。

什么是 Heroku？

Heroku 是一个强大而强大的云托管平台，支持非常广泛的语言、脚本、技术等。您可以轻松在 Heroku 上运行 PHP、JavaScript、Ruby、UNIX、Python、Perl 等许多其他应用程序。

Heroku 还能够支持多个数据库管理系统，如 MySQL 甚至 PostgreSQL。这意味着 Heroku 拥有广泛的用户群，涵盖了多种方法论和编码范式。

当然，在所有这些中，对于静态网站使用 Heroku 可能看起来是不必要的。但是话虽如此，如果您的目标是在您的工作流程的更大框架内使用 VuePress，比如现有的 React 或 Vue.js 应用程序，那么 Heroku 可以为整个项目提供无缝的平台，并与各种管理工具集成。

在定价方面，Heroku 提供了一个非常多样化的定价模型，从 7 美元开始，一直到企业定价，每月达到 500 美元。更合理的是直接呈现定价表的整体情况：

如您所见，免费计划让我们拥有一个工作连接，并且还允许我们映射我们的自定义域。

您可以在www.heroku.com/pricing上计算运行 Heroku 实例的预计成本。

用法

为了将我们的 VuePress 网站部署到 Heroku，我们首先需要注册一个 Heroku 账户。您可以在signup.heroku.com/注册免费账户。注册界面将看起来像这样：

请注意，在注册过程中有选择主要开发语言的要求。如果没有其他主要使用的语言，Node.js 是您需要选择的 VuePress 部署语言。这并不重要；您可以选择任何语言，仍然可以轻松部署其他语言的应用程序。

一旦我们成功创建了一个帐户，我们将被带到 Heroku 仪表板。我们现在可以在这里注册一个新的应用程序：

有两种主要方法可以将 VuePress 项目部署到 Heroku：

使用 Heroku CLI 依赖于 Heroku Git
连接到 GitHub 本身

连接到 GitHub 意味着我们正在将存储库的一个分支部署到 Heroku，以便更改会自动推送到现场，如下所示：

然而，让我们讨论使用 CLI 的主流路线，因为有时可能更具挑战性。

在继续之前，需要安装 Heroku CLI。使用 npm，只需发出以下命令即可：

npm install -g heroku

然而，在这里情况略有不同。Heroku CLI 依赖于最新版本的 Node，如果我们的系统跟不上它，事情可能会潜在地出错。为了避免这种情况，如果通过 npm 安装了 Heroku CLI，则不提供自动更新。我们需要根据可能或必要的情况手动更新 CLI。

当然，这可能会增加太多额外的工作。更简单的方法是使用官方安装程序。Heroku 为 Windows、Mac 和 Ubuntu 平台提供了安装程序。对于其他 Linux 版本，安装的一般命令如下（以超级用户身份运行）：

sudo snap install –classic heroku

有关 Heroku CLI 安装过程的更多详细信息，以及下载 Windows 和 macOS 安装程序的链接，可在devcenter.heroku.com/articles/heroku-cli找到。

Heroku CLI 需要 Git 才能运行。在安装 Heroku CLI 之前，请确保您的系统已安装 Git。

一旦我们创建了一个帐户并设置了 Heroku CLI，就该使用我们的密码和用户名凭据登录 Heroku 了。我们只需输入以下命令，然后在提示时输入我们的登录详细信息：

heroku login

此后，我们需要在 VuePress 项目的根目录中创建一个static.json文件。该文件应填写以下内容（需要完整指定到dist目录的路径）：

{
\”root\”: \”path-to-vuepress-dist-directory\”
}

static.json文件非常重要，如果没有它，远程部署将无法工作！

完成后，我们需要使用 Heroku Git 进行设置。要添加 Git 提交，请使用以下代码：

# version change
cd project-path
git init
heroku git:remote -a app-name-here
git add
git commit -m \”Ready to deploy.\”

要创建新的应用程序，请输入以下命令：

# creates a new app
heroku apps:create vuepress-app-name

要设置buildpack，请使用此命令：

# buildpack for static sites
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git

Heroku 的buildpack是一个主要用于静态站点的自定义工具和命令集。在其 GitHub 页面上了解更多关于其用法：github.com/heroku/heroku-buildpack-static。

最后，我们只需要部署我们的网站并推送更改，如下所示：

git push heroku master

我们完成了！关于网站的指标和使用统计可以在 Heroku 仪表板中查看。

使用自定义域名

我们可以在 Heroku 仪表板中为 VuePress 网站添加多个自定义域名。默认情况下，我们的网站只会使用herokuapp.com子域。

然而，为了添加自定义域名，需要验证您的帐户。这可以通过添加信用卡详细信息来完成。虽然信用卡上不会有任何账单或费用，但为了防止滥用 Heroku 系统，这些详细信息是必需的。

添加了自定义域名后，我们可以在域名注册商那里修改 CNAME 记录，将域名指向我们的 VuePress 网站。

将 VuePress 部署到 Netlify

由于其自动化工作机制，Netlify 已经成为 Web 开发人员中的知名品牌。您只需从 GitHub、GitLab 等处推送更改，Netlify 就可以处理其余的工作。

事实上，在使用 Netlify 时很少出现问题的可能性。对于寻找只需点击几下即可使用的云托管服务的人来说，它通常是推荐的解决方案。

不用说，Netlify 也非常适用于 VuePress。

什么是 Netlify？

Netlify 自称为自动化现代 Web 项目的一体化平台。简而言之，它让您可以在全球基础设施上部署您的 Web 项目，具有自动 SSL、自定义域名、多个内容交付网络（CDN）等功能。

您可以选择通过 Git 直接部署，然后根据需要推送更改：

Netlify 的高级计划从每月 45 美元起。然而，免费计划让我们轻松部署个人项目，并且还允许我们使用自定义域名。不足之处在于免费计划有一个用户限制，这排除了任何团队协作。定价选项如下所示：

此外，企业级 CDN 在免费计划中也不可用。但就价值而言，免费计划应该足够用于 VuePress 部署。

用法

为了将我们的网站部署到 Netlify，我们首先需要注册一个计划。之后，我们将能够在其中添加关于我们项目的详细信息。

好消息是，Netlify 提供了多种注册选项。我们可以选择使用 GitHub、GitLab 或 BitBucket 进行注册，然后轻松地推送我们的存储库，如下所示：

或者，我们可以依赖电子邮件注册机制。

Netlify 界面非常出色，因为它非常简洁，所以新手用户不会感到困惑：

我们所需要做的就是点击“从 Git 创建新站点”按钮！

然后，我们需要连接到我们选择的 Git 服务，如下所示：

之后，我们只需要选择我们的项目所在的存储库，然后按照以下选项进行指定：

对于构建命令，我们将输入npm run docs:build
对于“发布”目录，我们必须指定完整的路径到我们的dist目录，比如.vuepress/dist

就是这样！

使用自定义域名

Netlify 允许我们在免费计划中为我们的网站添加自定义域名。默认情况下，网站首先在sitename.netlify.com子域上线。

网站添加后，我们可以指定要添加的域名，然后根据我们的域名注册商提供的界面添加 CNAME 记录。

值得注意的是，Netlify 也提供域名的 DNS 管理服务，尽管是在付费计划中。

正如所见，将网站部署到 Netlify 相当容易。唯一的问题是，从本地主机进行部署可能会相当棘手。但如果您是 GitHub、GitLab 或 BitBucket 用户，Netlify 是一个非常简单和可靠的部署解决方案。

将 VuePress 部署到 GitLab Pages

与 GitHub Pages 非常相似，GitLab Pages 也是一种类似的提供，并提供几乎相同级别的功能。

此外，与 GitHub Pages 非常相似，GitLab Pages 也非常注重静态站点及其部署。它可以与 Jekyll、Hugo、Harp、Hexo、Pelican 和显然 VuePress 等服务和软件直接配合使用。我们在本书的第一章中学习了这些静态站点生成器，介绍静态站点生成器和 VuePress。

什么是 GitLab Pages？

GitLab Pages 为基于 GitLab 的项目和存储库提供可靠且高度灵活的托管解决方案。虽然 GitLab 在某种意义上与 GitHub 相似，因为这两个服务都基于 Git，但前者也有自托管的选择，最近变得越来越受欢迎。有许多开发人员出于这个原因而更喜欢 GitLab。

GitLab Pages 允许我们连接自定义域名，以及 SSL 证书。我们可以选择在自己的服务器上运行 GitLab，或者在GitLab.com上运行——无论我们的选择是什么，GitLab Pages 仍然可以用来将站点部署到云端。

在定价方面，GitLab 的自管理和托管变体都配备了免费计划。好处是，与 GitHub 不同，我们甚至可以在免费计划中拥有私人项目！付费计划更适合高端特定用途；如果您的最终目标只是建立一个 VuePress 网站，免费计划就足够了。

值得注意的是，GitLab Pages 没有单独的定价结构。无论是免费还是付费，都是针对 GitLab 本身的。GitLab Pages 是所有计划的免费附加组件。

用法

为了将我们的 VuePress 站点部署到 GitLab Pages，我们首先需要确保在我们的config.js文件中指定了正确的基本值。否则，部署将无法正常工作。

默认情况下，VuePress 将基本值读取为/。这意味着如果站点部署在username.gitlab.io，那么我们可以在config.js中省略基本值。

但是，如果我们要在其他地方部署站点，比如username.gitlab.io/mysite，那么我们需要将基本值指定为/mysite/，依此类推。

此外，config.js文件中的dest值设置为public非常重要。否则，GitLab Pages 可能无法读取项目数据。

一旦我们在config.js文件中输入了所需的值，我们需要在 VuePress 项目的根目录中创建一个名为.gitlab-ci.yml的新文件。然后，我们将根据 VuePress 开发人员的建议填充该文件的以下内容：

image: node:9.11.1
pages:
cache:
paths:
– node_modules/
script:
– npm install
– npm run docs:build
artifacts:
paths:
– public
only:
– master

这个文件只是在我们对站点进行更改时运行所需的脚本来构建和部署我们的站点。

使用自定义域名

默认情况下，GitLab Pages 上的每个站点都可以在项目页面地址上访问，例如myusername.gitlab.io/myproject。

我们可以很容易地将其更改为myusername.gitlab.io（即删除/myproject子路径）。我们只需要在设置中输入项目的名称为myusername.gitlab.io即可——这适用于 GitLab Pages 上托管的几乎所有静态站点生成器。

如果我们需要为我们的站点添加自定义域名，这也是可以做到的。为此，我们需要在站点设置中指定域名，然后将相关的 CNAME 记录添加到我们的域名本身。

GitLab Pages 提供了有关自定义域映射的详细指南，网址为docs.gitlab.com//ce/user/project/pages/introduction.html#add-a-custom-domain-to-your-pages-website。

总结

好了，这就是 VuePress 快速入门指南的结束。在本章中，我们介绍了 VuePress 在各种云托管服务上的部署。

远程或云平台的链接

为了方便参考，这里是本章中我们谈论过的云和远程托管提供商的链接：

GitHub Pages: pages.github.com/
GitLab Pages: about.gitlab.com/features/pages/
Google Firebase: firebase.google.com/
Heroku: heroku.com/home/
Netlify: www.netlify.com/
Surge.sh: surge.sh/

结束语

在本书的过程中，我们学习了关于 VuePress 的大量知识，包括以下内容：

VuePress 在本地主机或机器上的安装
VuePress 配置
VuePress 的使用和构建
VuePress 主题定制
使用 Markdown 处理内容
VuePress 国际化
最后，在本章中，我们学习了如何将站点从本地主机或存储设备部署到远程或云平台

随着 VuePress 的开发和部署的进展，您会发现它非常易于使用，并且是一个相当强大的软件。此外，VuePress 仍在积极开发中，是一个相对较新的工具。这意味着随着时间的推移，VuePress 必定会在功能和受欢迎程度上不断增长。

事实上，在我写这本书的时候，VuePress 推出了九个新版本（包括主要版本和次要版本）！

在这一点上，强烈建议并推荐学习 Vue.js，特别是如果你想在 VuePress 中构建项目并做更多事情的话。在当今时代拥有一个 JavaScript 框架总是一个好主意，要牢记 JavaScript 的日益流行。

读者可以在 GitHub 上浏览本书的代码示例仓库，网址是github.com/packtpublishing/vuepress-quick-start-guide。

另外，最新的 VuePress 代码可以在其 GitHub 仓库中找到，网址是github.com/vuejs/vuepress。

话虽如此，我希望你在阅读本书并特别了解 VuePress 的过程中度过了愉快的时光。

编程愉快！

#以上关于VuePress 快速启动指南（二）的相关内容来源网络仅供参考，相关信息请以官方公告为准！