Gitpod + Zenn CLIを使ってクラウドIDEで記事作成

Zenn と GitHub リポジトリを連携すると、ローカルの好きなエディターで投稿コンテンツの作成・編集ができるようになります。
ローカルでの執筆時には、スムーズにマークダウンファイルの作成したり、コンテンツをプレビューしたりするために「Zenn CLI」を導入しましょう。
https://zenn.dev/zenn/articles/install-zenn-cli

...

クラウドの好きなエディタで記事書きたい。

Gitpodとは

クラウドの開発環境です、Qiita の方に記事がありますので気になる方はこちら。

前提

• GitHub のアカウントの所持
• Gitpod のアカウントの所持（GitHub 連携でできます）
  Git と npm 関連を基本的に理解しているということで進めていきます

本題

1. GitHub リポジトリの作成

2. Gitpod を開く
   リポジトリの URL の前にgitpod.io#をつけて起動します
   例:gitpod.io#https://github.com/username/repo

3. Zenn CLI をインストールする を参照し CLI をインストール

4. Gitpod の設定をする
   ルートディレクトリにgitpod.ymlを作成し以下のように設定する。

   tasks:
     - init: npm install
       command: npx zenn preview
   ports:
     - port: 8000
       onOpen: open-preview
   

5. コミット&プッシュ

6. 一旦 Gitpod を閉じて 2 のように新しく開き直す

7. 右側にプレビューが出るのでzeen new:articleなどで作成し記事を書く

8. 6-7 だけでクラウドのエディターを使って記事が書けます