🌟
Zenn CLIを使ってVScodeで記事を書く！
はじめに
Zennだと、Qiitaのようにプレビューを表示しながら記事を書くことができません。
なので、Zenn CLIを使ってVScodeでプレビューを表示させながら書けるようにしました。
リポジトリの作成
まず、Zennのコンテンツを管理するためのリポジトリをGitHub上に作成します。
ここでは、シンプルに「Zenn」という名前のリポジトリを作成します。
ZennとGitHubを連携
作成したリポジトリとZennを連携します。
詳しい連携方法は公式をご覧ください。
リポジトリをクローン
リポジトリをクローンします。
git clone git@github.com:XXXXXX/Zenn.git
Zenn CLIをインストール
クローンされて作られたディレクトリ（今回だとZenn）に移動し、Zenn CLIをインストールします。
詳しい導入手順は公式をご覧ください。
node -v
ファイルをpush
手順に沿うとファイルが生成されていると思うので、pushします。
git add .
git commit -m 'Initial commit'
git push
ファイルがZennにデプロイされていればOKです。
拡張機能『Zenn Editor』の導入
記事を書くときにはこちら（非公式）を入れるとプレビューを表示させながら見れます。
一応公式の拡張機能もあるようですが、現在β版なのでとりあえずステイ。
記事を書く
準備は整ったので、あとはVScodeを開いて記事を書くだけです。
記事の書き方に関しては公式をご覧ください。
マークダウンの書き方はこちら
記事を公開する
記事はpublishedパラメータをtrueに設定してpushすることで公開できます。
---
title: "Zenn CLIを使ってVScodeで記事を書く！"
emoji: "🌟"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: ["VSCode", "ZennEditor", "ZennCLI"]
published: false
---
最後に
VScodeでZenn CLIを使用して記事を書く方法をまとめました。
リアルタイムでプレビューを表示しながら記事を書くことが可能になり、執筆プロセスが効率的になりますので是非やってみてください。
参考資料
Discussion