🖋️

Github Codespaces でZennの執筆環境を整える

2024/01/24に公開

GitHub

Zenn

tech

Zennの記事編集はブラウザから行うこともできますが、をGithubと連携させることにより記事をGitで管理できるようになります。

Gitとの連携方法については以下に書かれています。

Githubと連携した際には、Github Codespacesで編集できるように設定しておくと便利です。
この記事では私が行なっている設定について記載します。

Github Codespacesを使うメリット

Github Codespacesとは

Githubに登録してあるコードをブラウザ上で編集する機能のことです。ブラウザ上でVisual Studio Code相当のエディタが立ちあがります。Visual Studio Codeの各種エクステンションが使えたり、テストの実行やTermninalからの操作など、ほぼローカルのVisual Studio Codeと同様の開発が行えます。

毎月60時間分の無料枠があり、無料枠内で使えば料金の請求はありません。とても便利で太っ腹な機能なので使わない手はありません。

ZennをGithub Codespacesで利用するメリット

Zenn標準のブラウザ編集と比べると

Gitを使用した記事の履歴管理ができる
VisualStudioCodeの高機能なエディタやエクステンションによる編集補助が使用できる

という従来のGithub連携のメリットに加え、ブラウザから編集できるため、

面倒な環境構築が不要で、ブラウザさえあれば執筆ができる。iPadでも可能。
出先でノートPCで執筆した後、家に帰ってから続きをデスクトップPCで執筆、といったことができる。

というようなメリットがあります。

設定方法

Githubとの連携自体はここでは解説しません。既に連携済みという前提で説明します。

ディレクトリ構成

Githubのリポジトリ内は以下のような構成になります。


|-- .devcontainer    # Github Codespacesの環境設定ファイルを置くフォルダ
|   |-- Dockerfile
|   `-- devcontainer.json
|-- .gitignore
|-- .markdownlint-cli2.jsonc   # Markdown Lintの設定
|-- .textlintrc.json   # Text Lintの設定
|-- articles/   # 記事を格納するフォルダ
|-- books/   # 本を格納するフォルダ
|-- package-lock.json
`-- package.json

.devcontainer

.devcontainerディレクトリ配下には以下の２つのファイルを置きます。

Dockerfile
devcontainer.json

Github CodespacesのWorkspaceはコンテナ上に展開されます。Dockerfileはそのコンテナの作成方法を定義しています。

Dockerfile

FROM node:20

# Install basic development tools
RUN apt update && apt install -y less man-db sudo git-flow

# Ensure default `node` user has access to `sudo`
ARG USERNAME=node
RUN echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME \
    && chmod 0440 /etc/sudoers.d/$USERNAME

# Set `DEVCONTAINER` environment variable to help with orientation
ENV DEVCONTAINER=true

devcontainer.jsonにはCodespace作成に関する全般的な設定を記載します。postCreateCommandはコンテナ作成後に実行するコマンドを書きます。ここではnpmパッケージのインストールを行なっています。
extensionsにはこのCodespaceで使用するvscodeのエクステンションのリストを記載しています。

devcontainer.json

// See https://containers.dev/implementors/json_reference/ for configuration reference
{
 "name": "Zenn",
 "build": {
  "dockerfile": "Dockerfile"
 },
 "postCreateCommand": "npm install",
 "remoteUser": "node",
 "customizations": {
  "vscode": {
   "extensions": [
    "ms-azuretools.vscode-docker",
    "donjayamanne.git-extension-pack",
    "yzhang.markdown-all-in-one",
    "taichi.vscode-textlint",
    "DavidAnson.vscode-markdownlint"
   ]
  }
 },
 "features": {
  "ghcr.io/wxw-matt/devcontainer-features/command_runner:0": {}
 }
}

node関連

package.jsonにはzenn関連パッケージに加えてtextlint, markdownlintパッケージを入れています。

package.json

{
  "name": "zenn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "zenn-cli": "^0.1.151"
  },
  "devDependencies": {
    "markdownlint-cli2": "^0.12.1",
    "textlint": "^13.4.1",
    "textlint-rule-preset-ja-spacing": "^2.3.0",
    "textlint-rule-preset-ja-technical-writing": "^10.0.1",
    "textlint-rule-spellcheck-tech-word": "^5.0.0"
  }
}

markdownlintの設定

設定は好みで変えてください。

.markdownlint-cli2.jsonc

{
  "config": {
    "no-bare-urls": false,
    "single-h1": false
  }
}

以下のページを参考にしました。

textlintの設定

設定は好みで変えてください。

.textlintrc.json

{
  "plugins": {},
  "filters": {},
  "rules": {
    "preset-ja-spacing": true,
    "preset-ja-technical-writing": {
      "ja-no-successive-word": {
        "allowOnomatopee": true
      }
    },
    "spellcheck-tech-word": true
  }
}

以下のページを参考にしました。

使い方

Githubの<>Code プルダウンメニューからCodespacesタブを開き、Codespaceを作成します。

Codespace作成

するとCodespaceの作成が始まります。

作成中

作成が完了すると以下のようなVSCodeっぽい画面が表示されます。

あとはVSCodeと同じように記事の編集が可能となります。