Dev.to를 블로그용 헤드리스 CMS로 사용하기

Source: Dev.to

Dev.to를 헤드리스 CMS 로 사용해 개인 블로그를 운영하는 것은 가장 스마트하고 비용 효율적인 전략 중 하나입니다. 편리한 에디터(Dev.to)에서 글을 쓰면, 개인 웹사이트가 그 글을 “읽어” 자신의 디자인으로 표시합니다.

아래는 구현을 위한 단계별 가이드입니다.

1. 엔드포인트 (필요한 URL)

Dev.to API는 공개되어 있어 글을 읽어올 수 있습니다. 공개 글을 표시하는 데 인증(API Key)이 필요하지 않아 매우 간편합니다.

필요한 두 개의 URL만 있으면 됩니다:

내 게시물 목록을 가져오기:

https://dev.to/api/articles?username=TU_NOMBRE_DE_USUARIO

특정 게시물(전체 내용) 가져오기:

https://dev.to/api/articles/TU_NOMBRE_DE_USUARIO/SLUG_DEL_POST

2. 코드 구현 (일반 예시)

JavaScript(React, Next.js, Vue, Astro, Vanilla JS 등)를 사용한다고 가정해 보겠습니다. 로직은 언제나 동일합니다.

단계 A: 게시물 목록 가져오기 (블로그 페이지용)

이 호출은 최신 30개의 글을 배열 형태로 반환합니다.

const username = 'tu_usuario_devto'; // Reemplaza esto

async function getMyPosts() {
  const response = await fetch(`https://dev.to/api/articles?username=${username}`);
  const posts = await response.json();
  return posts;
}

// Lo que recibes (simplificado):
// [
//   {
//     "id": 12345,
//     "title": "Mi primer post",
//     "slug": "mi-primer-post-xy2",
//     "description": "Resumen del post...",
//     "cover_image": "https://...",
//     "tag_list": ["javascript", "webdev"],
//     "published_at": "2024-05-10T..."
//   },
//   ...
// ]

Nota: 이 엔드포인트는 보통 전체 본문(body_html)을 반환하지 않고 요약만 제공합니다. 블로그 “카드”를 만들 때 사용합니다.

단계 B: 게시물 내용 가져오기 (글 페이지용)

사용자가 글을 클릭하면 slug를 이용해 전체 내용을 요청합니다.

async function getSinglePost(slug) {
  const username = 'tu_usuario_devto';
  const response = await fetch(`https://dev.to/api/articles/${username}/${slug}`);
  const post = await response.json();
  return post;
}

결과 사용

// Ejemplo en React / Astro
const post = await getSinglePost(slug);

// Título del artículo
<h1>{post.title}</h1>

// Inyectas el contenido que viene de Dev.to
<div className="prose" dangerouslySetInnerHTML={{ __html: post.body_html }} />

스타일 (CSS)

Dev.to가 반환하는 HTML은 “깨끗한” (<p>, <h2>, <ul>…) 구조입니다. 별도 CSS를 많이 작성하지 않아도 Tailwind Typography(prose) 라이브러리를 사용하면 자동으로 깔끔한 디자인을 적용할 수 있습니다. 부모 컨테이너에 prose 클래스를 추가하기만 하면 블로그가 전문적인 모습으로 변합니다.

4. 이 전략의 장점

• 이미지 무료 제공: 이미지를 Dev.to 에디터에 업로드하면 CDN에 저장됩니다. 서버의 대역폭이나 저장 공간을 소모하지 않아요.
• 자동 백업: 개인 웹사이트가 다운되거나 실수로 삭제해도 내용은 Dev.to에 안전하게 보관됩니다.
• 이중 트래픽:
  • 방문자는 개인 웹사이트에서 글을 읽습니다.
  • 방문자는 Dev.to에서도 글을 읽습니다.

5. SEO를 위한 ‘프로’ 팁 (Canonical URL)

구글에게 당신의 웹사이트가 원본이고 Dev.to가 복제본임을 알리고 싶다면 다음을 수행하세요:

1. API를 이용해 웹사이트에 글을 게시합니다. 예시 URL: https://misitio.com/blog/mi-post.
2. Dev.to에 가서 해당 글을 편집합니다.
3. 글 설정에서 “Canonical URL” 필드를 찾습니다.
4. 거기에 https://misitio.com/blog/mi-post 를 입력합니다.

이렇게 하면 무료이면서 헤드리스인 블로그를 이미지 호스팅까지 포함해 구축할 수 있고, 커뮤니티도 함께 활용할 수 있습니다.