部署
若要为你的网站构建用于生产环境的静态文件,请运行:
- npm
- Yarn
- pnpm
- Bun
npm run build
yarn build
pnpm run build
bun run build
该命令执行完毕后,静态文件将被生成到 build
目录中。
道格龙(Docusaurus)的唯一职责是构建你的网站并将静态文件输出到 build
目录。
接下来,你需要自行选择如何托管这些静态文件。
你可以将你的网站部署到各种静态网站托管服务,例如 Vercel、GitHub Pages、Netlify、Render 以及 Surge。
道格龙(Docusaurus)网站是静态渲染的,通常在没有 JavaScript 的情况下也能正常工作!
配置
为了优化路由并从正确的位置提供文件,你需要在 docusaurus.config.js
文件中配置以下参数:
名称 | 描述 |
---|---|
url | 你网站的 URL。对于部署在 https://my-org.com/my-project/ 的网站,url 就是 https://my-org.com/ 。 |
baseUrl | 你项目的基准 URL,需要以斜杠结尾。对于部署在 https://my-org.com/my-project/ 的网站,baseUrl 就是 /my-project/ 。 |
在本地测试构建产物
在将网站部署到生产环境之前,于本地进行测试是至关重要的一步。道格龙(Docusaurus)为此提供了一个 docusaurus serve
命令:
- npm
- Yarn
- pnpm
- Bun
npm run serve
yarn serve
pnpm run serve
bun run serve
默认情况下,这将在 http://localhost:3000/
加载你的网站。
URL 结尾斜杠配置
道格龙(Docusaurus)提供了一个 trailingSlash
配置,允许你自定义 URL/链接格式和最终生成的文件名模式。
通常情况下,默认值就能很好地工作。但遗憾的是,每个静态托管服务提供商都有不同的行为模式,将完全相同的站点部署到不同的托管服务上可能会产生迥异的结果。因此,根据你所选的托管服务,调整此配置可能会非常有用。
可以参考 slorber/trailing-slash-guide 这个指南来更好地理解你所用托管服务的行为,并据此正确配置 trailingSlash
。
使用环境变量
将潜在的敏感信息放入环境变量中是一种常见的实践。然而,在一个典型的 道格龙(Docusaurus)网站中,docusaurus.config.js
文件是与 Node.js 环境交互的唯一接口(请参阅我们的架构概览),而其他所有内容(如 MDX 页面、React 组件等)都属于客户端,无法直接访问 process
全局变量。在这种情况下,你可以考虑使用 customFields
将环境变量传递给客户端。
// 如果你正在使用 dotenv (https://www.npmjs.com/package/dotenv)
import 'dotenv/config';
export default {
title: '...',
url: process.env.URL, // 你也可以使用环境变量来控制站点的特定信息
customFields: {
// 在这里放置你的自定义环境信息
teamEmail: process.env.EMAIL,
},
};
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
export default function Home() {
const {
siteConfig: {customFields},
} = useDocusaurusContext();
return <div>通过 {customFields.teamEmail} 联系我们!</div>;
}
选择托管服务提供商
常见的托管方案有以下几种:
- 使用像 Apache2 或 Nginx 这样的 HTTP 服务器进行自主托管。
- 使用 Jamstack 供应商(例如 Netlify 和 Vercel)。我们会以它们作为参考,但同样的逻辑也适用于其他供应商。
- 使用 GitHub Pages(从定义上讲,它也属于 Jamstack,但我们将其分开比较)。
如果你不确定该如何选择,可以问自己以下几个问题:
我愿意为此投入多少资源(金钱、人力、时间 等)?
- 🔴 自主托管:需要网络、Linux 及 Web 服务器管理方面的经验。这是最困难的选项,需要最多的时间来成功管理。在费用方面,云服务几乎从不免费,而购买和部署本地服务器的成本可能更高。
- 🟢 Jamstack 供应商:它们可以帮助你在极短的时间内建立一个可用的网站,并提供易于配置的服务端重定向等功能。许多供应商即使是免费计划也提供非常慷慨的构建时长额度,你几乎永远不会超出。然而,免费计划总有其限制,一旦达到这些限制就需要付费。详情请查看你所选供应商的定价页面。
- 🟡 GitHub Pages:其部署流程设置起来可能比较繁琐(证据:请看部署到 GitHub Pages 章节的篇幅!)。然而,这项服务(包括构建和部署)对于公共仓库始终是免费的,并且我们有详细的说明来帮助你完成设置。
我需要多大程度的服务端定制化?
- 🟢 自主托管:你可以完全控制服务器的配置。你可以配置虚拟主机以根据请求 URL 提供不同的内容,可以实现复杂的服务端重定向,可以实施身份验证等等。如果你需要大量服务端功能,自主托管是最佳选择。
- 🟡 Jamstack:通常提供一些服务端配置选项(例如 URL 格式化(结尾斜杠)、服务端重定向等)。
- 🔴 GitHub Pages:除了强制执行 HTTPS 和设置 CNAME 记录外,不提供任何服务端配置。