Skip to content

Latest commit

 

History

History
648 lines (382 loc) · 33.3 KB

File metadata and controls

648 lines (382 loc) · 33.3 KB

八、将 VuePress 部署到 Web

在本书的前几章中,我们了解了很多关于 VuePress 的知识。我们从静态站点生成器开始,VuePress 适用于其中,然后我们开始安装、设置和配置变量,以及在 Markdown 中进行实际使用和内容编辑。

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

现在,在这个阶段,您可能已经在 VuePress 中准备好了一个站点。您可能已经按照您想要的方式对其进行了配置和修改。

这意味着我们唯一要做的就是在网上直播我们的网站!要做到这一点,我们需要部署我们的网站,以便全世界都能看到它。

web 应用程序和网站的部署不是什么大问题,如果您有丰富的 web 开发经验,那么您最好定期部署项目。但是,JavaScript 应用程序(如 VuePress)不能简单地在任何服务器上实时推送。通常,共享主机提供商不仅仅支持现成的 JavaScript。

话虽如此,在本章中,我们将把注意力转向 VuePress 部署。我们将讨论一些主题,如在何处部署我们的站点、如何进行部署等。

在本章中,您将了解以下内容:

  • VuePress 部署咨询
  • 将 VuePress 部署到各种云/远程托管提供商
  • 在 VuePress 站点上使用自定义域

部署 VuePress–简介

目前,我们在第 4 章中建立了一个 VuePress 站点,在 VuePress中创建了一个站点。此外,我们还设法调整了外观,并在随后的章节中以降价方式编辑内容。

因此,我们目前拥有的是一个托管在 localhost 上的网站;也就是说,我们自己的设备。它可以是笔记本电脑,也可以是你正在开发的电脑。或者,如果您直接在远程服务器上开发,您可能已经部署了站点。

因此,本章将假定我们构建的网站位于本地存储设备上,并相应地进行操作。我们将了解如何部署到多种服务,包括:

  • GitHub 页面
  • GitLab 页面
  • 谷歌火基
  • 英勇的
  • 一网情深
  • sweep.sh

但在进一步讨论之前,值得注意的是,我们将只关注那些完全免费使用或提供免费计划的服务。当然,如果您已经拥有或计划获得一个高级计划,您可以选择使用高级计划。但是,仅仅为了部署静态站点而注册一个只付费的服务是毫无意义的

当然,这意味着 VuePress 部署将要求您向计划使用的服务注册。在某些情况下,您可能已经有了一个帐户,例如,如果您是 GitHub 用户,那么您也已经有了一个 Pages 帐户;你所需要做的就是设置一些东西来使用它。

这给我们带来了一个重要问题。为什么我们不能随意使用任何云托管服务来部署我们的 VuePress 站点?

VuePress 部署的先决条件

我们已经知道,VuePress 本身的系统需求很少。它不使用数据库向服务器获取数据或从服务器写入数据,因此很少需要 MySQL 或 MS-SQL。

考虑到 VuePress 作为一个单页 web 应用程序运行的事实,它的速度相当快,内存使用率也很低。您甚至可以在内存有限的最基本的服务器上运行它,这与其他需要大量内存的内容管理系统不同。

但是,VuePress 确实有一些要求才能正常运行:

  • 很明显,VuePress 是由 Vue.js 提供支持的。因此,您的服务器应该支持 JavaScript 和 Vue.js,并安装了所有依赖项和变量。
  • VuePress 需要 Node.js 8 或更高版本才能运行。

我们可以使用共享主机运行 VuePress 吗?

现在,在共享托管环境中运行网站和项目是非常常见的,特别是如果它们不是流量大的网站的话。这样的托管计划每月只需花费 3 美元,而且会带来很多麻烦。

事实上,很多 WordPress 网站都倾向于在共享托管计划下平稳运行,如果优化得当,有些网站每天可以轻松处理 25000 多名访问者。当然,在共享主机平台上运行 VuePress 可能是一种诱惑。毕竟,如果 WordPress 和 Drupal 可以在它们上面运行,为什么 VuePress 不能(它比 WordPress 和 Drupal 消耗的资源少得多)呢?

好的,用教科书的术语来说,是的,VuePress 可以部署到共享服务器上。

