Zenn
🌱

ローカルでZennの記事を書いて公開(デプロイ)してみた（GitHub）

2024/03/16に公開
Git
Zenn
tech

Zenn の記事を Git 管理しながらローカルで作成することができたので試しにやってみました。

事前準備

① Zenn と Github の記事管理リポジトリを連携する

② ローカルでプレビューしながら記事を書くため Zenn CLI をインストール

ZennCLI で何ができるか見てみる

ZennCLI の help を見てみると以下のことができるそうです

% npx zenn --help

Command:
  zenn init           コンテンツ管理用のディレクトリを作成. 初回のみ実行
  zenn preview        コンテンツをブラウザでプレビュー
  zenn new:article    新しい記事を追加
  zenn new:book       新しい本を追加
  zenn list:articles  記事の一覧を表示
  zenn list:books     本の一覧を表示
  zenn --version, -v  zenn-cliのバージョンを表示
  zenn --help, -h     ヘルプ

  👇  詳細
  https://zenn.dev/zenn/articles/zenn-cli-guide

基本的に以下の流れで記事を書く感じですね。

  1. $ npx zenn previewでローカルの Zenn Editor を起動
  2. $ npx zenn new:articleで記事を作成
  3. article/配下に作成された記事ファイル(.md)を修正して記事を作成していく
※ちなみに`$ npm zenn init`をした後にはこちらのディレクトリ構成になりました。
.
├── README.md
├── articles
├── books
├── node_modules
│   └── zenn-cli
│       ├── LICENSE
│       ├── README.md
│       ├── dist
│       │   ├── client
│       │   │   ├── assets
│       │   │   │   ├── index-18fe6561.css
│       │   │   │   ├── index-24296a7f.js
│       │   │   │   └── index-d37fd9d5.js
│       │   │   ├── favicon.png
│       │   │   ├── index.html
│       │   │   ├── logo.svg
│       │   │   └── static-images
│       │   │       ├── book-cover.png
│       │   │       ├── copy-icon.svg
│       │   │       ├── folder-close.svg
│       │   │       └── folder-open.svg
│       │   └── server
│       │       ├── zenn.js
│       │       └── zenn.js.LICENSE.txt
│       └── package.json
├── package-lock.json
└── package.json

実際に記事を書いて公開してみる

実際にローカルで記事を書いて公開までやってみる。

1. ローカルエディタを起動

まず$ npx zenn previewでローカルの Zenn Editor を起動します。
http://localhost:8000/にアクセスすると Zenn Editor を見ることができました。

2. 記事作成

$ npx zenn new:articleで記事を作成します。
article/配下に.mdファイル作成されるので、プレビューで見ながら記事を書いていきます。

記事を作成したタイミングで.mdファイル上部に以下の入力欄も自動で作成されるので、ここにタイトルやトピックの内容を入力します。

---
title: ""
emoji: "📘"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: []
published: false
---

3.記事のデプロイ

記事が作成できたら差分を commit して push します。
Zenn の GitHub 連携ページで確認するとデプロイできてました。

あとはこちらの記事を公開したら ok です。
※published: trueにしてデプロイすることでも公開できます。

所感

実際にローカルで記事を書いてみて思ったのは、
・Zenn の記事投稿から直接書いた方が早く書ける（個人的な感想）
・記事に添付する画像も相対パスを指定しないといけない
など若干の煩わしさはあったので、人によるかなという感じです。

ですが Git で管理することで、
・記事の修正履歴が残る
・GitHub に草を生やすことができる
・お気に入りのエディタで記事を書ける
・エディタの拡張機能を利用できる（自動フォーマットなど）
などメリットもありそうなので、そういった面ではいいのかなと思いました。

自分はしばらくはローカルで記事を書いてみようかなと思ってます。

参考

Discussion