zenn-contents

Repository for Zenn contents

Setup

Install Zenn CLI

npm install -g zenn-cli

Zenn コンテンツのためのプロジェクトの初期化

ref: Zenn 公式:Zenn CLI をインストールする

mkdir zenn-contents
cd zenn-contents
zenn init

Zenn CLI で記事・本を執筆する

ref: Zenn CLI で記事・本を管理する方法

記事、本の作成

  • 記事の作成
zenn new:article
  • 本の作成
    • config.yaml と章を表す Markdown ファイルが作成される
zenn new:book

# 出力例
# created: books/f37359fc0c162c/config.yaml
# created: books/f37359fc0c162c/example1.md
# created: books/f37359fc0c162c/example2.md

記事をローカルでプレビューする

Zenn CLI のプレビューモードでは、ブラウザで実際の記事の表示と同じ内容を表示しながら好きなエディタで記事の編集ができる。また、Zenn CLI の使用方法や、Zenn のマークダウン記法も確認できる。

zenn preview
# 👀 Preview on http://localhost:8000

ポートの指定も可能。

zenn preview --port 3333
# 👀 Preview on http://localhost:3333

日時を指定して記事を公開する

Front Matter の publishedtrue にした上で、published_at を指定する。published_at のフォーマットは、YYYY-MM-DD または YYYY-MM-DD HH:MM である必要がある。

published: true # 公開設定(false にすると下書き)
published_at: "1970-01-01 00:00" # 公開日

Warning

公開日時の指定は一度しかできず、既に設定された値を変更することはできない。

公開した記事を更新する

Markdown ファイルを編集して、GitHub リポジトリに push すると、自動的に記事が更新される。

公開した記事を削除する

ダッシュボードから手動で行う。安全のため、GitHub の articles ディレクトリから Markdown ファイルを削除しても、zenn.dev 上では削除されない。

その他

Markdown のリンター

Markdown のリンターとして、VSCode 拡張の markdownlint を使用している。リポジトリルートに置いてある .markdownlint.yml を編集することで適用するルールを設定できる。