不幸的是,实际上不可能进行这种部署。因为它自己的托管语言是预配置的,所以它自己的托管语言倾向于预配置。您不能在服务器上安装新的依赖项和其他语言或框架,因为您没有对服务器的 root 访问权限。

大多数共享主机提供商默认提供 PHP 和 MySQL,以及 Python 和其他脚本语言。WordPress、Drupal 和各种其他 CMS 需要 PHP 才能工作。但是,在共享托管环境中很少发现 Vue.js 和 Node.js 等 JavaScript 框架。

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

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

有许多令人惊叹的免费和优质服务可以帮助我们部署 VuePress 站点。

VuePress 部署入门

在开始传输过程之前,请确保项目的目录结构有序

如果将 VuePress 用作现有项目中的本地依赖项(请参阅本书第一章以了解本地依赖项和全局安装之间的区别),则应在开始部署之前运行以下 npm 命令:

{
  "scripts": {
    "docs:build": "vuepress build docs"
  }
 }

默认情况下,VuePress 使用的生成输出位置是[T0]目录中的 dist 目录。如果您愿意,您可以选择更改它,但是对于本章,我们将只使用默认位置。如果更改了默认生成输出位置,请确保相应地编辑部署命令。否则,部署可能会失败。

将 VuePress 部署到 GitHub 页面

现在,我们将学习如何将现有的 VuePress 站点部署到 GitHub 页面,这是开发社区中非常流行的托管静态站点的服务

什么是 GitHub 页面?

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

GitHub Pages 在托管静态站点时是一个相当有名的名称。在第 1 章介绍静态站点生成器和 VuePress中,您简要介绍了博客工具 Jekyll,它与 VuePress 一样也是一个静态站点生成器。GitHub Pages 在 Jekyll 中运行良好,事实上,它是当今最流行的托管 Jekyll 博客的平台。

GitHub 页面没有单独的定价结构,尽管您确实需要注册 GitHub 提供的一个计划。提供免费计划,对于高端用户,提供带有附加功能的付费计划。

在大多数情况下,许多新开发人员倾向于完全依赖 GitHub 的免费计划。

用法

在 VuePress 站点的部署中使用 GitHub 页面相当简单。

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

Here, by root domain, we mean something like yourusername.github.io.

但是,如果要部署到子目录,则需要指定基目录。例如,如果您部署到yourusername.github.io/vuep,则基地将为/vuep/

When working with GitHub Pages, your repository name is also the deployment address in general.

下一步是创建部署脚本。在 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 用户名(或组织名称)创建一个新的存储库,如图所示:

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

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

使用前面的命令,确保将用户名字段更改为您自己的用户名字段。

然后,剩下要做的就是添加、提交和实时推送更改,如下所示:

git add --all
git commit -m "initial commit"
git push -u origin master

使用自定义域

GitHub Pages 允许其用户将自定义域名添加到其项目站点,而不考虑他们所在的计划。

为了将域名映射到您的站点,第一步显然是注册所述域名。

There are various domain name registrars out there, such as GoDaddy, Register.com, Gandi.net, and more. I personally use Namecheap and Name.com for all of my domains, but this is more a matter of preference and less of a recommendation.

一旦您注册了域名,您将需要修改其 DNS 记录以指向有问题的托管平台,例如 GitHub 页面。通常,这是通过 CNAME 记录实现的,尽管有些平台也倾向于使用 CNAME 记录。

Depending on the interface and settings provided by your domain name registrar, the procedure for adding or modifying DNS records may vary. Be sure to contact your registrar's support team in case of doubts! Incorrect configurations can result in domain name non-resolution.

对于 GitHub 页面,只需将域名添加到存储库设置(而不是页面设置)。此后,您只需输入 CNAME 记录并等待 DNS 传播。

You can find the detailed custom domain name mapping guide at https://help.github.com/articles/using-a-custom-domain-with-github-pages/.

将 VuePress 部署到 Google Firebase

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

什么是谷歌 Firebase?

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

Firebase 允许您使用 Google 基础设施在云中托管应用程序和项目。但这不仅仅是因为每个 Firebase 计划(包括免费计划)都附带了各种令人惊叹的功能:

  • A/B 测试
  • 谷歌分析
  • 粗制滥造
  • 云消息传递(FCM)
  • 远程配置
  • 性能监测
  • 云测试
  • 自定义域
  • 自定义 SSL 证书
  • 还有更多!

