部署
要在生产环境中构建网站的静态文件,请运行:
- npm
- Yarn
- pnpm
npm run build
yarn build
pnpm run build
Once it finishes, the static files will be generated within the build
directory.
The only responsibility of Docusaurus is to build your site and emit static files in build
.
现在,该由你来决定怎么托管这些静态文件了。
You can deploy your site to static site hosting services such as Vercel, GitHub Pages, Netlify, Render, Surge...
Docusaurus 网站是静态渲染的,而且一般不需要 JavaScript 也能运行!
Configuration
The following parameters are required in docusaurus.config.js
to optimize routing and serve files from the correct location:
参数 | 描述 |
---|---|
url | 站点 URL。 For a site deployed at https://my-org.com/my-project/ , url is https://my-org.com/ . |
baseUrl | 站点的 base URL,带有末尾斜杠。 For a site deployed at https://my-org.com/my-project/ , baseUrl is /my-project/ . |
Testing your Build Locally
在部署到生产环境前,事先进行本地测试尤为重要。 Docusaurus provides a docusaurus serve
command for that:
- npm
- Yarn
- pnpm
npm run serve
yarn serve
pnpm run serve
By default, this will load your site at http://localhost:3000/
.
Trailing slash configuration
Docusaurus has a trailingSlash
config, to allow customizing URLs/links and emitted filename patterns.
你一般不需要修改默认值。 Unfortunately, each static hosting provider has a different behavior, and deploying the exact same site to various hosts can lead to distinct results. 根据你的托管商的不同,你可能需要修改此配置。
Use slorber/trailing-slash-guide to understand better the behavior of your host and configure trailingSlash
appropriately.
Using environment variables
把可能敏感的信息放在环境变量中的做法很常见。 However, in a typical Docusaurus website, the docusaurus.config.js
file is the only interface to the Node.js environment (see our architecture overview), while everything else—MDX pages, React components... are client side and do not have direct access to the process
global. In this case, you can consider using customFields
to pass environment variables to the client side.
// 如果你用 dotenv (https://www.npmjs.com/package/dotenv)
require('dotenv').config();
module.exports = {
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>Contact us through {customFields.teamEmail}!</div>;
}