Zenn
💻

Zennことはじめ

2023/01/02に公開
初心者
Zenn
tech

はじめに

折角、1月1日なので今年はZennに技術系の記事をアップしていこうという目標を立てました。
ですがなにぶんZennを使うのは初めてなので、Zennのアカウントを作成してGitHubと連携し記事を投稿するところまでをまとめてみようと思います。

何番煎じか分かりませんが、少しでも役に立つ人がいらっしゃれば幸いです。

TL;DR

やること

  1. Zennへのログイン
  2. GitHubにレポジトリ作成
  3. Zennとの連携
  4. ZennCLIの設定
  5. 機能確認
  6. 投稿テスト

説明すること

  • Zennのログイン/設定
  • GitHub設定およびZennとの連携方法
  • エディタの設定
  • 投稿テスト

説明しないこと

  • Googleアカウントの作成方法およびログイン方法
  • GitHubのアカウント作成および設定
  • Gitコマンドの説明
  • Node.jsのインストールおよびコマンドの説明

1. Zennのログイン

まずはZennへのログインを行います。

  1. Zennにアクセスします
  2. 右上のLog inボタンをクリックしてポップアップした画面からLogin with GoogleボタンをクリックしGoogleアカウントでのログインを進めます。
    ※現在、GoogleアカウントのみサポートしているようなのでGoogleアカウントを持っていない方はGoogleアカウントを新規作成してください。
  3. これでログイン完了です！

2. Zennとの連携用レポジトリ作成

次にZennとの連携用のレポジトリ作成を行います。
レポジトリ作成の具体的な手順は省略します。
以下記事を始め、詳しく説明した記事はたくさんあるのでご参照ください。
https://zenn.dev/technicarium/articles/4fd8813d61acfc

ここではいくつかTipsを書くに留めます。

  • レポジトリ名はどうするべき？
    任意の名前を付ければいいと思いますが、私の場合は以下記事を参考に、ユーザー名-zenn-contentsと命名しました。

https://zenn.dev/j5c8k6m8/articles/zenn-github-repository-name

  • Public vs Private
    どちらを選んでも設定はできますが上述の記事の公開リポジトリ管理のメリット/デメリットを参考にPrivateの設定にしました。
    ただ、公開することでプルリクエストをもらえることにもメリットがあると思いますので個々人で決めてもらえればと思います。

  • READMEなど必要？
    レポジトリ作成時に作成の有無を設定できますが連携に当たって必須ではありません。
    連携に必要なリソースは後述のZennCLIで記事作成時に自動的に作成されます。

3. ZennとGitHubを連携する

続いて先ほど作成したレポジトリでZennの記事を管理できるように連携します。

  1. Zennの画面からGitHubからのデプロイから設定画面を開きます。
    当該の設定メニューは、画面右上の自分のアイコンをクリックすると見つけることができます。
  2. 以下の記事を参考に連携するレポジトリを設定してください。
    https://zenn.dev/zenn/articles/connect-to-github#2.-zennのダッシュボードから連携する
  3. 以上で設定完了です！

4. Zenn CLIの設定

レポジトリとの連携設定ができましたので実際にエディタから記事の作成を行う準備を進めて行きます。
なお、ここではVisualStudioCodeの利用を前提としています。
また、Zenn CLIの利用にはNode.jsのインストールが必要になりますのであらかじめ準備をお願いします。

https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b

  1. 連携したレポジトリをローカルにもってくる
    必要に応じて連携したレポジトリをcloneしてください。

  2. Zenn CLIのインストール
    以下のコマンドからZenn CLIをインストールと初期設定を行います。

npm install zenn-cli
npx zenn init
  1. Zenn Editorを利用した記事のプレビュー機能のテスト
    CLIのインストールが終わったらプレビュー機能のテストをしてみます。
    以下のコマンドからローカル環境にZenn Editorを立ち上げることができます。
npx zenn preview

立ち上げが完了すると結果が出力されますので、以下のURLからZenn Editorを開くことができます。
http://localhost:8000

このZenn Editor、かなり優秀で記事を編集するとその内容がすぐに反映されます。
また、Markdown記法を含めた記事作成ガイドと画像のアップロードもできるようになっているのでかなり便利に使うことができます。

  1. CLIから記事のテンプレ作成
    記事の作成は以下のコマンドから行うことで記事のテンプレを作成することができます。
npx zenn new:article --slug [任意の名前]
  1. 記事の作成
    Zennに投稿する記事には以下のように記事のタイトルやトピックを指定する必要があります。
---
title: "Zennことはじめ"
emoji: "💻"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: ["zenn","初心者"]
published: false
---

これらの情報はコマンドからテンプレを作成すると最初から記述がありますので作成する記事に合わせて適当に編集して下さい。

以下、プレビューを見ながらMarkdownを利用して記事を作成していきます。

5. 記事のアップロード

作成した記事は連携したレポジトリのMainブランチにPushすることで自動的にZennにアップロードされます。
この時作成した記事のファイルだけでなく、Articleフォルダを含めて自動的に作成されたフォルダはすべてGitHubにPushするようにしてください。

6. アップロードした記事の確認

レポジトリへのPushが完了するとZennのページ上、右上のアイコンでデプロイのステータスを確認することができます。
デプロイ成功と表示されていることを確認したら、Viewから当該の記事を開くことができるので内容を確認しましょう！
※記事の管理からも記事を確認できます。

最後に

以上でGitHubとZennとの連携しての記事作成ができるようになります。
閲覧ありがとうございました！

関連

Zennの始め方

参考させていただいた記事

Zennの初期導入手順
Zennと連携するGitHubリポジトリ名は何がいいのか？
GitHubリポジトリでZennのコンテンツを管理する
Zenn CLIをインストールする

Discussion