事实上,一个简单的 VuePress 站点甚至不需要这些大部分功能。话虽如此,谷歌 Firebase 免费提供如此惊人的一系列功能,这真是一笔惊人的交易!

Firebase 的免费计划为您提供 1 GB 存储空间,无需访问数据库。这对于大多数 VuePress 网站来说已经足够了。然而,可悲的是,免费计划中每月只有 10GB 的带宽。对于繁忙的网站,10GB 的带宽可能比所需的带宽小。

你也可以选择以每月 25 美元起价的付费计划,或者选择以现收现付的方式支付额外的带宽费用。这意味着,如果你超出了免费计划,你只需支付额外的使用费。

If you are worried about the pricing structure of Google Firebase, you can make use of their fee calculator to assess how much you are likely to pay per month. Find the calculator at https://firebase.google.com/pricing/.

用法

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

注册 Firebase 后,我们将获得一个 Firebase ID。请确保它的安全(您可以在 Firebase 控制台中找到密钥)。

将项目添加到 Firebase 控制台很简单,我们只需指定项目名称,如下所示(默认情况下,项目添加到自由计划中):

一旦我们创建了一个项目,Firebase 将自动将我们带到该项目的控制台页面。可以自由地尝试一下;由于 FirePress 控制台上的任何内容都与 FirePress 无关,因此 FirePress 控制台上的任何内容都与 FirePress 无关:

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

Firebase Tools is a set of command line tools and commands that can be used to deploy code to Firebase projects, add and delete users and other data from Firebase, and read and write data to and from our Firebase database, if needed. More details can be found at https://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 记录,如下所示:

Keep in mind that domain name propagation can take a few hours, even in case of CNAME records.

根据我们注册域名的域名注册商,添加 CNAME 记录的过程可能会有所不同。因此,建议向书记官长的支助小组查询更多建议。

Learn more about connecting custom domains to Firebase at https://firebase.google.com/docs/hosting/custom-domain.

部署 VuePress 以激增

VuePress 可以部署到 Surge.sh 静态站点托管服务。这项特殊的服务并不像谷歌 Firebase 那样功能丰富,但它已经被证明是高度可靠的,而且在性能方面非常快。

什么是激增?

Surge 是一项服务,它允许您从命令行将站点发布到 web 上。它更倾向于前端开发人员,但对谁可以使用它没有严格的限制

Firebase 通常根据 Android 或其他移动应用程序开发人员的需要进行定制,与 Firebase 不同,Surge 旨在满足 HTML 和 JavaScript 编码人员的需求,尤其是 web 开发人员

Surge 为 Gulp 和 Grunt 提供了现成的插件。它还与 GitHub 集成,支持多种静态站点生成器,包括 Jekyll 和 VuePress!

在定价方面,Surge 也有免费和付费的计划。付费计划每月费用为 30 美元,除自定义 SSL、自定义重定向规则和密码保护外,还提供无限制的一切服务。

另一方面,免费计划允许我们添加具有基本 SSL 的自定义域,但不会对发布施加任何限制。这意味着我们可以对我们的站点进行任意数量的更改,而不必担心带宽限制或其他此类问题。这就是为什么激增特别有助于前端开发人员!

用法

在继续之前,我们需要通过 npm 安装喘振。只需运行以下命令:

npm install -g surge

这将在我们的系统上安装喘振,我们现在可以使用喘振命令。有关该命令的更多详细信息,请参见https://www.npmjs.com/package/surge

此后,我们只需要构建我们的文档,如下所示:

npm run docs:build

最后,是进行部署的时候了(请注意,如果您碰巧更改了值或路径,则可能需要将正确的路径传递到 dist 目录):

surge .vuepress/dist

这就是全部!浪涌是其中一个最容易使用的静态网站托管服务!

If we add a file with the name 404.html to our root directory, Surge is smart enough to use that file as the custom 404 page to be displayed in case of page not found errors.

使用自定义域

如果你有一个你想要使用的自定义域名,最好的办法是遵循官方的激增文档,其中包含了十几个域名注册商的分步指南。

