ChromebookだけでGitHubからZennに投稿
前提
みなさんご存知の通りZennの記事は GitHub + Zenn CLI で執筆できます。
一般的な設定手順はざっくりいうと（後述する公式記事に載っていますが）
- [web] ZennのアカとGitHubの投稿用リポジトリを紐づけておく
- [local] （node.jsがなければ入れてから）Zenn CLIをインストール
- [local] VSCodeなりで記事を書く。Zenn CLIのコマンドでプレビューなどができる
- [local] 書き終わったら投稿用ブランチにPush!
という感じです。
git管理したいけどLocal環境なんて作りたくない！！
僕は趣味でコード書いたりする種族ではないのでいわゆる「パソコン」はプライベートではもう何年も使っていません。基本的にスマホとChromebookで済ませており、Zennの記事を書くのもChromebookで済まそうと思いました。
ChromebookにLinuxを入れるなどLocalを立てる手段はたぶんありますが、面倒なのでWEB上で完結させたくなります。
GitHub Codespacesを使ったら無料&楽勝でWEB完結できた
こちらの記事などを参考にいい感じのクラウドIDEや実行環境があれば頑張るか、と思いましたが。。
GitHub謹製のやつあったじゃん！
ということで本記事ではCodespacesを使ったZenn投稿環境構築について書いてきます。
すべての操作がブラウザ上で何事もなく終わりました。
Codespacesとは？
ざっくりいうとGitHubが提供する仮想マシン＋コードエディタです（エディタはデフォルトだとVSCode）。
クラウド上の環境で自分のリポジトリをこねこねできるやつです。
Localでも動作できるようですが今回はあくまでクラウドオンリーの内容で紹介します。
構築手順（爆速）
手順といってもこちらのクイックスタートとZennの公式手順を見ながらぽちぽちするだけ。
1. ZennとGitHubの連携を済ませておく
公式手順通りなのでここは略。
2. GitHubからCodespacesを開始
リポジトリのCodeタブで
「Code」 > 「Codespaces」 > 「Create codespace~」を押すと勝手に起動してくれます。
初回起動時は諸々の設定が走るのでちょっとだけ待ちます。
なお、リポジトリにファイルがなにもないとそもそもCodeボタンが出ないようです。その場合はREADME.mdでも作っておきましょう。
以後、ブラウザ上で動作するVSCodeを使って公式手順をなぞるだけですが一応書いておきます。
（VSCode側の操作方法は略）
3. Codespaces上でZenn CLIをインストール
公式インストール手順の内容をターミナルタブで実行します。
（Node.jsは最初から入ってました）
ここまで終わった段階で一回Pushしておくといいかもです。
4. 記事を書いてプレビュー
公式管理手順通りに。
ターミナルでnpx zenn new:articleを打って、
自動作成された記事ページのファイルを書いて、
ターミナルでnpx zenn previewを打って
ブラウザの別タブで開かれたプレビュー確認して、
また記事ファイルを更新して、、、
とするだけです。
プレビューコマンド時に確認ポップアップが出たら「ブラウザーで開く」を押す
5. 投稿！
書き終わったら変更を保存してgit pushします。
事前に連携設定してあるので、ブランチ反映が終われば自動的にZennに投稿されます。
おしまい
やってみたらあまりに簡単に設定が終わってしまい拍子抜けしました。便利な世の中になったものですね。。
今回はChromebookでの記事でしたが、単にブラウザ完結できるという内容なのでタブレットやスペックが低めのPCの場合にも流用できるかもしれません。
おまけ：Codespacesの無料範囲
CodespacesはVM起動時間などで課金が発生しますが、記事執筆時点では無料枠だけでも最大で60時間/月の起動ができそうです。
たまに記事を書くだけならかなり余裕ありそうですね。
料金ページ
実際のVMスペック（https://github.com/codespaces で確認できます）
Codespacesの詳細はこちらをご覧ください。
Discussion