跳到主要内容
版本：Canary 🚧

部署

要构建用于生产的网站的静态文件，请运行:

npm run build

一旦完成，静态文件将在build目录中生成。

备注

Docusaurus 的唯一职责是构建您的站点并在构建中生成静态文件。

现在由您来选择如何托管这些静态文件。

你可以将你的站点部署到静态站点托管服务，如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 run serve

默认情况下，这将加载您的网站http://localhost:3000/.

尾斜线结构​

Docusaurus 有一个trailingSlash 配置来允许自定义 URLs/links 和发出的文件名模式。

默认值通常可以正常使用。不幸的是，每个静态托管提供商都有不同的行为，将完全相同的站点部署到不同的主机上可能会导致不同的结果。根据您的主机，更改此配置可能很有用。

提示

使用slorber/trailing-slash-guide来更好地理解你的主机的行为，并适当地配置trailingSlash。

使用环境变量​

将潜在的敏感信息放在环境中是常见的做法。然而，在典型的 Docusaurus 网站中，docusaurus.config.js文件是与 Node.js 环境的唯一接口(参见我们的架构概述)，而其他所有内容(MDX 页面，React 组件等)都是客户端，不能直接访问process全局变量。在这种情况下，您可以考虑使用customFields将环境变量传递到客户端。

docusaurus.config.js
// If you are using dotenv (https://www.npmjs.com/package/dotenv)
require("dotenv").config();

module.exports = {
  title: "...",
  url: process.env.URL, // You can use environment variables to control site specifics as well
  customFields: {
    // Put your custom environment here
    teamEmail: process.env.EMAIL,
  },
};
home.jsx
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";

export default function Home() {
  const {
    siteConfig: { customFields },
  } = useDocusaurusContext();
  return <div>Contact us through {customFields.teamEmail}!</div>;
}

选择托管提供商​

有几个常见的托管选项:

  • 自我托管 使用 Apache2 或 Nginx 等 HTTP 服务器。
  • Jamstack 提供者 (e.g. Netlify 和 Vercel). 我们将使用它们作为引用，但同样的推理也适用于其他提供者。
  • GitHub Pages (根据定义，它也是 Jamstack，但我们分别对其进行比较).

如果你不确定选择哪一个，问以下问题:

我愿意为此投入多少资源(金钱、人力、时间等)?
  • 🔴 自托管需要网络以及 Linux 和 web 服务器管理方面的经验。这是最困难的选择，需要花费最多的时间来成功管理。在费用方面，云服务几乎从来不是免费的，购买/部署本地服务器可能会更加昂贵。
  • 🟢 Jamstack 提供商可以帮助你在几乎没有时间的情况下建立一个工作的网站，并提供像服务器端重定向这样的功能，这些功能很容易配置。许多提供商提供慷慨的构建时间配额，即使是免费计划，您也几乎永远不会超过。然而，免费计划是有限制的，一旦达到这些限制，你就需要付费。请查看供应商的定价页面以了解详细信息。
  • 🟡 GitHub Pages 部署工作流程的设置可能很繁琐。 (证据: 看部署到 GitHub Pages的长度!) 但是，此服务(包括构建和部署)对于公共存储库始终是免费的，并且我们有详细的说明来帮助您使用它。
我需要多少服务器端定制?
  • 🟢 使用自托管，您可以访问整个服务器的配置。您可以将虚拟主机配置为根据请求 URL 提供不同的内容，您可以进行复杂的服务器端重定向，您可以实现身份验证，等等。如果你需要很多服务器端功能，自己托管你的网站。
  • 🟡 Jamstack 通常提供一些服务器端配置(例如 URL 格式化(尾斜杠)，服务器端重定向等)。
  • 🔴 GitHub 页面不暴露服务器端配置除了强制 HTTPS 和设置 CNAME 记录。
