预览你的站点

在本页中，您将学习:

  • 如何在本地预览站点。

  • 如何运行可选的本地服务器以在本地预览站点。

本地站点预览

由于 Antora 生成静态站点，您不必将站点发布到 web 服务器来查看它。使用浏览器的本地文件协议，由 Antora 生成的站点也可以正常工作。 Antora 站点的这一特性是预览您的工作的重要工具。

要在本地查看站点，请在浏览器中导航到目标文件夹内的任何 HTML 页面。如果你正在按照演示材料操作，请在项目中查找 build/site/index.html 文件。你将通过浏览器的 file 协议查看 HTML 页面，可以看到这一点在地址栏中。

运行本地服务器(可选)

虽然该站点可以在没有 web 服务器的情况下查看，但你可能仍然需要通过 web 服务器查看站点，以测试某些功能，例如索引化 URL、缓存或无法通过 file 协议工作的脚本。你可以使用 http-server 包来实现这一目的。http-server 是一个适用于 Node.js 的简单静态 Web 服务器。

使用 npm 全局安装 http-server 包：

demo-site $ npm i -g http-server
shell

或者 Yarn：

demo-site $ yarn global add http-server
shell

这将在 PATH 上放置一个同名的命令。

现在通过将 web 服务器指向生成的站点的位置来启动 web 服务器。在终端中，键入命令名 http-server ，后面跟着生成站点的位置(即输出目录)。我们还建议添加 -c-1 标志来禁用缓存。

demo-site $ http-server build/site -c-1
shell

执行该命令后，终端上会显示 web 服务器的本地地址。您应该在终端中看到以下输出：

Starting up http-server, serving build/site
Available on:
  http://127.0.0.1:8080
  http://192.168.1.8:8080
Hit CTRL-C to stop the server
shell

将第一个提供的 URL 粘贴到浏览器的位置栏中，通过本地 web 服务器查看您的站点。

按 kbd:[Ctrl+c] 来停止服务器。

TIP

如果启动服务器时遇到端口冲突（即，listen EADDRINUSE: address already in use ），则可以使用 -p <port> 选项切换到另一个端口。例如，将 -p 5000 追加到命令中以切换到 5000 端口。

demo-site $ http-server build/site -c-1 -p 5000
shell