npx cms-create-site my-site 오늘은 무엇을 만들어 볼까요?
살펴보기Vertex란
콘텐츠 사이트는 설정 파일입니다. 나머지는 전부 프레임워크가 할 일입니다.
Vertex CMS는 vite-ssg 위에 구축된 Vue 3 프레임워크입니다. 각 페이지에 무엇이 들어가는지 JSON으로 작성하면, 라우팅·메타데이터·테마·이미지까지 처리된 사전 렌더링 정적 사이트를 돌려줍니다. 작성할 애플리케이션 코드도, 운영할 서버도 없습니다.
페이지는 코드가 아니라 데이터
페이지란 컴포넌트 목록과 그 컴포넌트들이 필요로 하는 콘텐츠입니다. 섹션을 추가하는 일은 한 줄을 추가하는 일입니다. 제목 하나 바꾸려고 .vue 파일을 열 필요가 없고, 콘텐츠 편집이 빌드를 깨뜨릴 수도 없습니다.
디자인은 토큰 매니페스트
테마는 디자인 토큰(팔레트, 타이포그래피, 표면, 포커스 링, 엘리베이션)을 담은 하나의 JavaScript 객체입니다. 프레임워크가 이를 CSS 사용자 정의 속성으로 컴파일하므로, 사이트 전체를 다시 입히는 일이 스타일시트 감사가 아니라 파일 하나가 됩니다.
정적 출력, 진짜 SEO
모든 라우트가 표준 URL, hreflang 대체, JSON-LD, Open Graph 태그, 사이트맵, 그리고 초안 설정에서 파생된 robots.txt와 함께 각자의 HTML로 사전 렌더링됩니다. 파일을 제공할 수 있는 곳이라면 어디에든 폴더째 배포하세요.
빠른 시작
아무것도 없는 상태에서 네 개의 명령으로 배포 가능한 사이트까지.
Vertex는 하나의 npm 패키지와 Vite 플러그인으로 제공됩니다. 스캐폴더가 바로 빌드할 수 있는 동작하는 사이트를 만들어 주고, 그다음부터는 JSON을 편집하면 됩니다.
사이트 생성하기
사이트 디렉터리, 시작용 테마, 그리고 이미 빌드되는 홈페이지를 만듭니다.
터미널 npx cms-create-site my-site cd my-site npm install페이지 기술하기
배열 인덱스를 포함한 점 표기법의 평면 키입니다. 프레임워크가 이를 펼쳐서, 컴포넌트가 렌더링 시점에 읽는 중첩 객체로 만듭니다.
site/content/en/pages/home.json { "components[0]": "Header", "components[1]": "Hero", "components[2]": "Footer", "content.hero.headline": "Welcome", "content.hero.subhead": "Built with Vertex CMS.", "content.hero.cta.text": "Get in touch", "content.hero.cta.href": "/contact", "path": "/" }미리 보기
핫 리로드를 지원하는 Vite 개발 서버입니다. 콘텐츠 수정이 즉시 반영되고, 이미지와 테마 변경도 마찬가지입니다.
터미널 npm run dev정적 사이트 빌드하기
모든 라우트를 dist/ 안의 각자 HTML 파일로 사전 렌더링하고, 반응형 이미지 변형을 생성하며, sitemap.xml, robots.txt, manifest.json, 404 페이지를 작성합니다.
터미널 npm run build:ssg
이것이 전체 흐름입니다. 완전한 콘텐츠 모델, 테마 토큰, 배포 대상은 다음에서 확인하세요: 문서 →
포함된 것들
모든 콘텐츠 사이트에 필요한 부품이 이미 준비되어 있습니다.
찾아 나서야 하는 플러그인이 아닙니다. 프레임워크 안에 있고, 기본으로 켜져 있으며, 다른 모든 것과 같은 JSON에서 설정합니다.
사전 렌더링 라우팅
라우트는 페이지 파일에서 파생됩니다. 각 라우트는 빌드 시점에 자신만의 HTML로 렌더링됩니다. SPA 재작성도, 실제 콘텐츠 URL에 홈페이지 껍데기를 내려주는 일도 없습니다.
다국어 콘텐츠
서로를 대응시키는 로케일별 디렉터리입니다. 기본 로케일이 먼저 로드되고 각 로케일은 자신이 정의한 키만 덮어씁니다. 따라서 부분 번역도 유효한 번역입니다.
반응형 이미지
원본을 site/assets/img/에 넣기만 하세요. 빌드가 AVIF, WebP, JPEG를 여섯 가지 너비로 생성하고, 저장소 바깥에 캐시한 뒤 <picture>의 srcset을 통해 제공합니다.
SEO 메타데이터
표준 URL, hreflang 대체, Open Graph 및 Twitter 카드, JSON-LD, 자동 파생 breadcrumb, sitemap.xml, robots.txt, 웹 앱 매니페스트까지 — 모두 생성되며 손으로 관리할 것은 없습니다.
초안 잠금
페이지 하나, 경로 접두사, 또는 사이트 전체를 비밀번호로 잠글 수 있습니다. 잠긴 페이지는 noindex와 함께 배포되고 사이트맵에서 제외되며, 잠금이 풀리기 전까지 본문을 렌더링하지 않습니다.
테마와 확장
테마는 토큰 매니페스트입니다. 확장은 검증된 컴포넌트 번들입니다. 둘 다 저장소 안에 둘 수도, npm에 게시해 여러 사이트에서 공유할 수도 있습니다.
3계층 컴포넌트
사이트 로컬 컴포넌트가 확장 컴포넌트를 덮어쓰고, 확장 컴포넌트가 기본 제공 컴포넌트를 덮어씁니다. 더 구체적인 쪽이 이기며, 이름이 충돌하면 소스 한정 이름으로 구분합니다.
진짜 404
프레임워크는 사이트 자체의 헤더와 푸터를 갖춘 /404.html을 사전 렌더링합니다. 일치하지 않는 URL은 빈 응답 본문 대신 noindex가 붙은 브랜드 페이지를 받습니다.
시작하기
자, 오늘은 무엇을 만들어 볼까요?
Vertex CMS는 MIT 라이선스로 npm에 게시되어 있습니다. 사이트를 생성해 보거나, 문서를 읽거나, 소스 코드를 읽어 보세요.
npx cms-create-site my-site