시작 설명서

Docuusauus를 시작하려는 사람을 위한 시작 안내서입니다.
https://docusaurus.io/

대상

Docuusauurs를 이용하고 싶은 사람

이번에 할 일

로컬 Docuusauurs 구축

push

GiitHub 창고용

Netlify로 디버깅

기본 설정을 사용자 용도로 수정

머리글/꼬리글 수정

문서 추가 시도

docusaurus.config.js의 수정

Metag 설정

블로그 설정

다국어 설정(i18n)

로컬 Docuusauus 구축

!
참조: https://docusaurus.io/docs/installation
터미널에서 다음 동작을 실행합니다.

npx create-docusaurus@latest documents classic

!
다음은 개별적으로 수정해 주십시오.
사이트 이름
템플릿 이름
아래와 같이 표시되므로 y 를 입력하고 Enter 를 입력합니다.

Ok to proceed? (y) 

documents디렉터리를 만들고 이동npm start합니다.

cd documents
npm start

브라우저에서 http://localhost:3000에 액세스하면 가 표시됩니다.

GiitHub 창고에서 push를 하고 있어요.

push에서 GiitHub 창고로 이동합니다.
창고를 새로 짓다.

로컬 Docuusauus는 push를 만든 저장소로 사용합니다.

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/[ユーザ名]/documents.git
git push -u origin main

!
[User Name]에 사용자 이름을 입력하십시오.
지금까지 GiitHub의 push였습니다.

Netlify에게 프러포즈

다음은 디버깅입니다.
이번Netlify에 디자인되었습니다.
!
Netlify 계정이 있어야 합니다.미리 계좌를 기입해 주세요.
https://app.netlify.com/
[Addnew site]->[Important an existing Project]를 클릭합니다.

GiitHub 를 클릭합니다.

방금 만든 창고를 선택하십시오.

설정, [Deploy start]를 클릭합니다.

설계를 완성하다.발행 URL.

참조: URL 변경 시
기본적으로 사이트 이름(URL)은 무작위로 만들어집니다.이곳은 자유롭게 수정할 수 있다.
수정하려면 [SIte settings]->[Change site name]을 클릭하여 Site name을 수정합니다.

!
개별 도메인 이름을 사용하려면 성함이 어떻게 되십니까?com을 통해 얻은 도메인을 Netlify로 설정하는 방법를 참조하여 설정합니다.

자신의 기본 설정 수정

다음은 기본 설정을 수정합니다.

머리글 및 바닥글 링크 수정하기

머리글의 GiitHub 링크

GiitHub 링크 수정themeConfig:

themeConfig:
  ・・・中略・・・
          {
   -         href: 'https://github.com/facebook/docusaurus',
   +       href: 'https://github.com/facebook/docusaurus',
            label: 'GitHub',
            position: 'right',
          },
        ],
      },

바닥글 링크

