연동 가이드
블로그 연결, 어렵지 않아요 😊
기존 홈페이지에 Callable 블로그를 연결하는 두 가지 방법을 모두 설명합니다. 상황에 맞는 방법을 찾아보세요.
DNS로 연결 (추천)
코딩 없이 DNS 설정만으로 연결합니다. WordPress, Webflow, 어떤 사이트든 OK.
어떤 주소 형태를 원하시나요?
Callable 계정 만들기
아직 계정이 없다면 먼저 가입해주세요. 무료로 시작할 수 있어요.
무료 가입하기DNS에 CNAME 레코드 추가
Cloudflare, 가비아, Route 53 등 DNS 서비스에서 아래 레코드를 추가하세요.
대시보드에서 도메인 등록
대시보드 → 설정 → 연결 가이드에서 도메인을 입력하고 연결을 확인하세요.
1. 설정 → 연결 가이드 클릭
2. 도메인 입력 (예: blog.mysite.com) → 저장
3. 연결 확인 버튼 클릭 → ✅ 표시 확인
첫 글 작성하고 발행하기
대시보드 → 포스트 → 새 글 작성에서 발행하면 바로 blog.mysite.com에서 확인할 수 있어요. 🎉
npm 패키지로 연결
React 기반 앱(Next.js, Remix, Vite 등)에 직접 통합. 디자인을 완전히 커스텀할 수 있어요.
패키지 설치
pnpm add @onboarders/callable
npm / yarn도 동일하게 사용할 수 있어요.
API 키 발급
1. 대시보드 → 설정 → API 키
2. 새 API 키 만들기 → 이름 입력 → 생성
3. 키 복사 (생성 직후에만 표시됩니다!)
발급받은 키를 .env에 저장하세요.
CALLABLE_API_KEY=callable_live_여기에_키를_붙여넣으세요
코드에 추가
Next.js App Router
추천app/blog/[[...slug]]/page.tsx 파일을 만들고 붙여넣으세요.
import { createCallableBlogPage } from '@onboarders/callable/next'
const { BlogPage, generateMetadata, generateStaticParams } =
createCallableBlogPage({
apiKey: process.env.CALLABLE_API_KEY!,
orgSlug: 'your-org-slug', // 설정 → 일반에서 확인
basePath: '/blog',
})
export { generateMetadata, generateStaticParams }
export default BlogPageVite / Remix 등 React 앱
import { CallableProvider, BlogIndex, BlogPost } from '@onboarders/callable'
function BlogPage() {
return (
<CallableProvider
apiKey={import.meta.env.VITE_CALLABLE_API_KEY}
orgSlug="your-org-slug"
>
<BlogIndex />
</CallableProvider>
)
}🔒 클라이언트 앱 보안 설정
Vite/CRA처럼 API 키가 브라우저에 노출될 수 있다면, 대시보드에서 허용 도메인(Origin)을 설정하세요. 지정 외 도메인의 요청은 자동 차단됩니다.