個人ホームページを作りました。

Kanade2001

SNSやGitHub、ブログなど活動場所やカテゴリが分散しがちなので、その入口となるものが欲しかった。これまではGitHubPages, GitHubのトップページ、Notionと色々と変えて来たのだが、Notionの使い勝手がよく個人的なメモ等も集約できてきたということで本腰を入れて安住の地を作ろうと決めた。

今回は、独自ドメインの取得から、ChatGPTを使ったデザイン・実装、Astroでの静的サイト生成、Cloudflare Pagesでの公開までをやった。この記事では、細かいコマンド集というより、「どういう流れで作ったか」「どこが詰まりどころだったか」を中心にまとめる。

なぜ個人ホームページを作ったのか

Notionに集約するうえで、Notionを公開ページとして使おうとした。Notionは便利で、記事やメモをまとめるにはかなり快適だ。ただ、プロフィールページとして使うには少しだけ「Notion感」が強く、トップページとしての表示の自由度には劣っていた。

そこで、以下のようなものをまとめる入口として個人ホームページを作ることにした。

技術選定

今回は Astro を使った。

軽量でモダンな感じのWebサイトを作りたかったのでAstroを採用した。

ReactやNext.jsでも作れるが、今回は複雑な状態管理やAPI連携が必要なわけではない。トップページにカードを並べて、リンクを貼って、画像を表示できればよい。そうなると、Astroの「静的サイトを軽く作る」方向性がちょうどいい。

デプロイ先は Cloudflare Pages にした。

最終的な構成はこんな感じ。

Astro
TypeScript
Tailwind CSS
Cloudflare Pages
独自ドメイン: kanade2001.com

ビルド後は dist/ に静的ファイルが出る。Cloudflare Pages側では、基本的に次の設定でよい。

Framework preset: Astro
Build command: npm run build
Build output directory: dist