---
id: wiki-2026-0508-blog-post
title: Blog Post
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Engineering Blog, Tech Writing]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [writing, content, devrel]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: applied
tech_stack:
  language: Markdown/MDX
  framework: Astro/Next.js/Hugo
---

# Blog Post

## 매 한 줄
> **"매 잘 쓴 한 글이 1000번의 회의를 대체한다."**. Engineering blog post 는 매 internal knowledge 를 외부 (recruiting, brand, community) 와 미래 자신 에게 publish 하는 매 leveraged artifact. 2026 의 stack: Astro/Next.js + MDX + algolia search + RSS + open-graph + Schema.org + AI-generated TL;DR.

## 매 핵심

### 매 Strong Post 의 Anatomy
- **Hook**: 매 첫 두 문장 — problem + stake.
- **TL;DR / BLUF**: 매 결론 먼저.
- **Concrete numbers**: 매 "20% faster" not "much faster".
- **Code that runs**: 매 copy-pasteable, working snippet.
- **Diagrams**: 매 system 그림이 단어 100개를 대체.
- **Honest tradeoffs**: 매 안 좋은 점도 적기.
- **Sources**: 매 reference link.

### 매 Format Type
- **Tutorial**: 매 step-by-step, runnable.
- **Reference**: 매 spec-like.
- **Explainer / mental-model**: 매 "왜".
- **Postmortem**: 매 incident retrospective.
- **Decision record (ADR)**: 매 trade-off 기록.
- **Benchmark**: 매 measure + reproduce.

### 매 Stack 2026
- **Authoring**: MDX, code blocks with shiki/Prism, KaTeX math.
- **SSG**: Astro, Next.js, Hugo, Eleventy.
- **Hosting**: Vercel, Cloudflare Pages, Netlify, GitHub Pages.
- **Analytics**: Plausible, Fathom (privacy-friendly).
- **Feedback**: Giscus (GitHub Discussions).

### 매 응용
1. Engineering blog (Stripe, Cloudflare, Vercel style).
2. Personal site (Notion-style or Astro).
3. Internal wiki post.
4. Conference talk companion.
5. Open-source project announcement.

## 💻 패턴

### Astro + MDX setup
```bash
bun create astro@latest my-blog -- --template blog --typescript strict
cd my-blog && bunx astro add mdx sitemap
```

### Frontmatter schema (zod-validated)
```typescript
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
export const collections = {
  blog: defineCollection({
    type: 'content',
    schema: z.object({
      title: z.string().max(70),
      pubDate: z.coerce.date(),
      tags: z.array(z.string()),
      heroImage: z.string().optional(),
      tldr: z.string().min(40).max(280),
    }),
  }),
};
```

### Code block with shiki + line highlight
````mdx
```ts {3-5}
function fib(n: number): number {
  if (n < 2) return n;
  // 매 highlighted recursion
  return fib(n-1) + fib(n-2);
}
```
````

### Open Graph + JSON-LD
```html
<meta property="og:title" content={post.title}>
<meta property="og:description" content={post.tldr}>
<meta property="og:image" content={`https://blog.example.com/og/${post.slug}.png`}>
<script type="application/ld+json">{JSON.stringify({
  "@context":"https://schema.org",
  "@type":"BlogPosting",
  "headline": post.title,
  "datePublished": post.pubDate.toISOString(),
})}</script>
```

### Auto-generated OG image (Vercel OG)
```typescript
// pages/og/[slug].tsx
import { ImageResponse } from '@vercel/og';
export default function og(req) {
  const title = new URL(req.url).searchParams.get('title');
  return new ImageResponse(<div style={{fontSize:64,padding:80}}>{title}</div>, { width:1200, height:630 });
}
```

### TL;DR via LLM (build-time)
```typescript
// 매 build hook — generate 280-char summary
const tldr = await anthropic.messages.create({
  model: 'claude-haiku-4',
  max_tokens: 200,
  messages: [{ role:'user', content:`Summarize in 2 sentences:\n\n${markdown}` }],
});
```

## 매 결정 기준
| 상황 | SSG |
|---|---|
| Content-heavy, fast | Astro |
| React stack, ISR | Next.js |
| Maximum simplicity | Hugo / Eleventy |
| Notion-style | Notion + Super |
| Self-host | Ghost |

**기본값**: 매 Astro + MDX + Vercel/Cloudflare Pages.

## 🔗 Graph
- 부모: [[Continuous-Discovery]]
- 변형: [[BLUF (Bottom Line Up Front)]]
- 응용: [[MECE Principle]]
- Adjacent: [[Edtech-Industry-Trends]]

## 🤖 LLM 활용
**언제**: TL;DR 생성, alt-text, SEO meta description, draft outline.
**언제 X**: 매 fact claim — 매 verify 안 한 LLM output 은 hallucination 위험.

## ❌ 안티패턴
- **Wall of text**: 매 heading + list 없이는 skim 불가.
- **Pseudocode only**: 매 reader 가 실행 못 함.
- **No metrics**: 매 "faster, better" 만 — concrete 숫자 필요.
- **Stale code**: 매 deprecated API 사용.
- **No date**: 매 reader 가 freshness 판단 불가.

## 🧪 검증 / 중복
- Verified: web.dev SEO docs; Schema.org BlogPosting; Astro docs.
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — anatomy + Astro/MDX/OG patterns |