こんにちは！私はぶんぶんです。 今日は、私が実際に使っているZennとGitHubの連携方法について、みなさんに紹介したいと思います。
なぜ私がこの連携を使うのか？#
私も最初はZennのWebエディターで記事を書いていました。でも、いくつか困ることがありました：
- コードを書くのが大変
- 記事の変更履歴が分からない
- 記事の見た目を確認できない
- 複数の記事を同時に書けない
でも、GitHubと連携することで、これらの問題が全部解決できました！
私が感じている連携の良いところ#
1. 自分の好きなエディターで書ける#
- 私はVS CodeやXcodeを使って書いています
- コードの色分けがきれいに表示される
- 自分で設定したショートカットが使える
2. 記事の変更が分かる#
- Gitで記事の変更履歴が見える
- 下書きを別のブランチで管理できる
- 間違えた時は前の状態に戻せる
3. 記事の見た目をすぐ確認できる#
- ローカルで記事の見た目を確認できる
- 書きながら見た目をチェックできる
- 公開する前に最終確認ができる
4. 自動で公開される#
- GitHubにプッシュするだけでZennに反映される
- 手動でアップロードする必要がない
- 記事を書く流れがスムーズになる
私が実際にやった設定手順#
1. GitHubでリポジトリを作る#
まず、GitHubで新しいリポジトリを作りました。私は zenn.dev という名前で作りました。みなさんも分かりやすい名前で作ってください。
# ローカルでリポジトリを初期化
git init
git remote add origin https://github.com/your-username/zenn.dev.git
2. Zennで連携設定をする#
- Zennダッシュボードに行く
- 「GitHubからのデプロイ」を選ぶ
- 「リポジトリを連携」をクリック
- 作ったリポジトリを選ぶ（重要: 「Only select repositories」にチェック）
3. Zenn CLIをインストールする#
私はグローバルインストールをしました：
# グローバルインストール
npm install -g zenn-cli
# または、プロジェクトローカルにインストール
npm install zenn-cli --save-dev
4. プロジェクトを初期化する#
# プロジェクトディレクトリで実行
zenn init
# 必要なディレクトリが作られます
# articles/ - 記事用ディレクトリ
# books/ - 本用ディレクトリ
# .zenn/ - 設定ファイル
5. 記事を作ってプレビューする#
# 新しい記事を作る
zenn new:article
# ローカルプレビューを始める
zenn preview
# http://localhost:8000 でプレビューできます
私の実際の使い方とコツ#
私の記事の書き方#
- 記事のアイデアを思いついたら → すぐに
zenn new:articleでファイルを作る - 下書きを書く →
published: falseで草稿として保存 - ローカルでプレビュー →
zenn previewで見た目を確認 - 完成したら →
published: trueに変更してプッシュ
私がよく使うコマンド#
# 記事を作る（対話式）
zenn new:article
# 本を作る
zenn new:book
# プレビューを始める
zenn preview
# ヘルプを見る
zenn --help
私が困ったことと解決方法#
- Slugの重複: 同じslugの記事が既にあるとエラーになります。私はファイル名を変えて解決しました
- Frontmatterの記述: YAMLの書き方が間違っているとデプロイに失敗します。私はコピペで解決しています
- 画像の配置: 画像は
publicディレクトリに置く必要があります
まとめ#
GitHubと連携することで、私の技術記事の書き方がとても楽になりました。自分の好きなエディターで書けて、変更履歴も分かって、自動で公開されるので、記事を書くのが楽しくなりました。
みなさんもぜひ試してみてください！分からないことがあったら、コメントで気軽に聞いてくださいね。
参考リンク