다음 내용 수정

 footer: {
        style: 'dark',
        links: [
          {

기사의 Edit this 페이지의 링크 주소 수정

docusaurus.config.js 수정

 presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          editUrl: 
 -           'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
 +           'https://github.com//[ユーザ名]/documents/edit/main/',
        },
        blog: {
          showReadingTime: true,
          // Please change this to your repo.
          editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+            'https://github.com//[ユーザ名]/documents/edit/main/',
        },

[Edit this page]를 클릭하여 GiitHub의 edit 페이지로 이동하도록 설정합니다.
(불특정 다수의 사용자가 편집하지 않으려면 권한 등의 설정에 주의하십시오.)
https://youtu.be/066LINJ9OnU

문서 추가 시도

docs 디렉터리 아래md 파일을 설정합니다.

이번에 추가demo.md.
서류

스크린

메모지

사이드바의 표시 위치를 Mardown Headers에 기재sidebar_position: 1

H1이 제목이 됨

!
참조: Markdown Features

docusaurus.config.js 수정

docusaurus.config.사이트 URL을 js에 기재해야 합니다.또한 사이트 이름과 organization Name 등의 기록도 있어 함께 수정했다.
docusaurus.config.다음과 같이 js를 수정합니다.

const config = {
-   title: 'My Site',  
+   title: 'My documents',
   tagline: 'Dinosaurs are cool',
-   url: 'https://your-docusaurus-test-site.com',
+   url: 'https://my-documents.netlify.app/',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
-   organizationName: 'facebook', // Usually your GitHub org/user name.
+   organizationName: 'KoushiKagawa', // Usually your GitHub org/user name.
-   projectName: 'docusaurus', // Usually your repo name.
+   projectName: 'documents', // Usually your repo name.

!
사용자 자신을 위한 설정 내용을 수정하십시오.

Metag 설정

각 md 파일의 Metag 설정을 확인합니다.
MD 파일의 헤더에 다음 내용을 추가해서 Metag을 설정할 수 있습니다.

---
sidebar_position: 1
title: Tutorial Intro
description: A short description of this page
keywords: [keywords, describing, the main topics]
---

!
meta를 구축하지 않으면 확인할 수 없습니다.

블로그 설정

블로그를 설정하다.

!
참조: https://docusaurus.io/docs/blog

author 설정

/blog/authors.yml에 다음을 추가합니다.

Koshi:
  name: Koshi Kagawa
  title: PM
  url: https://github.com/koushikagawa
  image_url: https://avatars.githubusercontent.com/u/19630409?v=4

!
자신의 정보를 설정하십시오.

2019-05-28-first-blog-post.수정

기본값2019-05-28-first-blog-post.md을 수정해 보십시오.

---
slug: first-blog-post
title: First Blog Post
authors: Koshi
tags: [docusaurus]
---

I used docusaurus.

It is useful because it is simple and lacks markdown.

How to get started is summarized in [zenn](https://zenn.dev/koushikagawa/scraps/6f38fbc8a2b3ee).

또한 파일 이름을 2022-04-22-first-blog-post.md로 수정했다.

반영했어.

Tips: 블로그가 필요 없는 경우

블로그가 필요하지 않으면 아래에서 대응할 수 있다.

블로그 디렉터리 삭제

config 파일에서 blog: false로 수정되었습니다.

**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

다중 언어 설정(i18n)

다국어를 설정하다.
이번 설정은 다음과 같다.

주어: 영어(en)

다국어: 일본어(ja)

config 구성

docusaurus.config.js에 다음을 추가합니다.

const config = {
  title: 'My documents',
  tagline: 'Dinosaurs are so cool',
  ・・・中略・・・

+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'ja'],
+  },

번역된 문서의 구성 디렉토리 만들기

번역할 문서 (이번에는 일본어) 의 디렉터리를 만듭니다.
다음 작업을 수행합니다.

npm run write-translations -- --locale ja

이후 다음 파일을 만듭니다.

[INFO] 56 translations will be written at i18n/ja/code.json.
[INFO] 4 translations will be written at i18n/ja/docusaurus-theme-classic/navbar.json.
[INFO] 9 translations will be written at i18n/ja/docusaurus-theme-classic/footer.json.
[INFO] 3 translations will be written at i18n/ja/docusaurus-plugin-content-blog/options.json.
[INFO] 3 translations will be written at i18n/ja/docusaurus-plugin-content-docs/current.json.

다음에 번역 파일을 만듭니다.
기본 존재 /docs/intro.md 를 번역 디렉터리로 복사합니다.

cp docs/intro.md i18n/ja/docusaurus-plugin-content-docs/current/intro.md

i18n/ja/docusaurus-plugin-content-docs/current/intro.md를 일본어로 바꿨다.

---
sidebar_position: 1
---

# 日本語Intro
翻訳されたmdファイル

local로 확인

로컬 환경에서 i18n을 확인하려면 다음과 같이 하십시오.

npm run start -- --locale ja

http://localhost:3000를 통해 확인할 수 있다.
https://youtu.be/vG_y6Ijk8ZM

블로그 i18n

블로그에 대한 번역/i18n/ja/docusaurus-plugin-content-blog/은 아래에서 같은 파일 이름을 만들어 현지화하면 된다.

TODO

앞으로 덧붙이고 싶은 내용이다.

Algolia 제휴
Docsearch를 이용하고 싶은데, 지금 사용을 신청하고 있습니다.신청 후 문서를 추가합니다.

참고 자료

Docuusauus에서 사용할 수 있는 참조 웹 사이트입니다.나도 이 문서를 참고했다.감사합니다.
https://docusaurus.io/docs
https://zenn.dev/ningensei848/articles/docusaurus_intro