我需要协作友好型部署工作流吗?
  • 🟡 自托管服务可以利用像 Netlify 这样的持续部署功能，但涉及到更多的繁重工作。通常，您会指定一个特定的人来管理部署，并且与其他两个选项相反，工作流不会非常基于礼品。
  • 🟢 Netlify 和 Vercel 对每个 pull 请求都有部署预览，这对于团队在合并到生产环境之前检查工作很有用。您还可以管理对部署具有不同成员访问权限的团队。
  • 🟡 GitHub Pages 无法以非复杂的方式进行部署预览。一个 repo 只能与一个站点部署相关联。另一方面，您可以控制谁拥有对站点部署的写访问权。

没有什么灵丹妙药。在做出选择之前，你需要权衡你的需求和资源。

自托管​

Docusaurus 可以使用Docusaurus server自托管。使用--port 和 --host更改端口。

npm run serve -- --build --port 80 --host 0.0.0.0
warning

与静态托管提供商/ CDN 相比，它不是最好的选择。

warning

在下面的部分中，我们将介绍一些常见的托管提供商，以及如何配置它们以最有效地部署 Docusaurus 站点。Docusaurus 不隶属于任何这些服务，提供这些信息只是为了方便。一些文章是由第三方提供的，最近的 API 变化可能不会反映在我们这边。如果你看到过时的内容，pr 是受欢迎的。

因为我们只能在尽力而为的基础上提供这些内容，我们已经停止接受 pr 添加新的托管选项。但是，您可以在单独的网站(例如您的博客或提供商的官方网站)上发布您的书面陈述，并要求我们提供指向您的书面陈述的链接。

部署到 Netlify​

要将 Docusaurus 2 站点部署到Netlify，首先确保正确配置以下选项:

docusaurus.config.js
module.exports = {
  url: "https://docusaurus-2.netlify.app", // Url to your site with no trailing slash
  baseUrl: "/", // Base directory of your site relative to your repo
  // ...
};

然后，用 Netlify 创建你的网站。

在设置站点时，按照如下方式指定构建命令和目录:

  • 建造的命令: npm run build
  • 发布目录: build

如果您没有配置这些构建选项，您仍然可以在创建站点后转到站点设置->构建和部署。

一旦正确配置了上述选项，您的站点应该部署并自动重新部署合并到您的部署分支，默认为main。

警告

一些 Docusaurus 网站将docs文件夹放在website之外(很可能是以前的 Docusaurus v1 网站):

repo           # git root
├── docs       # MD files
└── website    # Docusaurus root

如果你决定使用website文件夹作为 Netlify 的基本目录，当你更新docs文件夹时，Netlify 将不会触发构建，你需要配置一个自定义ignore命令:)

website/netlify.toml
[build]
  ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../docs/"
warning

默认情况下，Netlify 会在 Docusaurus url 后面添加斜杠。

建议禁用 Netlify 设置Post Processing > Asset Optimization > Pretty Urls，以防止小写 url，不必要的重定向和 404 错误。

要非常小心:Disable asset optimization全局复选框是坏的，并没有真正禁用Pretty URLs设置在实践中。请确保独立取消勾选。

如果你想保持Pretty URLsNetlify 设置，调整trailingSlashDocusaurus 配置适当。

请参阅slorber/trailing-slash-guide了解更多信息。

部署到 Vercel​

将 Docusaurus 项目部署到Vercel将在性能和易用性方面为您提供各种好处。

要使用Vercel for Git Integration部署 Docusaurus 项目，请确保它已被推送到 Git 存储库。

使用Import Flow将项目导入 Vercel。在导入过程中，您将发现为您预先配置的所有相关选项;但是，您可以选择更改这些选项中的任何一个。

在您的项目被导入之后，所有后续的分支推送将生成预览部署，所有对生产分支所做的更改(通常是"main" 或 "master")将导致生产部署。

部署到 GitHub 页面​

Docusaurus 提供了一种简单的方法来发布到GitHub Pages，每个 GitHub 存储库都免费提供。

概述​

