🤖

Zennの記事の書き方

2023/08/19に公開

Zenn

tech

初期設定

Github上で連携するリポジトリをあらかじめ作成しておき、Zennと連携をする。

ローカル上で以下のコマンドを実行する。

npm init --yes
npm install zenn-cli
npx zenn init

記事の作成

新規作成

以下のコマンドで記事が作成される。
ランダムなslugが付与され、Markdownのファイル名もslugになり管理が煩雑になるので、slugオプションでスラッグを指定する。

npx zenn new:article --slug 記事のスラッグ

画像ファイルの配置

画像ファイルを配置したい場合はimagesディレクトリ以下に配置して、/images/から始まる絶対パスを指定する必要がある。

プレビュー

以下のコマンドでプレビューができる。

npx zenn preview

記事の投稿

MarkdownのファイルをGithubにpushすると、Zennに記事が投稿される。
ただし、published: falseとなっている記事は下書きになるので、投稿したい記事はpublished: trueにする。

VSCodeの設定

新規記事作成、プレビューはよく使うと思うので、VSCodeのタスクの設定をしておくと便利。

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "New Article",
            "type": "shell",
            "command": "npx zenn new:article --slug ${input:slug} --type idea --emoji 🤖",
            "problemMatcher": [],
        },
        {
            "label": "Preview",
            "type": "shell",
            "command": "npx zenn preview",
            "problemMatcher": [],
        }
    ],
    "inputs": [
        {
            "id": "slug",
            "type": "promptString",
            "description": "Enter the slug for the new article"
        }
    ]
}

参考

GitHubで編集を提案