CLIで記事を投稿してみた
目的
Zenn と github を連携させた後、CLI で記事を作成し投稿しましたので、その流れを記載します。
参考にしたZennの公式記事
内容
- 記事の作成
- 記載の手順
- プレビューの表示
- 記事の公開
記事の作成
まず記事を作成するに当たり、記載するためのファイルを作成します。ファイルはarticlesという名前のディレクトリ内に含める必要があります。
その為articlesが配下にあるディレクトリへ移動してから、以下のコマンドを実行します。
$ npx zenn new:article
このコマンドにより、articles/ランダムなslug.mdというファイルが作成されます。slug（スラッグはその記事のユニークな ID のようなものです。
（1 つの記事の内容は、1 つの markdown ファイル(◯◯.md)で管理します。）
・今回は articlesディレクトリに818354c480c763.mdという ID でファイルが作成されました。
記載の手順
・先ほど作成したファイルに記事の内容を記載していきます。まずファイルを開くと、以下の画像のような記載があります。title: emoji: type: topics: published:を記載します。
（画像は今回こちらの記事を投稿した際の記載になります。）
・本文を記載していきます。記載方法はZennのMarkdown記法で記載していきます。
（画像は今回こちらの記事を投稿した際の記載になります。）
プレビューの表示
・以下のコマンドを実行後、下記のリンク(http://localhost:8000)より、別のブラウザでプレビューを表示できます。
$ npx zenn preview
macbook@yournameMacBook-Air Zenn.st % npx zenn preview
(node:78840) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
👀 Preview: http://localhost:8000 ⇦これで止まります
プレビューのブラウザ画面
記事の公開
・記事をzenn.dev上で公開する為に、Zenn と連携されている GitHub リポジトリに、ファイルをadd . commit push していきます。
・git branchでcommit push するブランチを確認します。
macbook@yournameMacBook-Air Zenn.st % git branch
* main
master
・Git で変更されたすべてのファイルをステージングエリアに追加します。
git add .
・ステージングエリアに追加された変更をローカルリポジトリにコミットして変更を確定させます
git commit -m "コミット名"
・ローカルリポジトリにあるコミット済みの変更をリモートリポジトリに送信します。
git push origin main
送信されたリモートリポジトリの変更を確認します。
・GitHub の画面でRepositoriesを選択します。
・自身が作業していたディレクトリを選択します。
・articles欄の ZennとGitHubを連携させてみた更新(コミット名)を選択します。
・以下の画像のように内容を確認できます。
・これで記事の投稿は完了しましたので、Zenn の方で確認していきます。
記事の投稿を確認します。
・自身の Zenn のホームから記事の管理を選択します。
・投稿されている記事が公開中となっていることを確認します。
・右側の▷を選択します。
・このように表示されていれば記事は正しく投稿されています。
Discussion