ブログを作りたい
なんで?
WEB開発技術維持のため、継続して開発する何かが欲しい
WEB技術の研究に、重すぎずちょうどよい規模のシステム
コーディングとデプロイメントとオペレーション全部実験できる
devops
書くことある?
ない。
使いたい技術
言語
Elixir
TypeScript
Go
技術
gRPC
GraphQL
WebTransport
PWA
AMP
CDN
Docker
monorepo
インフラ
フロントエンド
Gatsbyでよくね→Gatsby Hostingでよくね→名前入力が姓名で1サイトホスティングのみ→Vercelにしよっか
バックエンド
フロントエンドがGatsbyならGraphQLサーバーを好きに作ったらいいのでなんでもいい
ビルド時点で静的ファイル生成してしまうならバックエンドすらいらない
モノレポどうやって作るのがいいのかな。まあプロジェクトごとに言語違うので適当にフォルダ切っちゃえばいいか。
gatsbyが中で動くDocker Imageをビルドするプロジェクトだった。目的が違う。Vercelはイメージのデプロイに対応してない。
Docker Imageはnode:lts-bullseyeにした。Debianの現行バージョンのコードネームbullseyeなんだ。
WSL上のDockerコンテナ内でファイルを作成すると、所有者がコンテナのrootになってしまってホストでファイルを編集できない。
WSLのuid,gidが1000,1000なので、下記のようにコンテナ内に同じuid,gidのユーザーを作って同ユーザーに見せかけるようにした。
code:Dockerfile
FROM node:lts-bullseye
ENV USER gatsbty
ENV USER_ID 1000
ENV GROUP_ID 1000
ENV APP_DIR /var/opt/app
ENV PORT 8000
WORKDIR ${APP_DIR}
RUN set -x && \
: "ユーザーを作成" && \
useradd -s /bin/bash -d ${APP_DIR} -u ${USER_ID} -o ${USER} && \
: "グループIDの修正" && \
groupmod -g ${GROUP_ID} -o ${USER} && \
: "アプリディレクトリの所有者を変更" && \
chown -R ${USER}:${USER} ${APP_DIR}
RUN npm install -g gatsby-cli
USER ${USER}
EXPOSE ${PORT}
あとはdocker-compose.ymlをいい感じに書いてdocker-compose run --rm gatsby gatsby new.
Vercelと連携してgit pushでc18t.netに公開されるようにした。 開発
編集環境について
ブログを執筆するシステムについて考える。
単純にVSCodeでmarkdownを書いてもいいのだけど、VSCodeは単純にエディタであるから編集環境としては全く機能が揃っていない。
例えば、はてなブログを例に上げると下記のような機能がある。
リッチエディタ
文字の装飾
WYSIWYG
画像アップロード
カテゴリ、タグ
下書き
下書きの共有
その場編集
アイキャッチ画像設定
予約投稿
記事概要の設定
その他メタデータの設定
各種埋め込み
アフィリエイト
画像
動画
その他サービス
過去記事
その場でお絵かき
他には文書エディタになるがGoogleドキュメントなども同様の機能を有している。
はてなブログもGoogleドキュメントもWebアプリケーションであるから、デバイスを選ばないというのも良い。
いっそエディタだけ他のWebアプリに乗っかりたいが記事データのホスティングは自前でやりたいという願望を叶えるのが難しい。
記事データを所有する
優れたオーサリングツールである
権限管理ができる
記事単位でデータが一つのファイルに完結する形式である
任意の場所から利用できるアプリケーションである
以上の点から見て、Googleドキュメントで記事を書くのが非常に冴えたやり方であることは間違いがなさそうだが、うっかり変な下書きを作るとGoogleアカウントごと吹き飛ばしてきそうで、Googleドキュメントでブログの記事を書くのに内心若干の躊躇がある。ただ、普段から写真を取ったら自動的にGoogleドライブにアップロードしてしまっているのだから、アカウント消失の危険性については今更か。
他に良いmarkdownエディタとしては、GitHubのWeb上のエディタが思いつく。クリップボードから画像をアップロードできるし便利だと思うが、上げた画像はリポジトリで管理されているわけではないうえ、消すにはGitHubにお願いしないといけないだろうから大変。すべてのリンクを消せばそのうちリンク切れをチェックして消してくれるだろうけど、いつになるかわからないものを祈って待つしかない。
それに、GitHub上での作業は保存=コミットなので下書き状態を作れない。リポジトリ単位でprivateかpublicになる。
Googleドキュメントでいいのでは
なんかもうGoogleドキュメントで良くない?markdownで記事が書けない以外は全てクリアしてるのでは。
いや意味論で文章構造を記述できないのはやっぱり厳しそうだ。ここは引用とかここはコードとか。
そうするとGoogleドキュメントに直接markdownを書くことになるけど、シンタックスハイライトがないと書くのがしんどい。
窓の杜の記事によればmarkdown記法に対応していくとのことなので今後に期待?
vscode.dev
編集環境の面でも開発目的の面でもGoogleドキュメントで完結するにはちょっと物足りなさがあるので、別のエディタを考える。
VSCodeであれば拡張機能をいくつか用意すれば欲しい機能は揃うだろうが、拡張した環境でしかブログを書けないという状況は残る。そこでWebブラウザ上で動作するvscode.devはどうだろう。ブラウザで動作するように拡張機能を作成すればいい。 画像をどこにアップロードするかの問題は残るが、ブラウザ拡張からGoogleドライブに上げらないだろうか。Gyazoでいいかも。
vscode.dev いいかもしれない。
headless CMS
コンテンツの管理はやっぱりだるいなということを考えてしまい、CMSが欲しくなってしまった。
そういえばフロントエンドに選んだGatsbyと連携できるheadless CMSがあったなと思い唐突にGraphCMSを始めてみる。