📖

【備忘録】Zenn 記事を書く準備

2023/01/30に公開

はじめに

Zennに記事書いてみよ!って思ったはいいものの、どうやって書けばいいか分からなかったので、記事の練習も兼ねて備忘録として置いておきます。
他の人が書いているものの方が精度高いです。

前提

  • githubを使ったことがある
  • コマンドを使ったことがある

準備するもの

  • Zennアカウント
  • Node.js
  • Zenn CLI
  • 空のリポジトリ(Github)

環境設定

1. アカウント作成

まずはZennでアカウントを作ります。
Googleアカウントさえあれば作れるのでぽちぽちして行きましょう。

2. 連携とリポジトリ作成

続いてZennアカウントとGithubアカウントの連携をします。

次の手順で連携ページを開きます。


するとこんなページに来ます。

そうしたら Only select repositories を選択して、リストから事前に準備した空のリポジトリ(今回は [username]/zenn)を選択します。

そしたら Install & Authorize で連携しましょう。

パスワードが要求されたら入力して Confirm

この画面に来れたらOKです。

3. フォルダ構築

今回はGithubで管理することを目標とします。
その際にNode.jsが必須っぽいのでこちらからインストールしましょう。

インストールが終わったらターミナルを連携したリポジトリの場所で開きます。

使うのは以下のコマンドです。

$ nmp init --yes
$ nmp install zenn-cli
$ nxp zenn init

順番に見ていきましょう。

まずは環境を作ります。

$ nmp init --yes


これで package.json やらが生成されます。

続いて Zenn CLI をインストールします。

$ nmp install zenn-cli

最後にフォルダを作ります。

$ nxp zenn init


これで articleフォルダと bookフォルダが生成されました。ここまでくれば準備は全てOKです。(多分)

記事を作ってみる

環境整えたことだし記事書いてみましょう。

再びリポジトリの場所でコマンドを開きます。
次のコマンドだけで作れます。

$ npx zenn new:article

new:article の後ろに --slug [適当な名前] をつけるとユニークIDがつくそうです。いれた方がいいかも?

ちなみに 小文字の半角英数字(a-z0-9)、ハイフン(-)、アンダースコア(_)の12〜50字の組み合わせ にする必要があります。
記事のタイトルを - か _ で繋ぐのがよさそうですね。
(今回なら prepare-zenn-article とかでしょうか。)

あとはMarkDownを覚えて、書いていきましょう。
私はVScodeで拡張機能に頼りながら書いてます。

これから技術記事を上げていきたいですね。
それでは~。

GitHubで編集を提案

Discussion