Blog CLI 완벽 가이드
이 블로그는 전용 CLI 도구로 포스트를 관리합니다. 터미널에서 포스트 생성, 목록 조회, 게시, 검색까지 모든 작업을 할 수 있습니다. 이 가이드에서는 CLI의 모든 기능을 실제 실행 결과와 함께 소개합니다.
설치
CLI를 설치하면 어디서든 blog 명령어로 블로그를 관리할 수 있습니다. 설치 스크립트는 ~/.local/bin에 심볼릭 링크를 생성합니다.
blog install
✓ Installed: /Users/you/.local/bin/blog -> /path/to/blog/bin/blog.jsUsage: blog <command> Try: blog --help
설치 전에는 프로젝트 루트에서 직접 실행할 수도 있습니다:
./bin/blog.js install제거하려면:
blog uninstall
✓ Removed: /Users/you/.local/bin/blog
CLI 개요
blog post 명령어로 모든 포스트 관리 작업을 수행합니다. 먼저 어떤 명령어들이 있는지 확인해봅니다.
blog post
blog post - Post management commandsCommands: new <slug> Create a new post list, ls List all posts show <slug> Show post details publish <slug> Publish a draft unpublish <slug> Convert to draft delete, rm Delete a post preview <slug> Standalone preview build <slug> Build standalone HTML tags List all tags stats Show blog statistics search <query> Search posts
Usage: blog post <command> [options] blog post <command> --help Show command help
Quick Start: blog post new my-post --title="My Post" --no-interactive blog post list --all blog post publish my-post
포스트 생성
블로그 글을 쓰려면 먼저 포스트를 생성해야 합니다. post new 명령어는 포스트 폴더와 기본 파일을 만들어줍니다.
기본 사용법
blog post new my-first-post --title="나의 첫 포스트" --no-interactive
✓ Created post: src/posts/my-first-post - Index: index.md - Assets: assets/ - Status: draftNext steps:
- Edit: src/posts/my-first-post/index.md
- Preview: blog dev
- Publish: blog post publish my-first-post
새 포스트는 draft 상태로 생성됩니다. 개발 서버에서는 보이지만 프로덕션 빌드에서는 제외되므로, 작성이 끝날 때까지 안전하게 작업할 수 있습니다.
생성되는 파일 구조
src/posts/my-first-post/
├── index.md # 포스트 본문
└── assets/ # 이미지, 데이터 파일용 폴더
포스트에 필요한 이미지나 CSV 같은 데이터 파일은 assets/ 폴더에 넣으면 됩니다. 이 구조를 TextBundle이라고 부르는데, 포스트 하나가 하나의 폴더에 완결되어 관리가 쉽습니다.
옵션 상세
blog post new --help
blog post new - Create a new blog postUsage: blog post new <slug> [options]
Arguments: <slug> URL-friendly identifier (lowercase, numbers, hyphens)
Options: --title="..." Post title (default: slug) --format=md|njk File format (default: md) --no-interactive Skip interactive prompts (for scripts/AI)
Examples: blog post new hello-world blog post new my-post --title="My First Post" blog post new tutorial --format=njk --no-interactive
Next: Edit the created file, then run 'blog post publish <slug>'
포스트 목록
작성한 포스트들을 확인할 때 사용합니다. 기본적으로 게시된 포스트만 보여주고, 드래프트는 --all 옵션으로 볼 수 있습니다.
기본 목록 (게시된 포스트만)
blog post list
Posts: ────────────────────────────────────────────────────────────────────── 2025-12-30 [published] Blog CLI 사용 가이드 (blog-cli-guide) 2025-12-30 [published] [interactive] D3.js Interactive Chart Demo (d3-demo) 2025-12-30 [published] [interactive] D3.js로 인터랙티브 세계 지도 만들기 (d3-map-tutorial) ────────────────────────────────────────────────────────────────────── Showing: 3 / Total: 3 (3 published, 0 drafts)
[interactive] 표시는 JavaScript 인터랙션이 있는 포스트를 의미합니다.
드래프트 포함
작성 중인 글까지 모두 보려면 --all 옵션을 사용합니다.
blog post list --all
Posts: ────────────────────────────────────────────────────────────────────── 2025-12-30 [published] Blog CLI 사용 가이드 (blog-cli-guide) 2025-12-30 [draft] 나의 첫 포스트 (my-first-post) 2025-12-30 [published] [interactive] D3.js Interactive Chart Demo (d3-demo) ────────────────────────────────────────────────────────────────────── Showing: 4 / Total: 4 (3 published, 1 drafts)
태그로 필터링
특정 주제의 글만 찾을 때 유용합니다.
blog post list --tag=d3
Posts: ────────────────────────────────────────────────────────────────────── 2025-12-30 [published] [interactive] D3.js Interactive Chart Demo (d3-demo) 2025-12-30 [published] [interactive] D3.js로 인터랙티브 세계 지도 만들기 (d3-map-tutorial) ────────────────────────────────────────────────────────────────────── Showing: 2 / Total: 3 (3 published, 0 drafts)
다른 필터 옵션으로 --interactive(인터랙티브 포스트만), --draft(드래프트만) 등이 있습니다.
JSON 출력
스크립트나 다른 도구와 연동할 때는 JSON 형식이 편리합니다.
blog post list --json
{
"posts": [
{
"slug": "blog-cli-guide",
"title": "Blog CLI 사용 가이드",
"date": "2025-12-30",
"status": "published",
"format": "md",
"interactive": false,
"tags": ["posts", "cli", "tutorial"]
},
...
],
"showing": 3,
"total": 3,
"published": 3,
"drafts": 0
}포스트 상세 정보
특정 포스트의 모든 정보를 한눈에 확인할 수 있습니다.
blog post show d3-demo
Post: D3.js Interactive Chart Demo ────────────────────────────────────────────────── Slug: d3-demo Date: 2025-12-30 Status: published Format: njk Interactive: yes Tags: posts, d3, visualization, javascript Path: src/posts/d3-demo Index: src/posts/d3-demo/index.njk ──────────────────────────────────────────────────Hint: Run 'blog build' to include in production, or 'blog post unpublish d3-demo' to convert back to draft.
드래프트 포스트는 게시 방법을 안내합니다:
blog post show my-first-post
Post: 나의 첫 포스트 ────────────────────────────────────────────────── Slug: my-first-post Date: 2025-12-30 Status: draft Format: md Interactive: no Tags: posts ──────────────────────────────────────────────────Hint: This post is a draft. Run 'blog post publish my-first-post' when ready.
검색 기능
포스트가 많아지면 검색이 필요합니다. 제목, slug, 설명, 태그 모두에서 검색합니다.
포스트 검색
blog post search D3
Search results for "D3": ────────────────────────────────────────────────── 2025-12-30 D3.js Interactive Chart Demo (d3-demo) 2025-12-30 D3.js로 인터랙티브 세계 지도 만들기 (d3-map-tutorial) ────────────────────────────────────────────────── Found: 2 post(s) View: blog post show <slug>
태그 목록
블로그에서 사용 중인 모든 태그와 각 태그별 포스트 수를 확인합니다.
blog post tags
Tags (9 unique): ──────────────────────────────────────── posts 5 posts d3 4 posts visualization 4 posts tutorial 3 posts javascript 2 posts markdown 2 posts map 2 posts geojson 2 posts cli 1 post ──────────────────────────────────────── Filter: blog post list --tag=<tag>
블로그 통계
전체 블로그 현황을 한눈에 파악할 수 있습니다.
blog post stats
Blog Statistics ────────────────────────────────────────────────── Total Posts: 5 Published: 5 Drafts: 0Format: Markdown: 3 Nunjucks: 2
Interactive: 4 posts (80%)
By Year: 2025: 5 posts
Top Tags: posts (5), d3 (4), visualization (4), tutorial (3), javascript (2) ──────────────────────────────────────────────────
게시/비게시
글 작성이 끝나면 게시해서 정식으로 공개합니다. 게시된 포스트만 프로덕션 빌드에 포함되고, RSS 피드와 사이트맵에도 등록됩니다.
포스트 게시
blog post publish my-first-post
✓ Published: my-first-postNext steps:
- Build: blog build
- Preview: blog preview URL: /posts/my-first-post/
포스트 비게시 (Draft로 되돌리기)
수정이 필요하거나 잠시 숨기고 싶을 때 사용합니다.
blog post unpublish my-first-post
✓ Unpublished (now draft): my-first-post
포스트 삭제
포스트를 완전히 삭제합니다. 폴더 전체가 삭제되므로 신중하게 사용하세요.
blog post delete my-first-post --force
✓ Deleted: my-first-post
--force 없이 실행하면 확인 프롬프트가 표시됩니다.
독립 실행 파일 빌드 (Export)
포스트를 블로그에서 분리해서 단독으로 실행 가능한 HTML로 만들 수 있습니다. 이메일로 공유하거나, 인터넷 없이 프레젠테이션하거나, 아카이브용으로 보관할 때 유용합니다.
Bundle 모드 (기본)
HTML 파일과 데이터 파일이 분리되어 생성됩니다.
blog post build d3-demo
Building standalone HTML for: d3-demo ✓ Built: src/posts/d3-demo/dist/index.html
생성되는 파일 구조:
src/posts/d3-demo/dist/
├── index.html # 독립 실행 가능한 HTML
└── assets/
└── data.csv # 데이터 파일
Inline 모드 (단일 파일)
모든 assets를 base64로 인코딩해서 HTML 하나에 담습니다. 파일 하나만 공유하면 되므로 편리합니다.
blog post build d3-demo --inline
Building standalone HTML for: d3-demo (inline mode) ✓ Built: src/posts/d3-demo/dist/index.html (all assets inlined)
독립 미리보기
빌드 전에 어떻게 보이는지 확인할 수 있습니다. 블로그 레이아웃 없이 포스트 내용만 렌더링됩니다.
blog post preview d3-demo --port=3000
Starting standalone preview for: d3-demo Server running at http://localhost:3000
빌드 및 배포
개발 서버 실행
글을 작성하면서 실시간으로 확인할 때 사용합니다. Eleventy(HTML)와 Vite(JS/CSS)가 동시에 실행됩니다.
blog dev
Starting development server... Eleventy: http://localhost:8080 Vite: http://localhost:5173
파일을 수정하면 자동으로 새로고침됩니다.
프로덕션 빌드
배포용 정적 파일을 생성합니다. 드래프트 포스트는 자동으로 제외됩니다.
blog build
Building for production... ✓ Build complete!Output: dist/
Next steps:
- Preview: blog preview
- Deploy dist/ to your server
빌드 미리보기
빌드 결과물을 로컬에서 확인합니다. 실제 배포 환경과 동일하게 테스트할 수 있습니다.
blog preview
Starting preview server... Preview: http://localhost:4173
빌드 정리
blog clean
Cleaning build artifacts... ✓ Removed dist/ ✓ Clean complete!
글로벌 옵션
색상 출력 비활성화
로그 파일에 저장하거나 다른 도구로 파이핑할 때 ANSI 색상 코드가 방해될 수 있습니다.
NO_COLOR=1 blog post list
Posts: ────────────────────────────────────────────────────────────────────── 2025-12-30 [published] Blog CLI 사용 가이드 (blog-cli-guide) ...
JSON 출력
--json 플래그는 list, show, tags, stats 명령어에서 사용할 수 있습니다.
blog post show d3-demo --json
{
"slug": "d3-demo",
"title": "D3.js Interactive Chart Demo",
"date": "2025-12-30",
"status": "published",
"format": "njk",
"interactive": true,
"tags": ["posts", "d3", "visualization", "javascript"]
}워크플로우 요약
일반적인 블로그 글 작성 흐름입니다:
1. 포스트 생성
blog post new my-post --title="제목" --no-interactive
2. 내용 작성
# 에디터로 src/posts/my-post/index.md 편집3. 미리보기
blog dev
4. 게시
blog post publish my-post
5. 프로덕션 빌드
blog build