Zenn
👶

Zennの記事の執筆をローカル環境へ移行しました

2021/04/26に公開
GitHub
Zenn
tech

はじめに

ご覧いただきありがとうございます。mocです。

今回は、zennの記事をローカル環境で執筆できるようにすべく、githubとの連携をやってみたので、やったことをまとめていきます。

今回の内容

公式から設定手順とかはわかりやすく公開されてるので、基本的にはこれの通りにやれば、問題ありません。
（つまづくところなかったので、公式神だなとしみじみ感じました。）

具体的に参考にしたのはこの３記事です。

https://zenn.dev/zenn/articles/connect-to-github

https://zenn.dev/zenn/articles/install-zenn-cli

https://zenn.dev/zenn/articles/zenn-cli-guide

これだけでも十分わかりやすいから、この記事必要ないのでは？とか思ったりもしましたが、アウトプットの特訓と思って、できるだけわかりやすく書いていければと思います。

少しだけ使いやすいようにアレンジも加えてみたので、参考になれば嬉しいです。

それでは、はじめていきます。

Githubリポジトリを作成

まずは、zennと連携するためのリポジトリを作成します。

  1. githubのリポジトリのページを開いて、Newをクリックします。

  2. リポジトリの名前を入力し、Create repositoryをクリックします。（今回は、zenn-repoとしました。）

  3. リポジトリの作成完了！
    リポジトリのURLは後で使うので、メモしておきましょう。
    ここでは、git@github.com:ytskmt14/zenn-repo.gitをメモしておきます。
    sshの設定をしていない方は、HTTPSを選択して、表示されるURLをメモしましょう。

Zennとgithubを連携する

次に、Zennとgithubの連携の設定をしていきます。

  1. Zennを開いて、ヘッダーの自分のアイコンをクリックして、GitHubからのデプロイを選択します。

  2. リポジトリを連携するボタンをクリックします。

  3. 連携設定の画面が開くので、Only select repositoriesを選択し、プルダウンから先ほど作成した、githubのリポジトリを選択して、Install & Authorizeをクリックします。（今回の場合は、zenn-repoを選択します。）

  4. これで連携が完了しました！

ローカル環境構築

ローカル環境で、記事を執筆するための準備をしていきます。
私は、エディタにVScodeを利用しています。

  1. Zennのリポジトリをclone
    リポジトリを作成したときにメモしておいたURLをここで使います。
$ git clone git@github.com:ytskmt14/zenn-repo.git
Cloning into 'zenn-repo'...
warning: You appear to have cloned an empty repository.
  1. npmの初期化
$ npm init --yes
Wrote to /Users/moc/workspace/zenn-repo/package.json:

{
  "name": "zenn-repo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ytskmt14/zenn-repo.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ytskmt14/zenn-repo/issues"
  },
  "homepage": "https://github.com/ytskmt14/zenn-repo#readme"
}
  1. Zenn-cliの導入
$ npm install zenn-cli
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@2.1.3: "Please update to latest v2.3 or v2.2"

added 860 packages, and audited 861 packages in 24s

44 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
  1. zenn用のセットアップ
$ npx zenn init
Generating .gitignore skipped.

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

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

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

  👇表示をプレビューする
  $ zenn preview

これでローカル環境構築は完了です！

  1. ディレクトリ構成
    現時点でのディレクトリ構成はこんな感じになっています。

既存の記事を移行する

私は、この作業をする時点で、2つ記事を書いていたので、それを移行していきます。

  1. 既存記事のファイル名と内容を取得する
    マイページのArticlesを開くと、記事の下にグレーの文字で、~.mdとファイル名が表示されているのでそれをメモします。
    私の場合、88c7535ecbee13.mdと0639685e1de33f.mdの２つです。

また、ファイルの内容は、記事のリストの右側の編集アイコンの右隣にあるアイコンをクリックして、内容をmarkdownで出力をクリックすることで取得できます。
別タブで開かれるので、開いたままにしておきましょう。

  1. 取得したファイルをローカル環境に移行する
    今回は、記事（article）の移行なので、articles配下にファイルを作成していきます。
