Writing Zenn Articles

Overview

Zenn articles live in the articles/ directory of a GitHub-connected repository. Each article is a single Markdown file with YAML front matter. Changes pushed to GitHub are automatically deployed to Zenn.

Workflow

1. Create a new article

npx zenn new:article

This generates articles/.md with a random slug. To specify the slug:

npx zenn new:article --slug my-article-slug

Slug rules: 12–50 characters, lowercase alphanumeric, hyphens, and underscores only.

2. Configure front matter

Edit the generated file's front matter:

---
title: "記事タイトル"
emoji: "🔖"
type: "tech"      # tech（技術記事）or idea（アイデア・意見）
topics: ["topic1", "topic2"]   # 1–5 topics
published: false  # false until ready to publish
---

type の選び方:

• tech — 技術的な手順・解説・チュートリアル
• idea — 考察・意見・体験記

topics の選び方: Zenn上の既存トピック名と一致させると検索に載りやすい（例: "typescript", "react", "nextjs"）。

3. Write the article

For tech articles, structure content around: はじめに（背景・動機）→ 環境・前提条件 → 手順（ステップごと）→ まとめ。For idea articles, favour a narrative or opinion-led structure.

Zenn-specific Markdown syntax (callouts, collapsible sections, code blocks with filenames, etc.) is documented in [ZENNMARKDOWN.md](ZENNMARKDOWN.md).

4. Preview locally

npx zenn preview

Opens at http://localhost:8000. The preview hot-reloads on file save. To use a different port:

npx zenn preview --port 3000

Keep the preview running while editing to catch rendering issues early.

5. Publish via GitHub

When the article is ready, use a branch + pull request workflow so changes can be reviewed before going live.

1. Set published: true in front matter
2. Create a branch, commit, and push:

git checkout -b article/
git add articles/.md
git commit -m "Add article: "
git push -u origin article/

1. Open a pull request and merge into main. Zenn deploys automatically within a few seconds of the merge.

公開予約する場合: published_at を追加（JST、未来の日時）:

published_at: "2025-04-01 09:00"

Common rendering and deployment issues (image paths, duplicate slugs, topic names) are catalogued in [ZENNMARKDOWN.md](ZENNMARKDOWN.md).

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: nagaakihoshi
• Source: nagaakihoshi/skills
• License: MIT

Install and usage instructions live in the source repository linked above.