NavyGiltは、作ったものと技術的な判断を後から振り返るためのサイトです。エンジニアとしての経験を伝える場も兼ねています。

最初に目指したのは、プロフィールと代表作を載せ、記事を書き始められる状態でした。実装にはCodexを使っています。ここでは、構成を絞った理由と、文書の整理から初回公開までに決めたことを残します。

最初に作る範囲を絞る

将来は動くデモや制作物も置く予定ですが、初回公開には含めませんでした。デモ用のサーバーまで管理対象にすると、記事を書き始める前に運用の準備が増えます。まずは文章と実績を公開する部分を整えました。

サイト専用のバックエンドやデータベースは持っていません。費用だけでなく、継続して面倒を見るものを少なくするための選択です。

記事を追加しやすい構成にする

記事とポートフォリオが中心なので、Eleventyで静的HTMLを生成する構成を選びました。本文はMarkdown、レイアウトはテンプレートに分けています。記事を増やすたびにページ全体を組み直さずに済み、主要なページにはJavaScriptなしでも到達できます。

見た目の土台はBootstrapとSassです。色や余白、本文幅は共通の設定へまとめ、白・ネイビー・控えめなゴールドに揃えました。

Decap CMSはMarkdownを編集する画面として導入しました。本文はGitで管理し、編集画面を変えても残せる形にしています。今はローカル環境だけで使い、管理画面と下書きは公開用の出力から除外しています。

実装前に、AIと共有する文書を整理する

画面を作る前に、要件、現在の仕様、過去の構想、未決定事項を分けました。これから試す候補を、採用済みの仕様としてAIに扱わせないためです。

たとえば、独自ドメインや本番用CMSの認証は未決定のまま残しています。文書に空欄があっても、AIに埋めさせる対象ではありません。現行のソースを優先すること、仕様を変えたら文書も更新することは、AI_PROJECT_GUIDELINES.mdに記しました。

Codexには、文書とソースの調査、テンプレートやSassの実装補助、検証スクリプトの整備、変更記録の更新を任せました。

誰に読んでもらうか、何を公開するか、どの技術を採用するかは自分で決めています。トップページのメッセージも同じです。実装を任せる前にこの範囲を決め、後から判断の根拠を追えるようにしました。

初回公開で、Workersの設定画面に入っていた

CloudflareのGit連携を設定するとき、最初はWorkers側の画面に入りました。そこで表示されたのが、Deploy command: npx wrangler deployです。これを見て、Pages用の設定画面ではないと気付きました。

PagesのGit連携へ入り直し、次の設定で初回デプロイしました。

設定項目 入力した値
本番ブランチ main
フレームワークのプリセット Eleventy
ビルドコマンド npm run build
出力ディレクトリ _site

npm run buildにしたのは、Eleventyの実行に加えてSassの生成も必要だったからです。デプロイは成功し、Cloudflare Pages上のNavyGiltを公開できました。独自ドメインはまだ使っていません。

以後の変更は確認用ブランチに送り、Cloudflare Pagesのプレビューをブラウザで見てから、本番への反映を判断します。

公開できたものと、これから決めること

プロフィール、Nestraの制作事例、この記事を載せるところまで進みました。

連絡方法や検索エンジンへの登録方針は、引き続き決める必要があります。デモや制作物の追加もその先です。当面は、この構成で記事と制作記録を増やしていきます。