$ pwd
/Users/moc/workspace/zenn-repo
# 先ほど確認した記事のファイル名と同じファイル名のファイルを作成する
$ touch articles/88c7535ecbee13.md articles/0639685e1de33f.md

あとは、それぞれのファイルに別タブで開いておいたファイルの内容をコピペするだけです。

プレビューで確認する

zenn-cliを使うと、実際の表示をプレビューで確認しながら執筆できます。
ホットリロードも対応しているので、保存したらすぐに反映されるのでとっても便利です。

プレビューで確認するためには下記のコマンドを利用します。

$ npx zenn preview
👀 Preview on http://localhost:8000

そしてブラウザで http://localhost:8000 を開いてみると、、、

うまく表示されました！

記事ファイルの作成

zenn-cliでは、プレビュー以外にも、記事ファイルの作成用のコマンドも用意されています。

$ npx zenn new:article

便利ですね！

ここで少しアレンジ

今のままでも十分に便利なのですが、めんどくさがりな私はこう思いました。

  1. プレビューするのにコマンド叩くのめんどくさい
  2. 記事を書き始めるのもコマンド叩くのめんどくさい

これを解消していきます。

プレビューするのにコマンド叩くのめんどくさい

プレビューするのに必要なコマンドは、

$ npx zenn preview

でしたね。

これすらめんどくさいので、package.jsonにスクリプトを追加します。

package.json
 {
   "name": "zenn-repo",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "preview": "npx zenn preview",
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ytskmt14/zenn-repo.git"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/ytskmt14/zenn-repo/issues"
   },
   "homepage": "https://github.com/ytskmt14/zenn-repo#readme",
   "dependencies": {
     "zenn-cli": "^0.1.79"
   }
 }

こうすることで、VScodeのnpmスクリプトから実行できるようになります。
previewの一番右の実行アイコンを押すだけ！
めっちゃ楽、最高です。

package.jsonのscriptsに記載したので、このコマンドでももちろん起動可能です。

$ npm run preview

記事を書き始めるのもコマンド叩くのめんどくさい

これもプレビューのときと同じで、package.jsonにスクリプトを追加します。
それに加えて、自分なりのテンプレートを準備しました。

$ pwd
/Users/moc/workspace/zenn-repo
# テンプレート用のファイルを作成
$ mkdir -p articles/template && touch articles/template/template.md

執筆時点では、テンプレートファイルはこんな感じにしています。
今後、必要に応じて更新していく予定です。

template.md
---
title: "My Article Title" # 記事のタイトル
emoji: "👶" # アイキャッチとして使われる絵文字（1文字だけ）
type: "tech" # tech: 技術記事 / idea: アイデア
topics: ["my-topics"] # トピックス（タグ）["markdown", "rust", "aws"]のように指定する
published: true # 公開設定（falseにすると下書き）
---

# はじめに
ご覧いただきありがとうございます。mocです。

# 今回の内容

# まとめ

あとは、このテンプレートのファイルをgitの管理対象外とするために、.gitignoreを下記のように編集します。

.gitignore
node_modules
articles/template

最後に、package.jsonを下記のように編集します。

package.json
 {
   "name": "zenn-repo",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "preview": "npx zenn preview",
+    "create": "cp ./articles/template/template.md ./articles/xxx.md"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ytskmt14/zenn-repo.git"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/ytskmt14/zenn-repo/issues"
   },
   "homepage": "https://github.com/ytskmt14/zenn-repo#readme",
   "dependencies": {
     "zenn-cli": "^0.1.79"
   }
 }

これも同様に、VScodeのnpmスクリプトから実行可能になりました。

記事を公開するには

執筆し終わったら、githubにpushする必要があります。

$ git add .
$ git commit -m "任意のコミットメッセージ"
$ git push

まとめ

今回は、zennの記事を執筆用のローカル環境を準備、及び既存の記事の移行をする方法を自分なりにまとめてみました。

使っていく中で、よりやりやすい方法を探して、また更新していこうと思います。

GitHubで編集を提案

Discussion