通常，在发布过程中涉及两个存储库(至少两个分支):包含源文件的分支，以及包含与 GitHub Pages 一起提供的构建输出的分支。在下面的教程中，它们将分别被称为**"source"** and "deployment"。

每个 GitHub 存储库都与一个 GitHub Pages 服务相关联。如果部署存储库名为my-org/my-project(其中my-org是组织名称或用户名)，则部署的站点将显示为https://my-org.github.io/my-project/。如果部署存储库名为my-org/my-org.github.io(organization GitHub Pages repo)，该站点将出现在https://my-org.github.io/。

信息

如果你想使用 GitHub 页面的自定义域名，在static目录下创建一个CNAME文件。static目录中的任何内容都将被复制到build目录的根目录中进行部署。 当使用自定义域时，您应该能够从baseUrl: '/projectName/'移回baseUrl: '/'，并将您的url设置为自定义域。

您可以参考 GitHub Pages 的文档用户、组织和项目页面了解更多细节。

GitHub Pages 从默认分支(master / main，通常)或gh-pages分支，以及从根或/docs文件夹中获取部署准备文件(docusaurus build的输出)。您可以通过存储库中的Settings > Pages进行配置。这个分支将被称为"deployment branch"。

我们提供了一个docusaurus deploy命令，它可以帮助您通过一个命令将站点从源分支部署到部署分支:克隆、构建和提交。

docusaurus.config.js 设置​

首先，修改你的docusaurus.config.js，并添加以下参数:

名字描述
organizationName拥有部署存储库的 GitHub 用户或组织。
projectName部署存储库的名称。
deploymentBranch部署分支的名称。对于非组织 GitHub Pages repos (projectName不以.github.io结尾)，默认为'gh-pages'。否则，它需要显式地作为配置字段或环境变量。

这些字段也有它们的环境变量对应，它们具有更高的优先级:ORGANIZATION_NAME， PROJECT_NAME和DEPLOYMENT_BRANCH。

警告

GitHub Pages 默认为 Docusaurus url 添加尾斜杠。建议设置一个trailingSlash配置(true或false，而不是undefined)。

例子:

docusaurus.config.js
module.exports = {
  // ...
  url: "https://endiliey.github.io", // Your website URL
  baseUrl: "/",
  projectName: "endiliey.github.io",
  organizationName: "endiliey",
  trailingSlash: false,
  // ...
};
warning

默认情况下，GitHub Pages 通过Jekyll运行发布的文件。由于 Jekyll 将丢弃任何以_开头的文件，建议您通过在您的static目录中添加一个名为.nojekyll的空文件来禁用 Jekyll。

环境设置​

名字描述
USE_SSHSet to true to use SSH instead of the default HTTPS for the connection to the GitHub repo. If the source repo URL is an SSH URL (e.g. git@github.com:facebook/docusaurus.git), USE_SSH is inferred to be true.
GIT_USERThe username for a GitHub account that has push access to the deployment repo. For your own repositories, this will usually be your GitHub username. Required if not using SSH, and ignored otherwise.
GIT_PASSPersonal access token of the git user (specified by GIT_USER), to facilitate non-interactive deployment (e.g. continuous deployment)
CURRENT_BRANCHThe source branch. Usually, the branch will be main or master, but it could be any branch except for gh-pages. If nothing is set for this variable, then the current branch from which docusaurus deploy is invoked will be used.
GIT_USER_NAMEThe git config user.name value to use when pushing to the deployment repo
GIT_USER_EMAILThe git config user.email value to use when pushing to the deployment repo

GitHub 企业安装应该以与 github.com 相同的方式工作;你只需要将组织的 GitHub 企业主机设置为环境变量:

名字描述
GITHUB_HOST您的 GitHub 企业网站的域名。
GITHUB_PORTGitHub 企业站点的端口。

部署​

最后，要将您的站点部署到 GitHub Pages，请运行:

