설치
Docusaurus consists of a set of npm packages.
Use the Fast Track to understand Docusaurus in 5 minutes ⏱!
Use docusaurus.new to test Docusaurus immediately in your browser!
Requirements
- Node.js version 18.0 or above (which can be checked by running
node -v
). You can use nvm for managing multiple Node versions on a single machine installed.- Node.js 설치 시 종속성과 관련된 모든 확인란을 선택하는 것을 권장합니다.
Scaffold project website
도큐사우루스를 설치하는 가장 쉬운 방법은 웹사이트 프로젝트를 위한 뼈대를 만들어주는 명령행 도구를 사용하는 겁니다. 새로 만든 저장소 또는 기존에 사용하던 저장소 어디든 실행할 수 있으며 프로젝트를 위한 기본 파일을 포함한 새로운 디렉터리를 만듭니다.
npx create-docusaurus@latest my-website classic
We recommend the classic
template so that you can get started quickly, and it contains features found in Docusaurus 1. The classic
template contains @docusaurus/preset-classic
which includes standard documentation, a blog, custom pages, and a CSS framework (with dark mode support). classic 템플릿을 바로 적용해서 시작해볼 수 있습니다. 도큐사우루스에 익숙해지면 나중에 사용자 지정 템플릿을 반영할 수도 있습니다.
You can also use the template's TypeScript variant by passing the --typescript
flag. See TypeScript support for more information.
npx create-docusaurus@latest my-website classic --typescript
메타 오픈 소스 프로젝트를 위해 도큐사우루스 웹사이트를 설정하는 경우 내부 저장소에서 이 명령을 실행하면 몇 가지 유용한 메타 관련 기본값이 제공됩니다.
scarf static-docs-bootstrap
Alternative installation commands
원하는 프로젝트 관리자를 사용해 새로운 프로젝트를 초기화할 수 있습니다.
- npm
- Yarn
- pnpm
npm init docusaurus
yarn create docusaurus
pnpm create docusaurus
Run npx create-docusaurus@latest --help
, or check out its API docs for more information about all available flags.
Project structure
Assuming you chose the classic template and named your site my-website
, you will see the following files generated under a new directory my-website/
:
my-website
├── blog
│ ├── 2019-05-28-hola.md
│ ├── 2019-05-29-hello-world.md
│ └── 2020-05-30-welcome.md
├── docs
│ ├── doc1.md
│ ├── doc2.md
│ ├── doc3.md
│ └── mdx.md
├── src
│ ├── css
│ │ └── custom.css
│ └── pages
│ ├── styles.module.css
│ └── index.js
├── static
│ └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock
Project structure rundown
/blog/
- Contains the blog Markdown files. You can delete the directory if you've disabled the blog plugin, or you can change its name after setting thepath
option. More details can be found in the blog guide/docs/
- Contains the Markdown files for the docs. Customize the order of the docs sidebar insidebars.js
. You can delete the directory if you've disabled the docs plugin, or you can change its name after setting thepath
option. More details can be found in the docs guide/src/
- Non-documentation files like pages or custom React components. 문서가 아닌 파일들을 꼭 여기에 가져다 놓아야 하는 건 아닙니다. 하지만 한곳에 모아놓으면 오류를 체크하거나 추가 작업이 필요할 때 좀 더 편하게 처리할 수 있습니다./src/pages
- Any JSX/TSX/MDX file within this directory will be converted into a website page. More details can be found in the pages guide
/static/
- Static directory. Any contents inside here will be copied into the root of the finalbuild
directory/docusaurus.config.js
- A config file containing the site configuration. This is the equivalent ofsiteConfig.js
in Docusaurus v1/package.json
- A Docusaurus website is a React app. 앱 안에서 원하는 npm 패키지를 설치하고 사용할 수 있습니다./sidebars.js
- Used by the documentation to specify the order of documents in the sidebar
Monorepos
기존 프로젝트 문서화에 도큐사우루스를 사용하는 경우에는 단일 저장소가 해결책이 될 수 있습니다. 단일 저장소를 사용하면 비슷한 프로젝트 사이에 종속성을 공유할 수 있습니다. 예를 들어, 웹사이트는 출시 버전에 의존하지 않고 로컬 패키지를 사용하여 최신 기능을 선보일 수 있습니다. 그러면 기여자들은(contributors) 기능을 구현하면서 문서를 업데이트할 수 있습니다. 예를 들어 단일 저장소의 폴더 구조는 다음과 같습니다.
my-monorepo
├── package-a # Another package, your actual project
│ ├── src
│ └── package.json # Package A's dependencies
├── website # Docusaurus root
│ ├── docs
│ ├── src
│ └── package.json # Docusaurus' dependencies
├── package.json # Monorepo's shared dependencies