Zenn
🙆

Zenn×GitHub連携を試す(Yarn版)

2020/11/21に公開
yarn
tech

元々技術記事の公開はブログサービスを通じて行っていましたが、
以下の点に課題を感じていました。

  • バージョン管理ができない
  • サービスへのロックイン
    • 別プラットフォームに移行する場合、手動でコピペを繰り返す必要がある

よって、Hugoなどの静的サイトジェネレーターでブログを作成し、
VercelやNetlifyなどの静的ホスティングサービスでホストしようかとも考えていたのですが、
今度はドメイン管理やSEOといったブログサービスが担ってくれていたことを自分で行う必要があるため、
二の足を踏んでいました。

そんな中、ZennがGitHubとの連携ができると知り、良いとこ取りをできるのではないかと考えたため、
今回そちらを検証していくことにしました。

※やり方自体は公式ドキュメントに非常にわかりやすくまとまっている為、今回は備忘録としてまとめています。

検証環境

  • MacOS Catalina
  • Yarn: 1.22.4

手順

GitHubとの連携設定

  • GitHubの新規リポジトリを作成
  • Zennにログイン
  • 右上のアイコン -> 記事の管理 -> Deploys -> リポジトリを連携 を選択
  • <Only select repositories>にチェックを入れて、先ほど作成した新規リポジトリを選択
    • 公式ドキュメントによると、複数リポジトリにチェックが入っている場合は連携を失敗させる仕様としているらしい
  • Install & Authorizeを選択
  • パスワードを入力
  • 認証に成功すると、元のDeploys画面に戻り、連携リポジトリが表示される
    • デフォルトの同期ブランチはmain
    • 同期ブランチを変更したい場合はDeploysページで変更可能

Zenn CLIのインストール設定

  • 新規ディレクトリを作成
    • ディレクトリ名はなんでも
$ mkdir tips && cd $_
  • 初回コミット
$ echo "# tips" >> README.md
$ git init
$ git add README.md
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin https://github.com/gosarami/tips.git
$ git push -u origin main
  • Yarn初期化
$ yarn init -y
yarn init v1.22.4
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.02s.
  • Zenn CLIのインストール
$ yarn add zenn-cli
info No lockfile found.
[1/4] 🔍  Resolving packages...
...
└─ zenn-markdown-html@0.1.56-alpha.0
✨  Done in 22.90s.
  • Zenn初期化
    • このタイミングで記事を保管するarticlesディレクトリと本を保管するbooksディレクトリが作成される
$ yarn -s run zenn init
Generating README.md skipped.

  🎉Done!
  早速コンテンツを作成しましょう

  👇新しい記事を作成する
  $ zenn new:article

  👇新しい本を作成する
  $ zenn new:book

  👇表示をプレビューする
  $ zenn preview
  • Zennのプレビュー画面の表示
    • localhost:8000を確認し、プレビュー画面が表示されればOK
$ yarn -s run zenn preview
👀Preview on http://localhost:8000
  • Zennの記事の新規作成
    • ランダムでSlug IDが振られたMarkdownファイルがarticlesディレクトリ内に作成される
$ yarn -s run zenn new:article
📄878ee28dfc6eb3f06833.md created.
$ ll articles 
total 8
-rw-r--r--  1 ryoichi  staff  115 11 21 02:33 878ee28dfc6eb3f06833.md
  • 新規作成されたドキュメントを編集
    • ヘッダーは適宜変更
    • 先ほど立ち上げたプレビュー画面を見ると、記事がホットリロードされるのでサクサク書ける(めっちゃ良い)
---
title: "Zenn×GitHub連携を試す(Yarn編)"
emoji: "🙆" # 記事のアイキャッチになる絵文字
type: "tech" # tech: 技術記事 / idea: アイデア
topics: ["yarn"] # タグのようなもの。["hoge","fuga",...]といった形式で指定
published: false # 下書き状態はfalse、公開状態はtrue
---

xxx〜(ここからMarkdownの本文)
  • 記事を書き終わったら、commitして同期ブランチへpush/merge
    • ヘッダーのpublishedをfalseにしていると下書き状態でデプロイされ、trueにしていると公開状態でデプロイされる
    • プレビュー画面で公開状態を含めたヘッダー情報は確認可
  • 少し待ってから再度Deploysページを確認すると、同期されていることが確認できる

所感

連携で詰まることは特になく、ローカルでのプレビューも非常に快適だったので、
ブログから徐々に移行してみようと思います。

また、少し使ってみて個人的にいくつか気になった点はすでに他の方が質問されていて、
それに対するZenn公式からの見解も見つけたのでメモ書きしておきます。

  • 本文で画像を使う場合

-> Zenn公式の画像アップロードページを使う以外にも、GitHubなどのリンク切れになりにくそうな場所に画像をアップロードしてURLを貼る形でもOK

  • オンラインエディターから直接投稿した既存記事を手元にクローンする方法

-> 現時点(2020/11/21現在)では対応していないのでコピペするしかないが、将来的に対応する可能性有り

Discussion