该文件可在中找到 https://surge.sh/help/adding-a-custom-domain

但是,值得注意的是,如果我们不使用默认的 surge.sh 子域,则需要在传递部署命令的同时传递自定义域名。因此,先前的命令将更改为以下命令:

surge .vuepress/dist mycustomdomain.com

将 VuePress 部署到 Heroku

在 VuePress 网站上使用 Heroku 通常看起来有些矫枉过正。这是因为 Heroku 提供了一系列简单的 VuePress 站点通常不需要的功能。

但是,如果您已经拥有 Heroku 帐户(例如,您的另一个开发项目),那么在其中添加 VuePress 站点可能是有意义的,而不是浪费时间、精力和金钱来注册其他服务。

什么是希罗库?

Heroku 是一个健壮而强大的云托管平台,它提供对各种语言、脚本、技术等的支持。您可以轻松地在 Heroku 上运行 PHP、JavaScript、Ruby、UNIX、Python、Perl 和许多其他应用程序

Heroku 还能够支持多种数据库管理系统,例如 MySQL 甚至 PostgreSQL。这意味着 Heroku 拥有广泛的用户基础,跨越多种方法和编码范式。

当然,在这一切的中间,使用 Helku 进行静态站点似乎是不必要的。尽管如此,如果您的目标是在更大的工作流框架内使用 VuePress,比如现有的 React 或 Vue.js 应用程序,那么 Heroku 可以为整个项目提供无缝平台,还可以与各种管理工具集成。

在定价方面,Heroku 提供了一种非常多样化的定价模式,从 7 美元开始,一直到企业定价,每月达到 500 美元。对定价表本身进行鸟瞰可能更符合逻辑:

可以看出,免费计划让我们拥有一个工作连接,还允许我们映射自定义域。

You can calculate the projected cost of running a Heroku instance for your project at https://www.heroku.com/pricing.

用法

为了将我们的 VuePress 站点部署到 Heroku,我们首先需要注册一个 Heroku 帐户。我们可以在注册一个免费帐户 https://signup.heroku.com/ 。注册屏幕将如下所示:

注意,在注册过程中需要选择一种主要的开发语言。如果没有其他主要使用的语言,那么 VuePress 部署需要选择 Node.js。这本身并不重要;您可以选择任何语言,但仍然可以轻松地以其他语言部署应用程序。

一旦我们成功创建了一个帐户,我们将被带到 Heroku 仪表板。我们现在可以在此处注册新应用程序:

将 VuePress 项目部署到 Heroku 有两种主要方法:

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

连接到 GitHub 意味着我们正在将存储库的一个分支部署到 Heroku,以便将更改自动推送到实时站点,如下所示:

但是,让我们讨论一下使用 CLI 的主流路线,因为它有时会更具挑战性

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

npm install -g heroku

然而,这里的情况略有不同。Heroku CLI 依赖于 Node 的尖端版本,如果我们的系统不能跟上它的步伐,事情可能会崩溃。为了避免这种情况,如果 Heroku CLI 是通过 npm 安装的,则不会提供自动更新。我们需要在可能或需要时手动更新 CLI。

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

sudo snap install --classic heroku

More details about the Heroku CLI installation process, as well as links to download the installers for Windows and macOS, can be found at https://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"
 }

The static.json file is very important and remote deployment will not work in its absence!

完成后,我们需要使用 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

The Heroku buildpack is a custom set of tools and commands meant mainly for static sites. Learn more about its usage over at its GitHub page at https://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 项目。简单地说,它允许您在具有自动 SSL、自定义域、多个内容交付网络CDN等功能的全球基础设施上部署 web 项目。

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

Netlify 的保费计划从每月 45 美元起上调。然而,免费计划让我们可以轻松部署个人项目,还允许我们使用自定义域。缺点是免费计划只有一个用户,这排除了任何团队协作。定价选项如下所示:

此外,免费计划中也没有企业级 CDN。但无论如何,免费计划应该足以支持 VuePress 部署。

用法

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

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

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

Netlify 界面令人惊讶,因为它非常空,所以新手用户不可能感到困惑:

所有我们需要做的就是点击新网站从 Git 按钮!

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

