본문으로 건너뛰기

Docusaurus 프로젝트 생성과 구조 살펴보기(2) - docusaurus.config.ts

· 약 5분
Braun Park
Braun Park
Curious Developer

Docusaurus를 활용해서 블로그를 만드는 과정을 포스팅으로 간단하게 작성하고 있습니다. 포스팅 하나로 끝내고 싶었는데 생각보다 포스팅이 길어지고 있어서 나누어서 작성하고 있습니다. 간단하게 프로젝트 구조에 대해 설명한 글은 이전 글을 참조해주세요.

노트

2024-09-01 - Docusaurus 프로젝트 생성과 구조 살펴보기(1) - Blog 디렉토리
2024-09-02 - Docusaurus 프로젝트 생성과 구조 살펴보기(2) - docusaurus.config.ts
2024-09-03 - Docusaurus 프로젝트 Amplify와 Github로 자동 배포하기 - docusaurus.config.ts


지난 포스팅에서는 Docusaurus 프로젝트를 생성하고 프로젝트 구조와 블로그의 메인이 될 blog 디렉토리에 대해서 설정이나 포스팅 작성에 대해서 정리했었는데, 이번에는 실제 블로그 운영을 위해 설정하면 도움이 될 만한 내용들에 대해서 정리해보겠습니다.

docusaurus.config.ts​

처음 프로젝트를 생성할 때 기본으로 생성되는 파일 중에 docusaurus.config.ts 파일이 있습니다. 그 파일이 블로그의 전반적인 설정을 할 수 있도록 합니다.

사이트 기본 설정​

사이트마다 설정해줘야 하는 기본적인(필수는 아니지만 사이트를 구분할 수 있는) 항목들이 있습니다. title, tagline, favicon,url 등 입니다. 이것들은 본인 블로그에 맞게 지정해주면 됩니다. 그리고 여기 들어간 변수들은 추후 메인 페이지에서 불러다 쓰기 때문에 메인 페이지를 확인해보면서 작업하면 됩니다.

  title: 'Devbraun.co',
  tagline: 'Braun\'s log',
  favicon: 'img/favicon.ico',

  // Set the production url of your site here
  url: 'https://devbraun.co',
  // Set the /<baseUrl>/ pathname under which your site is served
  // For GitHub pages deployment, it is often '/<projectName>/'
  baseUrl: '/',

이런식으로 지정해주면 됩니다. 필수는 아니지만, 이 설정들을 변경해주는 게 블로그의 정체성(?)을 설정하는 데에 있어 아주 기본적인 부분들이라고 생각합니다. 그래서 처음에 이쪽을 먼저 설정해주는 것이 좋을 것 같습니다.

기본적으로 Docusaurus 프로젝트를 생성하면 상단 메뉴에 Home, Docs, Blog 메뉴가 기본적으로 생성됩니다. 물론 다 쓰면 상관없지만, 저처럼 Docs를 사용하지 않거나 커스터마이징할 수 있습니다.

navbar: {
      title: 'My Site',
      logo: {
        alt: 'My Site Logo',
        src: 'img/logo.svg',
      },
      items: [
        {
          type: 'docSidebar',
          sidebarId: 'tutorialSidebar',
          position: 'left',
          label: 'Tutorial',
        },
        {to: '/blog', label: 'Blog', position: 'left'},
        {
          href: 'https://github.com/facebook/docusaurus',
          label: 'GitHub',
          position: 'right',
        },
      ],
    },

navbar를 변경해주면 됩니다. 이 블로그는 현재 docSidebar 부분을 지워서 blog 메뉴만 활성화 해놓은 상태입니다. 그리고 새로운 메뉴 등록도 이 부분에 추가하면 됩니다.

footer는 명확하게 되어 있는데요, 메뉴 연결이나 SNS 설정을 on/off 해주시면 됩니다. 저는 copyright만 변경해놨습니다.

마치며​

이 정도만 설정해주면 기본적인 설정은 끝나게 됩니다. 이제는 배포만 하면 사이트를 운영할 수 있게 되는 상태입니다. 하나의 포스팅으로 하기엔 내용이 길어질 것 같아서 분리를 해서 작성해봤습니다.
다음 포스팅에서는 AWS Amplify를 통해 간단하게 배포하는 과정에 대해서 정리해보겠습니다.

출처​

Docusaurus 공식 홈페이지