Qiita Preview

Qiitaへ投稿する前に、生成済みのQiita用Markdownをブラウザで確認するための作業ディレクトリです。README.mdとプレビュー専用のqiita.config.jsonだけをGit管理し、記事のコピーやキャッシュはGit管理しません。

前提

リポジトリルートでnpm installが完了している
npx qiita loginでローカルのQiita CLIへログインしている
ruby scripts/export-qiita.rbでqiita/public/が生成されている

Qiitaのアクセストークンは、このディレクトリやリポジトリへ保存しないでください。Qiita CLIの認証情報は、通常~/.config/qiita-cli/credentials.jsonへ保存されます。

プレビュー手順

リポジトリルートで、Qiita用ファイルをプレビューディレクトリへコピーします。

mkdir -p qiita-preview/public
cp -R qiita/public/. qiita-preview/public/

Qiita Previewを起動します。

npx qiita preview --root qiita-preview --config qiita-preview

プレビュー専用設定では0.0.0.0:8888で待ち受けます。起動後、接続元に応じたURLをブラウザで開きます。

サーバー自身: http://localhost:8888
LAN:          http://192.168.2.94:8888
Tailscale:    http://100.78.247.106:8888

終了するときは、Qiita Previewを起動したターミナルでCtrl+Cを押します。

UFWで接続元を限定する

0.0.0.0はLANとTailscaleの両方で待ち受けるため、プレビューを起動する前にネットワーク情報と既存のUFWルールを確認します。

ip -br -4 address
tailscale status
sudo ufw status numbered

LANは、接続元の192.168.2.95からサーバーの192.168.2.94:8888への通信だけを許可します。最初に--dry-runで内容を確認し、問題がなければ次のコマンドで反映します。

sudo ufw --dry-run allow in on enp2s0 proto tcp \
  from 192.168.2.95 to 192.168.2.94 port 8888 \
  comment 'Qiita Preview LAN'

sudo ufw allow in on enp2s0 proto tcp \
  from 192.168.2.95 to 192.168.2.94 port 8888 \
  comment 'Qiita Preview LAN'

Tailscaleは、tailscale statusで確認したスマートフォンのIPv4アドレスだけを許可します。次の100.x.x.xを実際のスマートフォンのアドレスへ置き換えてください。

sudo ufw --dry-run allow in on tailscale0 proto tcp \
  from 100.x.x.x to 100.78.247.106 port 8888 \
  comment 'Qiita Preview Tailscale'

sudo ufw allow in on tailscale0 proto tcp \
  from 100.x.x.x to 100.78.247.106 port 8888 \
  comment 'Qiita Preview Tailscale'

既存ルールにAnywhere on tailscale0 ALLOW IN AnywhereのようなTailscaleインターフェース全体の許可がある場合、上のスマートフォン限定ルールを追加してもアクセス範囲は狭まりません。その既存ルールがSSHやほかのサービスで使われていないかを確認し、必要ならUFWの見直しとTailscaleのアクセス制御を別途行ってください。既存ルールは影響範囲を確認せずに削除しません。

反映後は、ルールと待ち受け状態を確認します。

sudo ufw status numbered
ss -ltnp | rg ':8888'

sudo ufw allow 8888/tcpのように接続元を限定しないルールは追加しません。また、SSH接続中にUFWが無効だった場合、既存のSSH許可ルールを確認せずにsudo ufw enableを実行しないでください。

確認項目

タイトルとQiitaタグが意図どおりか
表、箇条書き、Mermaid、コードブロックが崩れていないか
画像とリンクが表示できるか
ブログ内リンクがhttps://reotech736.com/...へ変換されているか
記事末尾に個人ブログの案内が追加されているか

記事を修正した場合

正本である_posts/の記事を修正し、Qiita用Markdownを再生成してからコピーし直します。

ruby scripts/export-qiita.rb
mkdir -p qiita-preview/public
cp -R qiita/public/. qiita-preview/public/

qiita-preview/内のMarkdownは直接編集しません。投稿対象としてGit管理するファイルはqiita/public/です。