Files
2nd/10_Wiki/Topics/DevOps_and_Security/Blog-Post.md
T
2026-05-10 22:08:15 +09:00

4.8 KiB

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack
id title category status canonical_id aliases duplicate_of source_trust_level confidence_score verification_status tags raw_sources last_reinforced github_commit tech_stack
wiki-2026-0508-blog-post Blog Post 10_Wiki/Topics verified self
Engineering Blog
Tech Writing
none A 0.9 applied
writing
content
devrel
2026-05-10 applied
language framework
Markdown/MDX 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

bun create astro@latest my-blog -- --template blog --typescript strict
cd my-blog && bunx astro add mdx sitemap

Frontmatter schema (zod-validated)

// 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

```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

<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)

// 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)

// 매 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

🤖 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