배포
웹 사이트에 게시할 파일을 빌드하기 위해서 아래 명령을 실행합니다.
- 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, and Surge.
도큐사우루스 사이트는 정적 렌더링 방식을 사용합니다. 자바스크립트가 없이도 잘 동작합니다.
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, etc.) are client side and do not have direct access to the process
global variable. In this case, you can consider using customFields
to pass environment variables to the client side.
// If you are using dotenv (https://www.npmjs.com/package/dotenv)
import 'dotenv/config';
export default {
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,
},
};
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
export default function Home() {
const {
siteConfig: {customFields},
} = useDocusaurusContext();
return <div>Contact us through {customFields.teamEmail}!</div>;
}