😽

Zennの記事をmacOS環境のVSCodeで書き、(既存記事も含め)GitHubで管理する

2023/02/19に公開

GitHub

VS Code

Zenn

tech

タイトルの通りの環境を整えるためにやったことを記録しておく @ 2023-02-19
基本的には、世の中にある記事の集約です。

TL;DR

zenn の設定と export 機能で記事の管理を GitHub に移せる
Zenn CLI を setup する
VSCode に ZennEditor と Presto Image を入れて編集環境を手軽にする

記事管理の GitHub 化

リポジトリの作成と連携

まず最初に、GitHub のリポジトリを作成し、Zenn と連携する。
公式の記事があるのでそちらを参照

既存記事の追加

repo 作成完了後、記事を export してリポジトリに追加する

ダウンロードした記事を、それぞれ同名のディレクトリに配置する
現状、Slug を任意に変更することはできないので、そのままの名前で置いて、push する

以上で、記事の GitHub 移行は完了。
以後は GitHub の main ブランチに published 設定で push すれば記事が反映される。

Zenn CLI のインストール

ほぼこの通り

一応 zenn-cli を repo で使うように、package に追加して Push しておく。

VSCode 環境のセットアップ

VSCode の Install はここでは割愛

VSCode の　 workspace を作る

メニューから File > Save Workspace As.. を選び、*.code-workspace として.vscodeディレクトリに保存する

Paste Image のインストールと設定

画像の貼り付けが楽になるので、Paste Image を入れる

設定はこの記事を参考にしつつ、

自分の workspace の環境に合わせて code-workspace を以下のように修正した

{
  "folders": [
    {
      "path": ".."
    }
  ],
  "settings": {
    "pasteImage.defaultName": "YYYYMMDDHHmmss",
    "pasteImage.basePath": "${projectRoot}",
    "pasteImage.path": "${projectRoot}/images/${currentFileNameWithoutExt}",
    "pasteImage.prefix": "/",
    "pasteImage.showFilePathConfirmInputBox": true,
    "pasteImage.filePathConfirmInputBoxMode": "onlyName"
  }
}

Zenn Editor のインストール

Zenn Editor の作者の方の記事

これを入れて記事を作成すると、適当な slug をつけて生成されるので適当に rename して作る
(このあたりは柔軟になるといいなという気持ち)

以上で、Push すると出来上がり。