GIT_USER=<GITHUB_USERNAME> yarn deploy
警告

从 2021 年 8 月开始，GitHub 要求每次命令行登录都使用个人访问令牌而不是密码。 当 GitHub 提示输入密码时，请输入 PAT。 请参阅GitHub 文档了解更多信息。

或者，您可以使用 SSH (USE_SSH=true)登录。

使用 GitHub Actions 触发部署​

GitHub Actions允许您在存储库中自动，自定义和执行软件开发工作流。

下面的工作流示例假设您的网站源代码位于存储库的主分支中(源分支为main)，并且您的发布源配置为gh-pages分支(部署分支为gh-pages)。

我们的目标是:

  1. 当向main发出新的 pull 请求时，有一个动作可以确保站点构建成功，而无需实际部署。这个作业将被称为测试-部署。
  2. 当一个 pull 请求被合并到main分支或者有人直接推送到main分支时，它将被构建并部署到gh-pages分支。 之后，新的构建输出将在 GitHub Pages 站点上提供。这个作业将被称为部署。

这里有两种使用 GitHub Actions 部署文档的方法。根据部署分支的位置(gh-pages)，选择下面的相关选项卡:

  • 源代码库和部署库是同一个存储库。
  • 部署 repo 是一个与源代码不同的远程存储库。

虽然您可以在相同的工作流文件中定义两个作业，但原始的deploy工作流将始终在 PR 检查套件状态中被列为跳过，这并不能指示实际状态，也没有为审查过程提供任何价值。因此，我们建议将它们作为单独的工作流来管理。 我们将使用一个流行的第三方部署操作:peaceiris/actions-gh-pages。

GitHub 操作文件

添加这两个工作流文件:

为您的设置调整参数

这些文件假定您正在使用 Yarn。如果你使用 npm，把cache: yarn， yarn install——frozen-lockfile， yarn build改成cache: npm， npm ci， npm run build。

如果你的 Docusaurus 项目不在你的 repo 的根目录下，你可能需要配置一个默认工作目录，并相应地调整路径。

.github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main
    # Review gh actions docs if you want to further define triggers, paths, etc
    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on

permissions:
  contents: write

jobs:
  deploy:
    name: Deploy to GitHub Pages
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: yarn

      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Build website
        run: yarn build

      # Popular action to deploy to GitHub Pages:
      # Docs: https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-docusaurus
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          # Build output to publish to the `gh-pages` branch:
          publish_dir: ./build
          # The following lines assign commit authorship to the official
          # GH-Actions bot for deploys to `gh-pages` branch:
          # https://github.com/actions/checkout/issues/13#issuecomment-724415212
          # The GH actions bot is used by default if you didn't specify the two fields.
          # You can swap them out with your own user credentials.
          user_name: github-actions[bot]
          user_email: 41898282+github-actions[bot]@users.noreply.github.com
.github/workflows/test-deploy.yml
name: Test deployment

on:
  pull_request:
    branches:
      - main
    # Review gh actions docs if you want to further define triggers, paths, etc
    # https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#on

jobs:
  test-deploy:
    name: Test deployment
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: yarn

      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Test build website
        run: yarn build
站点没有正确部署?

推到主后，如果你没有看到你的网站发布在所需的位置(例如，它说"There isn't a GitHub Pages site here"，或者它显示你的 repo 的 README。Md 文件)，尝试以下操作:

  • 等待大约三分钟，刷新。GitHub 页面接收新文件可能需要几分钟。
  • 检查你的 repo 登陆页面，在最后一次提交的标题旁边有一个绿色的小勾号，表示 CI 已经通过。如果看到叉号，则表示构建或部署失败，您应该检查日志以获取更多调试信息。
  • 点击勾号，确保你看到一个"Deploy to GitHub Pages"的工作流程。 像"pages build and deployment / deploy"这样的名称是 GitHub 的默认工作流，表明您的自定义部署工作流根本没有被触发。 确保 YAML 文件被放置在.github/workflows文件夹下，并且触发条件设置正确(例如，如果你的默认分支是master而不是main，你需要更改on.push属性)。
  • 在 repo 的Settings > Pages下，确保Source(这是deployment文件的源，而不是我们术语中的source)被设置为"gh-pages" + "/ (root)"，因为我们使用的是gh-pages作为部署分支。

