Zenn の GitHub 連携機能を試してみた
はじめに
個人開発の作業を Zenn の記事で残して見たいと思っているのですが、Zenn を開いて記事を作成するのが地味に億劫でなかなかできていませんでした。
Zenn では Github 連携することで手元のテキストエディタで Markdown 形式で記述した記事を簡単に公開できる仕組みがあります。
まずは記事をお手軽に書ける環境を用意してみたら、もっと記事投稿のハードルが低くなるのではと思いついたので、試してみました。
参考にした記事一覧
環境
| 項目 | 内容 |
|---|---|
| OS | Windows10 |
| editor | Visual Studio Code |
| shell | powershell |
Github リポジトリ連携
自分のリポジトリは 2 つまでしか連携出来ないので、Zenn 投稿用のリポジトリを用意しました。
Zenn のマイページ から Github 連携の設定を行います。
連携するリポジトリの選択で先程のリポジトリを選び、Github を認証します。
Zenn CLI をインストールする
ローカルでの執筆時には、スムーズに markdown ファイルの作成したり、コンテンツをプレビューしたりするために「Zenn CLI」を導入する必要がある。
npm をインストールしていない場合は、Nodejs 公式サイトからインストールします。
Node.js ダウンロード
Zenn CLI のインストールが完了したら、npx zenn init で初期化を行います。
上記の表示が出れば記事を投稿・管理する準備が整いました。
記事をアップロードしてみる
新しい記事を作成
この記事自体を投稿するために、npx zenn new:article コマンドを実行すると /article というでディレクトリの下に {ランダムな slug}.md ファイルが作成されました。
PS C:\Users\magic\Documents\06_Zenn\zenn-scraps> npx zenn new:article
created: articles/501fda46d8f2f2.md
Web UI では別枠で編集しているタイトル部分が自動生成されている。
---
title: "Zenn の GitHub 連携機能を試してみた"
emoji: "🐈"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: ["tech", "Zenn", "Node.js"]
published: false
---
内容は以下の通り。
| 項目 | 内容 |
|---|---|
| title | 記事のタイトル |
| emoji | アイキャッチとして使われる絵文字（1 文字だけ） |
| type | tech: 技術記事 / idea: アイデア |
| topics | タグ。["tech", "Zenn", "Node.js"]のように指定する |
| published | 公開設定（false にすると下書き） |
画像を挿入するには？
以下のいずれかの方法で本文に画像を挿入できます。
- Zenn の画像のアップロードページ（要ログイン）から画像をアップロードして URL を貼り付け
- GitHub リポジトリ内に画像を配置する
- Gyazo などの外部サービスにアップロードした画像の URL を貼り付ける
プレビューしてみる
npx zenn preview でプレビューが可能。
PS C:\Users\magic\Documents\06_Zenn\zenn-scraps> npx zenn preview
👀 Preview: http://localhost:8000
公開してみる
記事の内容を確認して OK なら公開する。
公開は、リモートリポジトリに push するだけでいい。
公開した後に、編集してみる
ローカルで記事を編集して、push すると記事が編集できる。
おわりに
コマンドになれれば、かなり気軽に編集できるので便利そうだなと思いました。
エディタで完結するのがいいですね。
気になったものを色々試す記事を投稿しています。
Discussion