endueendue
Sign In시작하기

초안초안입니다. 개발 사이트에서만 보이고 운영에는 게시되지 않습니다.

endue 블로그에 글 쓰는 법

글 파일을 어디에 두는지, frontmatter 항목이 각각 무엇을 하는지, 그리고 초안이 개발 사이트를 거쳐 endue.ai 에 게시되기까지의 과정을 정리했습니다.

endue

2분 분량다른 언어로 읽기English

어두운 배경에 빛나는 점을 중심으로 옅은 라벤더색 궤도가 겹쳐 있고, 궤도 위에 작은 색색의 행성이 떠 있다.
목차

이 글은 견본입니다. 초안으로 표시해 두었기 때문에 dev.endue.ai 에만 보이고 endue.ai 에는 올라가지 않습니다. 글에 쓸 수 있는 요소를 이 페이지에 전부 넣어 두었으니, 첫 글을 쓸 때 원본 파일을 옆에 열어 두고 참고하세요.

글 파일의 위치

글은 src/content/blog/ 아래에 언어별 폴더로 나뉘어 있습니다.

src/content/blog/
├── en/
│   ├── agents-on-call.md        # 이미지가 없는 글
│   └── building-the-canvas/
│       ├── index.mdx            # 이미지를 함께 두는 글
│       └── canvas-before.png
└── ko/
    └── agents-on-call.md        # 같은 slug: 한국어 번역

파일(또는 폴더) 이름이 slug 이고, slug 가 곧 주소입니다. ko/agents-on-call.md 는 /ko/blog/agents-on-call/ 에 게시됩니다. 영문 소문자, 숫자, 하이픈만 쓸 수 있어요.

en/ 에 같은 slug 의 글이 있으면 서로 번역으로 묶입니다. 두 페이지가 서로를 가리키고, 검색 엔진도 한 글의 두 언어판으로 이해합니다. 번역이 없는 글도 괜찮습니다.

frontmatter

항목 필수 하는 일
title 예 제목. 120자까지.
description 예 한두 문장. 글 카드, 검색 결과, 링크 미리보기에 나옵니다.
publishedAt 예 게시일, YYYY-MM-DD. 목록은 최신순입니다.
updatedAt 아니요 내용을 실제로 고쳤을 때만 넣으세요. 날짜 옆에 표시됩니다.
authors 예 src/content/authors.yaml 의 키.
tags 아니요 src/content/tags.yaml 의 키. 새 태그는 거기에 먼저 추가합니다.
cover 아니요 이미지 경로. 링크 미리보기 이미지로도 쓰입니다.
coverAlt cover 가 있으면 이미지를 볼 수 없는 독자를 위한 설명.
draft 아니요 true 면 endue.ai 에 게시하지 않습니다.
canonical 아니요 다른 곳에 먼저 게시한 글일 때 원문 주소.

초안에서 게시까지

  1. develop 에서 브랜치를 따고 draft: true 로 글을 씁니다.
  2. develop 으로 머지 요청을 엽니다. 머지되면 dev.endue.ai/ko/blog 에 초안 배지를 달고 나타나요. 검토는 이 링크로 받으면 됩니다.
  3. 글이 준비되면 draft 를 false 로 바꿔 다시 머지합니다.
  4. 다음 릴리스에서 develop 이 main 으로 머지되고 사이트가 배포되면 endue.ai 에 올라갑니다.

본문 쓰기

링크

endue.ai 안의 다른 페이지는 전체 경로로 씁니다. 블로그 글은 /ko/blog/agents-on-call/, 문서는 /ko/docs/get-started/quickstart/, 제품 페이지는 /ko/pricing 처럼요. 다른 사이트 링크는 평소대로 쓰면 됩니다.

빌드가 글 속의 경로를 전부 확인합니다. 없는 글을 가리키거나, endue.ai 용으로 빌드할 때 아직 초안인 글을 가리키면 빌드가 멈추고 파일 이름을 알려 줍니다. 통과하는 예: 블로그 홈.

이미지

마크다운 이미지는 알아서 크기를 줄이고 최신 형식으로 내보냅니다.

![대화 하나에 에이전트 둘](./two-agents.png)

설명(캡션)이 필요하면 Figure 컴포넌트를 씁니다.

같은 커버 이미지를 본문 안에 다시 넣은 모습.
캡션에는 독자가 이미지에서 무엇을 봐야 하는지를 적습니다.

이미지는 그 이미지를 쓰는 글 옆(폴더형 글)에 둡니다. 번역끼리 같은 이미지를 쓴다면 이 글처럼 src/assets/posts/<slug>/ 에 두고 두 글이 함께 가리키게 하세요.

콜아웃

note, tip, warning 세 가지가 있습니다. 아껴 쓰세요. 콜아웃으로 가득한 페이지에서는 어느 것도 눈에 띄지 않습니다.

코드

인라인 코드는 npm run dev 처럼 보입니다. 코드 블록은 언어에 맞게 색이 입혀져요.

// 제목 아래에 표시되는 읽는 시간.
export function readingMinutes(words: number, wordsPerMinute = 230): number {
  return Math.max(1, Math.round(words / wordsPerMinute));
}

인용과 각주

그 문제를 검색했을 때 찾고 싶었던 글을 쓰세요.

각주를 쓰면 문장을 끊지 않고 세부 내용을 덧붙일 수 있습니다.1

머지하기 전에

  • npm run build:ko 를 돌려 보고 알려 주는 문제를 고칩니다.
  • npm run dev:ko 로 내 컴퓨터에서 페이지를 읽어 봅니다.
  • 링크 미리보기를 확인하세요. 글이 공유될 때 사람들이 보는 건 제목, 설명, 커버입니다.

각주

  1. 각주는 글 맨 끝에 모입니다. ↩