如果您使用自定义域:

  • 如果您使用的是自定义域，请验证设置了正确的 DNS 记录。参见配置自定义域的 GitHub 页面文档。此外，请注意，DNS 更改可能需要长达 24 小时才能通过互联网传播。

使用 Travis CI 触发部署​

Continuous integration (CI) services are typically used to perform routine tasks whenever new commits are checked in to source control. These tasks can be any combination of running unit tests and integration tests, automating builds, publishing packages to npm, and deploying changes to your website. All you need to do to automate the deployment of your website is to invoke the yarn deploy script whenever your website is updated. The following section covers how to do just that using Travis CI, a popular continuous integration service provider.

  1. Go to https://github.com/settings/tokens and generate a new personal access token. When creating the token, grant it the repo scope so that it has the permissions it needs.
  2. Using your GitHub account, add the Travis CI app to the repository you want to activate.
  3. Open your Travis CI dashboard. The URL looks like https://travis-ci.com/USERNAME/REPO, and navigate to the More options > Setting > Environment Variables section of your repository.
  4. Create a new environment variable named GH_TOKEN with your newly generated token as its value, then GH_EMAIL (your email address) and GH_NAME (your GitHub username).
  5. Create a .travis.yml on the root of your repository with the following:
.travis.yml
language: node_js
node_js:
  - 18
branches:
  only:
    - main
cache:
  yarn: true
script:
  - git config --global user.name "${GH_NAME}"
  - git config --global user.email "${GH_EMAIL}"
  - echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc
  - yarn install
  - GIT_USER="${GH_NAME}" yarn deploy

Now, whenever a new commit lands in main, Travis CI will run your suite of tests and if everything passes, your website will be deployed via the yarn deploy script.

使用 Buddy 触发部署​

Buddy is an easy-to-use CI/CD tool that allows you to automate the deployment of your portal to different environments, including GitHub Pages.

Follow these steps to create a pipeline that automatically deploys a new version of your website whenever you push changes to the selected branch of your project:

  1. Go to https://github.com/settings/tokens and generate a new personal access token. When creating the token, grant it the repo scope so that it has the permissions it needs.
  2. Sign in to your Buddy account and create a new project.
  3. Choose GitHub as your git hosting provider and select the repository with the code of your website.
  4. Using the left navigation panel, switch to the Pipelines view.
  5. Create a new pipeline. Define its name, set the trigger mode to On push, and select the branch that triggers the pipeline execution.
  6. Add a Node.js action.
  7. Add these commands in the action's terminal:
GIT_USER=<GH_PERSONAL_ACCESS_TOKEN>
git config --global user.email "<YOUR_GH_EMAIL>"
git config --global user.name "<YOUR_GH_USERNAME>"
yarn deploy

After creating this simple pipeline, each new commit pushed to the branch you selected deploys your website to GitHub Pages using yarn deploy. Read this guide to learn more about setting up a CI/CD pipeline for Docusaurus.

