Web制作の経験ゼロで、柔軟なポートフォリオサイトを0ドルで素早く立ち上げる方法：柔軟性とシンプルさの妥協点

アイデアの誕生と最初の要件

私はモバイルアプリの開発者です。Web開発については表面的な知識しかなく、実務経験もありません。自分のモバイルアプリをようやくGoogle Playでリリースしようという考えが頭を離れなくなったとき、すぐに「自分のすべてのプロジェクトに関する情報を掲載したポートフォリオサイト（紹介サイト）をどう作るか」を考え始めました。その際、最初も将来的にも制作や保守に多大な時間を費やしたくはありませんでしたが、サイトへの要求は決して単純なものではありませんでした。最初から、サイトに何を求めているのかは明確でした。一方で、扱いにくいものを作るつもりもありませんでした。記事の投稿などを簡略化するために、自分で抽象化されたコードを書く覚悟はできていましたが、モジュール付きのCMSやそれに類するソリューションのような、重苦しいものの設定に煩わされたくはなかったのです。

そこで、私が導き出した基準と、なぜそのように定義したのかを説明します。

開発・保守の手間を最小限にしつつ、柔軟にカスタマイズできること： 最初はテンプレートを求めていましたが、システムが許可するものだけでなく、必要に応じて自分で「手を入れて」やりたいことを実現できるものを希望していました。
SEOに配慮した設定： サイトが自分のモバイルアプリへのトラフィックを誘導する役割を果たしてほしいと常に考えていました。
Markdownのサポート： ゼロからコーディングするのは（たとえ各ページをコピペするだけであったとしても）非常に苦痛であるため、自分の考えを形にできる何らかのテンプレートを作成できる必要があると理解していました。
容易な多言語対応： 前述の項目と同様に、トラフィックが目的です。理論的に競合が少ない可能性のある他言語の検索リクエストをカバーしない手はありません。
コストは低ければ低いほど良い： これは絶対的な基準ではありませんでしたが、個人開発者（インディ・デベロッパー）にとっては常に嬉しいボーナスです。

選択肢の調査と、AstroおよびCloudflare Pagesの選択

ここでは具体的に何を試したかについては触れず、手短に述べます。様々な紹介サイト作成サービスやテンプレートジェネレーターを試しました。無料プランは非常に制限されており、SEOの管理ができなかったり、プランを購入しなければどうにもならないことがすぐに分かったりしました。しかし、テンプレートジェネレーターの選択肢を切り捨てた主な理由は、その作成メカニズムに満足できなかったからです。いくつかの選択肢では、基本的なページを作成することさえ直感的ではありませんでした。一部には、私の気分や徹底的に調べるモチベーションが欠けていたせいもあるかもしれませんが、無意識のうちに「Web開発者ではなくこの分野の知識も少ないけれど、AIアシスタントを味方につけて、自分と自分のタスクにとって便利なテンプレート構造の抽象化を試みてはどうだろうか？」という考えがありました。技術的な側面にハマり込んでしまい、解決に時間がかかる不透明な問題にぶつかってモチベーションが消えてしまうのではないか、という懸念はありました（モチベーションを失うことへの恐怖は、多くの人が経験していることだと思います）。

そんなある夜、AIと選択肢について議論しているときに提案されたのが、AstroとCloudflare Pagesの組み合わせでした。

AstroとCloudflare Pagesの組み合わせを試してみて

AIとの対話を通じて、この組み合わせが私の基準を完全に満たしており、それ以上のものであることに気づきました。ボーナスとして得られた主な利点は以下の通りです。

Dockerやプロジェクトのビルド、デプロイの手間が一切ない： Cloudflare PagesにGitリポジトリへのアクセス権を与え、masterブランチにpushすれば、サービス側でビルドとデプロイが行われます。つまり、pushした後は文字通り何もしなくていいのです。
ローカルでの確認： ローカルで行った作業の確認は、文字通りコマンド一つで完了します。確認してテストし、再びpushするだけです。

この組み合わせをテストした結論として、私の要件と目標は達成され、この方向に進み続けることができると確信しました。最初の構造を持つ私のサイトのドラフトは、文字通り一晩で完成しました。

Astroと私の基準

Googleで簡単に手に入るこのフレームワークへの賛辞を繰り返すつもりはありません。Astroが私の個人的な問題をどう解決したかだけを記述します。

最小限の手間と柔軟なカスタマイズ： 急いで作ったサイトのドラフトは、一晩で生成されました。
SEO設定： Astroではデフォルトですべてのページが純粋なHTMLであるため、結果としてすべてのSEOが私の手の中にあります。
Markdownサポート： Astroでの実装は非常に優れています。テンプレートとなるWebページを用意し、mdまたはmdxファイルから引き出されるコンテンツを表示するための最小限の条件を別途記述する構造にできます。今後新しいページを作成する際は、mdファイルを作成するだけです。HTMLをコピペする必要はありません。
多言語対応： Astroではi18nという仕組みで実装されています。フォルダレベルで構造を適切に設計するだけで十分です。私は各ページの文字列をJSON形式の配列で保存するようにしました。Markdownファイルの翻訳もサポートされており、構造を整えるだけです。
コスト： Cloudflare Pagesは、無料プランでも寛大な制限（月間最大500ビルド）を持つ仕組みであることが分かりました。結果として、支払ったのはドメイン代だけでした。

Web開発の発展速度を考えると、AstroとCloudflare Pagesはおそらく唯一の同様のソリューションではありません。ただ、ある晩に「マッチング」が起こり、私の要求が満たされた、それが私に必要なすべてでした。もし似たような目標をお持ちなら、間違いなくお勧めします。

アドバイス

私が後悔したことや、すぐに考慮していなかったことについて（初めてWebの世界に飛び込む方への考え）：

構成を事前に考えておく： コードに取り掛かる前に、ページの階層を理解するために何らかのエディタでサイトの図を描いてみるのがベストです。
コンポーネントの統一： 何が繰り返されるコンポーネント（ヘッダー、フッター、ボタン）になるかを事前に考えておきましょう。後でリファクタリングしたり共通スタイルを切り出したりする時間を無駄にしないよう、デザインシステムの形式で考えてください。
多言語対応： 検索ロボットが翻訳されたバージョンで混乱しないよう、カノニカルタグ（canonical tags）とは何かを理解しておきましょう。

結論

私の考えでは、Web開発の経験がなくても、AstroとCloudflare Pagesの組み合わせで柔軟かつ強力なサイトを作成できます。AIツールを武器にすれば、今日のほとんどの問題は完全に解決可能です。そして多くの人にとって重要なことに、これは無料（正当な投資と考えるドメイン代を除けば）で実現できます。