GitLab 페이지에 Docusaurus v2를 배포하는 방법

viafintech에서 내부 문서로 docusaurus을 사용합니다. 또한 GitLab을 사용하여 코드를 호스팅하고 테스트합니다.

GitLab pages은 GitLab 저장소에서 정적 웹 사이트를 게시할 수 있는 기능(Github 페이지와 같음)입니다. Gatsby, Hugo, Jekyll과 같은 다양한 정적 사이트 생성기를 호스트할 수 있습니다...

Docusaurus은 Facebook Open Source에서 만들고 유지 관리하는 문서 사이트 생성기입니다. Markdown을 사용하여 문서를 더 빨리 작성할 수 있었고 엔드포인트를 설명하는 깔끔한 문서RAML files를 생성할 수 있었습니다.

docusaurus 프로젝트를 생성하려면 프로젝트 생성기를 사용하십시오.

npx @docusaurus/init@latest init [name] [template]

내 예에서는 클래식 템플릿을 사용하지만 더 자세한 내용을 찾을 수 있습니다here.

npx @docusaurus/init@latest init test-gitlab classic

이제 test-gitlab/폴더에 프로젝트가 제대로 생성되어야 합니다.

gitlab ci를 설정하는 방법

문서를 엉망으로 만들면 배포할 준비가 된 것입니다.
GitLab 페이지가 웹 사이트를 렌더링할 수 있도록 정적 리소스가 포함된 아티팩트를 생성할 수 있는 .gitlab-ci.yml 파일을 생성합니다.
.gitlab-ci.yml 파일의 내용:

image: node:latest

# allow caching for faster deployment
cache:
  paths:
    - node_modules/
    - public/
    - .cache/

pages:
  stage: deploy
  script:
    - yarn install
    - yarn build:gitlab
  artifacts:
      paths:
        - public
  only:
    - master

그리고 이 스크립트를 package.json에 추가하여 docusaurus가 파일을 public/ 폴더에 빌드할 수 있도록 합니다.

"build:gitlab": "docusaurus build --out-dir public",

액세스 방법

이제 웹 사이트를 배포하도록 설정하고 새로 추가한 내용을 푸시하면 문서 사이트를 사용할 수 있습니다. GitLab > 설정 > 페이지로 이동하면 페이지 링크를 볼 수 있습니다. For me: https://eleboucher.gitlab.io/test-docs/



메모:
링크가 루트 경로가 아닌 경우 baseURL에서 올바른 docusaurus.config.js를 설정했는지 확인하십시오.

질문이 있으시면 언제든지 의견을 남겨주세요!

나를 찾으십시오:

Github

즐거운 코딩하세요!

직원 모집합니다! => https://www.viafintech.com/op_software-engineer/