使用 Azure 管道​

  1. Sign Up at Azure Pipelines if you haven't already.
  2. Create an organization. Within the organization, create a project and connect your repository from GitHub.
  3. Go to https://github.com/settings/tokens and generate a new personal access token with the repo scope.
  4. In the project page (which looks like https://dev.azure.com/ORG_NAME/REPO_NAME/_build), create a new pipeline with the following text. Also, click on edit and add a new environment variable named GH_TOKEN with your newly generated token as its value, then GH_EMAIL (your email address) and GH_NAME (your GitHub username). Make sure to mark them as secret. Alternatively, you can also add a file named azure-pipelines.yml at your repository root.
azure-pipelines.yml
trigger:
  - main

pool:
  vmImage: ubuntu-latest

steps:
  - checkout: self
    persistCredentials: true

  - task: NodeTool@0
    inputs:
      versionSpec: "18"
    displayName: Install Node.js

  - script: |
      git config --global user.name "${GH_NAME}"
      git config --global user.email "${GH_EMAIL}"
      git checkout -b main
      echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc
      yarn install
      GIT_USER="${GH_NAME}" yarn deploy
    env:
      GH_NAME: $(GH_NAME)
      GH_EMAIL: $(GH_EMAIL)
      GH_TOKEN: $(GH_TOKEN)
    displayName: Install and build

使用 Drone​

  1. Create a new SSH key that will be the deploy key for your project.
  2. Name your private and public keys to be specific and so that it does not overwrite your other SSH keys.
  3. Go to https://github.com/USERNAME/REPO/settings/keys and add a new deploy key by pasting in the public key you just generated.
  4. Open your Drone.io dashboard and log in. The URL looks like https://cloud.drone.io/USERNAME/REPO.
  5. Click on the repository, click on activate repository, and add a secret called git_deploy_private_key with your private key value that you just generated.
  6. Create a .drone.yml on the root of your repository with the below text.
.drone.yml
kind: pipeline
type: docker
trigger:
  event:
    - tag
- name: Website
  image: node
  commands:
    - mkdir -p $HOME/.ssh
    - ssh-keyscan -t rsa github.com >> $HOME/.ssh/known_hosts
    - echo "$GITHUB_PRIVATE_KEY" > "$HOME/.ssh/id_rsa"
    - chmod 0600 $HOME/.ssh/id_rsa
    - cd website
    - yarn install
    - yarn deploy
  environment:
    USE_SSH: true
    GITHUB_PRIVATE_KEY:
      from_secret: git_deploy_private_key

Now, whenever you push a new tag to GitHub, this trigger will start the drone CI job to publish your website.

部署到 Flightcontrol​

Flightcontrol is a service that automatically builds and deploys your web apps to AWS Fargate directly from your Git repository. It gives you full access to inspect and make infrastructure changes without the limitations of a traditional PaaS.

Get started by following Flightcontrol's step-by-step Docusaurus guide.

部署到 Koyeb​

Koyeb is a developer-friendly serverless platform to deploy apps globally. The platform lets you seamlessly run Docker containers, web apps, and APIs with git-based deployment, native autoscaling, a global edge network, and built-in service mesh and discovery. Check out the Koyeb's Docusaurus deployment guide to get started.

部署到 Render​

Render offers free static site hosting with fully managed SSL, custom domains, a global CDN, and continuous auto-deploy from your Git repo. Get started in just a few minutes by following Render's guide to deploying Docusaurus.

部署到 Qovery​

Qovery is a fully-managed cloud platform that runs on your AWS, Digital Ocean, and Scaleway account where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place.

  1. Create a Qovery account. Visit the Qovery dashboard to create an account if you don't already have one.
  2. Create a project.
    • Click on Create project and give a name to your project.
    • Click on Next.
  3. Create a new environment.
    • Click on Create environment and give a name (e.g. staging, production).
  4. Add an application.
    • Click on Create an application, give a name and select your GitHub or GitLab repository where your Docusaurus app is located.
    • Define the main branch name and the root application path.
    • Click on Create. After the application is created:
    • Navigate to your application Settings
    • Select Port
    • Add port used by your Docusaurus application
  5. Deploy
    • All you have to do now is to navigate to your application and click on Deploy.

Deploy the app

That's it. Watch the status and wait till the app is deployed. To open the application in your browser, click on Action and Open in your application overview.

部署到 Hostman​

Hostman allows you to host static websites for free. Hostman automates everything, you just need to connect your repository and follow these easy steps:

  1. Create a service.

    • To deploy a Docusaurus static website, click Create in the top-left corner of your Dashboard and choose Front-end app or static website.

  2. Select the project to deploy.

    • If you are logged in to Hostman with your GitHub, GitLab, or Bitbucket account, you will see the repository with your projects, including the private ones.

    • Choose the project you want to deploy. It must contain the directory with the project's files (e.g. website).

    • To access a different repository, click Connect another repository.

    • If you didn't use your Git account credentials to log in, you'll be able to access the necessary account now, and then select the project.

  3. Configure the build settings.

    • Next, the Website customization window will appear. Choose the Static website option from the list of frameworks.

    • The Directory with app points at the directory that will contain the project's files after the build. If you selected the repository with the contents of the website (or my_website) directory during Step 2, you can leave it empty.

    • The standard build command for Docusaurus is:

      npm run build

    • You can modify the build command if needed. You can enter multiple commands separated by &&.

  4. Deploy.

    • Click Deploy to start the build process.

    • Once it starts, you will enter the deployment log. If there are any issues with the code, you will get warning or error messages in the log specifying the cause of the problem. Usually, the log contains all the debugging data you'll need.

    • When the deployment is complete, you will receive an email notification and also see a log entry. All done! Your project is up and ready.

部署到 Surge​

Surge is a static web hosting platform that you can use to deploy your Docusaurus project from the command line in seconds. Deploying your project to Surge is easy and free (including custom domains and SSL certs).

Deploy your app in a matter of seconds using surge with the following steps:

  1. First, install Surge using npm by running the following command: 
    npm install -g surge
  2. To build the static files of your site for production in the root directory of your project, run: 
    npm run build
  3. Then, run this command inside the root directory of your project: 
    surge build/

First-time users of Surge would be prompted to create an account from the command line (which happens only once).

Confirm that the site you want to publish is in the build directory. A randomly generated subdomain *.surge.sh subdomain is always given (which can be edited).

使用你的域名​

If you have a domain name you can deploy your site using the command:

surge build/ your-domain.com

Your site is now deployed for free at subdomain.surge.sh or your-domain.com depending on the method you chose.

设置 CNAME 文件​

Store your domain in a CNAME file for future deployments with the following command:

echo subdomain.surge.sh > CNAME

You can deploy any other changes in the future with the command surge.

部署到 QuantCDN​

  1. Install Quant CLI
  2. Create a QuantCDN account by signing up
  3. Initialize your project with quant init and fill in your credentials: 
    quant init
  4. Deploy your site. 
    quant deploy

See docs and blog for more examples and use cases for 部署到 QuantCDN.

部署到 Layer0​

Layer0 is an all-in-one platform to develop, deploy, preview, experiment on, monitor, and run your headless frontend. It is focused on large, dynamic websites and best-in-class performance through EdgeJS (a JavaScript-based Content Delivery Network), predictive prefetching, and performance monitoring. Layer0 offers a free tier. Get started in just a few minutes by following Layer0's guide to deploying Docusaurus.

部署到 Cloudflare Pages​

Cloudflare Pages is a Jamstack platform for frontend developers to collaborate and deploy websites. Get started within a few minutes by following this article.

部署到 Azure Static Web Apps​

Azure Static Web Apps is a service that automatically builds and deploys full-stack web apps to Azure directly from the code repository, simplifying the developer experience for CI/CD. Static Web Apps separates the web application's static assets from its dynamic (API) endpoints. Static assets are served from globally-distributed content servers, making it faster for clients to retrieve files using servers nearby. Dynamic APIs are scaled with serverless architectures using an event-driven functions-based approach that is more cost-effective and scales on demand. Get started in a few minutes by following this step-by-step guide.

部署到 Kinsta Application Hosting​

Kinsta Application Hosting is a service that lets you build and deploy your web apps directly from your Git repository. Get started in just a minutes by following our Docusaurus on Kinsta article.

编辑此页
最后由 wohugb@aliyun.com 于 更新