Skip to main content

[docusaurus] Create Blog with NX and docusaurus

· 6 min read

docusaurus를 이용한 개인 개발 블로그 만들기 Step 1

jekyll, gatsby와 같은 도구를 이용하여 github repo를 이용하여 개인 개발 블로그를 듬성 듬성 관리를 해오다가 거의 방치를 했었다. 사실 너무 귀찮기도 하고...해보고 싶은 것들은 많은데, 회사일과 개인일 들에 밀려서...주어진 시간 대비 너무 멋드러지게 해보고 싶다는 생각에...목표가 너무 크다보니 손을 놓아버리게 된 것은 아닌가 싶기도 하다. 이제 그만 지난 날은 반성하고...작더라도 하나씩 이루어가는 성취감을 느끼며 나 자신의 경험을 남기고....미래의 내가 필요할 때 참고하기 위한 자료를 남기기 위한 공간을 다시 만들어야겠다. (누군가 이 글을 보는 사람은 나와 같은 과오를 범하지 않았으면 한다..)

사설은 여기까지 하고... 이번에는 docusaurus라는 문서 생성 도구를 이용하여 MonoRepo 구조에 적용하여 블로그를 구성해보고자 한다. 모노레포는 NX라는 도구를 이용하여 구성할 계획이다.

그리고 해당 글에는 나의 개발 블로그를 만들어가기 위한 과정 중 프로젝트 환경을 구성하기 위한 과정에 대한 기록을 정리하려고 한다.

Create MonoRepo Project with NX​

create-nx-workspace를 이용하여 레파지토리를 생성한다. 기본적인 폴더만 구성된 프로젝트를 생성하기 위해 --preset=apps를 명시하여 생성하였다.

npx create-nx-workspace gloria-tilog --preset=apps

그럼 다음과 같은 구조로 프로젝트가 생성된다.

├── README.md
├── apps
├── libs
├── nx.json
├── node_modules
├── package-lock.json
├── package.json
└── tools
    ├── generators
    └── tsconfig.tools.json

Configure yarn berry (yarn 3.0)​

yarn 3.0을 이용하기 위해 다른 설정을 진행하기 전에 yarn 설정을 먼저 진행하였다.

# yarn 최신버전으로 업데이트하기 위함
yarn set version stable

업데이트된 yarn을 이용해서 다시 패키지 모듈을 설치한다.

# re-install package modules
yarn install

yarn document

Setting Up React​

React를 이용하여 블로그에서 사용할 컴포넌트를 개발할 계획이므로 @nrwl/react을 설치해주었다.

yarn add -D @nx/react

그리고 블로그에서 라이브러리 형태로 사용할 것이므로 다음과 같이 library를 생성해주었다.

npx nx g @nx/react:lib ui

위와 같이 실행하고 나면 다음과 같이 libs 폴더 하위에 generator 실행 시 명시한 폴더명인 ui가 생성되어있다.

libs
└── ui
    ├── README.md
    ├── jest.config.ts
    ├── project.json
    ├── src
    │   ├── index.ts
    │   └── lib
    │     ├── ui.spec.tsx
    │     └── ui.tsx
    ├── tsconfig.json
    ├── tsconfig.lib.json
    └── tsconfig.spec.json

만약, 위의 과정에서 다음과 같은 에러가 발생한다면....

> npx nx g @nx/react:lib ui
Need to install the following packages:
  nx
Ok to proceed? (y) y

 >  NX   Could not find Nx modules in this workspace.

   Have you run npm/yarn install?

다음과 같은 과정으로 수정하여 해결하였다. (ref: https://github.com/nrwl/nx/issues/2386#issuecomment-890019994)

  1. Add nodeLinker: node-modules from .yarnrc.yml (if you define pnpMode: loose, please remove it)
  2. Run yarn install
  3. Run npx nx g @nx/react:lib ui Again
  4. Remove nodeLinker: node-modules from .yarnrc.yml
  5. Run yarn install again to remove the node_modules directory and add back the .pnp.cjs file

Create MonoRepo Project with NX​

@nx-plus/docusaurus 플러그인을 이용하여 docusaurus를 구성한다.

yarn add @nx-plus/docusaurus --dev

docusaurus application을 생성해준다.

npx nx g @nx-plus/docusaurus:app doc

이제 docusaurus CLI를 이용하여 docusaurus application을 apps 폴더 하위에 추가해준다.

npx create-docusaurus docs classic apps/ --typescript
yarn add -D typescript @docusaurus/module-type-aliases @tsconfig/docusaurus

설치가 되고나면 다음과 같이 확인할 수 있다.

apps
└── doc
    ├── babel.config.js
    ├── blog
    ├── docs
    ├── docusaurus.config.js
    ├── project.json
    ├── sidebars.js
    ├── src
    ├── static
    └── tsconfig.json

Run Serve​

package.json 파일에 다음과 같이 스크립트를 추가해준다.

"scripts": {
  "start": "nx serve",
  "build": "nx build",
  "deploy": "nx deploy",
  "test": "nx test",
},

위와 같이 구성 후 다음과 같이 실행을 하면 서버가 정상적으로 기동된 것을 확인할 수 있따.

❯ yarn start doc

> nx run doc:serve

[INFO] Starting the development server...
[SUCCESS] Docusaurus website is running at: http://localhost:3000/

✔ Client
  Compiled successfully in 6.23s

client (webpack 5.81.0) compiled successfully

✔ Client
  Compiled successfully in 83.25ms

client (webpack 5.81.0) compiled successfully

이제 다음에는 다음과 같은 설정들을 보완해봐겠다.

  • husky
  • lint-staged
  • eslint
  • commitlint
  • cspell

References​