ChromebookとZenn CLIで記事を書く方法を紹介します。
※この記事はまだ未解決の問題を残しています。
準備 その1 GitHub連携
ZennとGitHubを連携させておきます。
ZennとGitHubを連携させる方法 - Qiita https://qiita.com/akiba_burari/items/2423d284bab666e01f45
GitHubにZennの共有リポジトリを作り、アドレスをメモしておきます。
準備 その2 Zenn CLIインストール
ChromebookにZenn CLIをインストールしておきます。
ChromebookにZenn CLIをインストールする方法 - Qiita https://qiita.com/akiba_burari/items/23b1b3668279618089b5
準備 その3 ディレクトリを確認
Zenn CLIで記事を書く前に、Zenn CLIのフォルダ（ディレクトリ）を確認しておきます。
作成する記事はarticles内に保存します。
.
└─ articles
├── example-article1.md
└── example-article2.md
記事ファイルを作成する
ターミナルから「zenn」ディレクトリ（※Zennのファイルがすべて入っているディレクトリ）に移動します。
cd zenn
以下のコマンドでmarkdownファイルを作成します。実行すると、articles/ランダムなslug.mdというファイルが作成されます。
$ npx zenn new:article
例：articles/4e63b5fc8e6a2b.md
作成したファイルを確認
「articles」ディレクトリに移動し、ファイルがあるかどうか確認します。
cd articles
作成したファイルを確認
ls
ここで先ほど作成したファイル「articles/4e63b5fc8e6a2b.md」が表示されていればOKです。
記事を書くためのエディタを決める
作成したmdファイルを編集するためにエディタが必要になります。
Visual Studio Codeも利用できますが、Chromebookの場合、日本語が記述できません。
Emacsは日本語切り替えができるようですが詳しいことはまだ調べていません。
自分はとりあえずターミナル上で日本語入力できるようにしてあったので、「nano」を使うことにしました。
※インストールコマンド
sudo apt install nano
記事を書く
作成したファイルに記事を書いていきます。
以下、「articles」ディレクトリに移動してコマンドを入力
＜Visual Studio Codeでファイルを開く＞
code 6b4aed7c6f1051.md
＜Emacsでファイルを開く＞
emacs 6b4aed7c6f1051.md
＜nanoでファイルを開く＞
nano 6b4aed7c6f1051.md
記事の中身
title: "" # 記事のタイトル
emoji: "😸" # アイキャッチとして使われる絵文字（1文字だけ）
type: "tech" # tech: 技術記事 / idea: アイデア記事
topics: [] # タグ。["markdown", "rust", "aws"]のように指定する
published: true # 公開設定（falseにすると下書き）
ここから本文を書く
プレビューする
記事をプレビューするには、
記事を開いたまま、新しいタブを開き、
ターミナル上でコマンドを実行します。
$ npx zenn preview #プレビュー開始
ブラウザが自動で立ち上がるはずですが、
Chromebookでは自動でブラウザが立ち上がりません。
そこであらかじめChromeブラウザを自分で開いておき、
localhost:8000
とブラウザのバーに直接入力しておきます。
プレビューのコマンドを入力してから、しばらくすると、
プレビューが表示されます。
未解決の問題
プレビューは一応表示されるのですが、
記事の内容が全く表示されません。
ターミナル上（※プレビューらしきものが表示されている）では「タイトル名」だけ表示されているのが確認できます。
Chromeブラウザ上で「Zenn CLI」の画面が表示されるものの、
トップ画面だけで、自分の記事は表示されません。
この問題はまだ未解決で、今のところどうしていいか分かりません。
分かり次第、記事を修正する予定です。
記事を保存して閉じる
最後に記事を保存して閉じます。
nanoの場合は、
ctl + O #保存
ctl + X #閉じる
で記事を保存し、ターミナルに戻ることができます。
参考サイト 一覧
Zenn CLIで記事・本を管理する方法 https://zenn.dev/zenn/articles/zenn-cli-guide
ローカルリポジトリをリモートにpushするまで - Qiita https://qiita.com/sayama0402/items/9afbb519d97327b9f05c
コマンドラインからVS Codeでファイルやフォルダを開く - Qiita https://qiita.com/1natsu172/items/b951aa33451dad36bd7c