- GitHub アカウントを作成し、Fixstars オーガニゼーションに参加してください。
- Zenn アカウントを作成して、Fixstars Amplify Publicationに参加してください。
上記それぞれ、アカウントの作成後に管理者に参加申請の連絡をしてください。
Zenn CLI を使った記事の作成や VSCode で編集する方法について説明します。
リポジトリは Zenn の ID ごとにディレクトリを別けて管理する必要があります。最初に自身の Zenn ID のディレクトリを作成してください。
$ mkdir <your_zenn_id>
$ cd <your_zenn_id>Zenn CLI を動作させるためにシステムに nodejs と npm が必要です。
apt でインストールされるバージョンでは、Zenn CLI が動作しない場合があるため、ここでは n を使ってインストールする方法を紹介します。
最初に古いバージョンの nodejs と npm をインストールします。
$ sudo apt update
$ sudo apt install -y nodejs npm次に n をインストールします。
$ sudo npm install -g nnode の最新安定版をインストールします。
$ sudo n stable混乱の元になるので、apt でインストールした nodejs と npm をアンインストールします。
$ sudo apt purge -y nodejs npm自身の Zenn ID のディレクトリで以下のコマンドを実行して、Zenn CLI をインストールし初期化します。
$ cd <your_zenn_id>
$ npm init --yes
$ npm install zenn-cli
$ npx zenn init 記事を作成するには以下のコマンドを実行します。必ず自身の Zenn ID のディレクトリで実行してください。
$ npx zenn new:article以下のディレクトリ構成が作成され、articles ディレクトリにマークダウン形式の記事ファイルが作成されます。
<your_zenn_id>
├── articles
│ ├── <article_slug>.md
│ └── .keep
├── books
│ └── .keep
├── images
│ └── .keep
├── node_modules
├── package-lock.json
└── package.json
画像は images ディレクトリに <article_slug> ディレクトリを作成して保存すると管理しやすくなります。
images
└── <article_slug>
├── image1.png
└── image2.png
その他、以下を参考にして記事を編集してください。
VSCode で自分の ID のディレクトリを開いてください。
$ cd <your_zenn_id>
$ code .Zenn Editor をインストールすると、VSCode で Zenn 記事のプレビューや作成が可能になります。
一部の機能 (画像アップロードなど) は Publication への投稿に対応していないため注意してください。
変更を main ブランチにコミットして GitHub にプッシュすると、Zenn 側で記事が読み込まれます。Amplify Publication の記事一覧を確認してください。
https://zenn.dev/dashboard/publications/amplify/articles
最初は下書き状態で公開されるため、Zenn のレビューページにて適切な方にレビューを依頼してください。AIにもレビューを依頼すると便利です。
その後、必要なら修正し再度プッシュしてください。レビューが完了すると公開が可能な状態になります。
Note
GitHub リポジトリ以外からの投稿・更新を禁止しているため、Zenn のWEBページ上のエディタでの編集はできません。
全てのレビューアからの承認が得られたら、記事のヘッダの published: false を published: true に変更してプッシュしてください。
日時を指定して記事を公開する場合は、publishedAt: "YYYY-MM-DD HH:MM" を追加してください。未来を指定すると予約投稿が可能です。
published: true
published_at: 2050-06-12 09:03