此后,我们只需要选择项目所在的存储库,然后指定如下选项:

  • 对于 build 命令,我们将输入npm run docs:build
  • 对于Publish目录,我们必须指定我们的dist目录的完整路径,例如.vuepress/dist

这就是全部!

使用自定义域

Netlify 允许我们添加一个自定义域名到我们的网站,甚至在免费计划。默认情况下,该站点首先位于sitename.netlify.com子域。

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

It is worth noting that Netlify also offers DNS management services for domains, albeit on the paid plans.

可以看出,将站点部署到 Netlify 相当容易。唯一的问题是,从 localhost 进行部署可能相当棘手。但如果您是 GitHub、GitLab 或 BitBucket 用户,Netlify 是一个非常简单可靠的部署解决方案。

将 VuePress 部署到 GitLab 页面

与 GitHub 页面非常相似,GitLab 页面也是一种类似的产品,提供了或多或少相同级别的功能。

此外,与 GitHub 页面非常相似,GitLab 页面也非常关注静态站点及其部署。它与 Jekyll、Hugo、Harp、Hexo、Pelican 和 VuePress 等服务和软件一起开箱即用。我们在本书的第一章介绍了静态站点生成器和 VuePress中了解了此类静态站点生成器。

什么是 GitLab 页面?

GitLab Pages 为基于 GitLab 的项目和存储库提供了可靠且高度通用的托管解决方案。虽然 GitLab 与 GitHub 在这两种服务都基于 Git 的意义上非常相似,但前者也有一个自托管的产品,最近这种产品越来越受欢迎。正是因为这个原因,很多开发人员更喜欢 GitLab

GitLab 页面允许我们连接自定义域以及 SSL 证书。我们可以选择在自己的服务器上运行 GitLab,也可以在GitLab.com上运行 GitLab——无论我们如何选择,GitLab 页面仍然可以用于将站点部署到云端。

在定价方面,GitLab 的自管理和托管变体都有免费计划。好的是,与 GitHub 不同,我们甚至可以在免费计划中拥有私人项目!付费计划是针对高端用途的;如果您的最终目标只是建立一个 VuePress 站点,那么免费计划就足够了

值得注意的是,GitLab 页面没有单独的定价结构。无论是免费的还是付费的,定价都是针对 GitLab 本身的。GitLab Pages 是一个包含所有计划的免费插件。

用法

为了将 VuePress 站点部署到 GitLab 页面,我们首先需要确保在[T0]文件中指定了正确的基。否则,部署将无法工作。

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

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

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

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 页面上的每个站点都位于一个项目页面地址上,例如myusername.gitlab.io/myproject

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

如果,碰巧,我们需要添加一个自定义域名到我们的网站,这也是可行的。为此,我们需要在站点设置中指定域名,然后将相关的 CNAME 记录添加到我们的域中。

GitLab Pages offers a detailed guide to custom domain mapping at https://docs.gitlab.com//ce/user/project/pages/introduction.html#add-a-custom-domain-to-your-pages-website.

总结

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

指向远程或云平台的链接

为了便于参考,以下是我们在本章中提到的云和远程托管提供商的链接:

结束语

在本书的学习过程中,我们了解并获得了大量与 VuePress 相关的知识,包括以下内容:

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

随着 VuePress 开发和部署的进展,您会注意到它非常易于使用,而且是一款相当健壮的软件。此外,VuePress 仍在积极开发中,是一种相对较新的工具。这意味着,随着时间的推移,VuePress 的功能和受欢迎程度都将不断提高。

事实上,在我写这本书的期间,VuePress 推出了九个新版本(主要版本和次要版本的组合)!

在这一点上,我们强烈建议您也学习 Vue.js,特别是如果您希望在 VuePress 中构建项目并对其进行更多操作的话。在当今时代,掌握 JavaScript 框架始终是一个好主意,记住 JavaScript 的日益流行。

读者可以在 GitHub 上浏览本书的存储库以获取代码示例。这可以在找到 https://github.com/packtpublishing/vuepress-quick-start-guide

另外,最新的 VuePress 代码可以在其自己的 GitHub 存储库中找到,位于https://github.com/vuejs/vuepress

也就是说,我希望您在阅读这本书,特别是学习 VuePress 方面过得很愉快。

快乐编码!