概要

• 外部向けに自己紹介ができるよう、このサイトを作りました。作成期間は学習含め 5 日間でした。

技術要素

• JavaScript フレームワーク：Astro
• CSS フレームワーク：Tailwind CSS
• ホスティング：Vercel
• 一部のアイコン：Google Font
• アクセス解析：Google Analytics
• サイトデザイン案作成：Figma

メモ書き

Astro

• 当初は Gatsby を試したが、開発サーバの起動に失敗して詰まりそうだったので諦めた。
• Tailwind CSS を使うには、npx astro add tailwind コマンドを使うと簡単。対話型プロンプトに沿ってインストールできて設定ファイルも作成してくれる。参考
• 画像ファイルを使う時は画像ファイルをインポートする。参考
• Markdown ファイルを読み込むことができる。が、Markdown 記法のサポートはそこまで多くないので注意。もっと増えてほしい。参考
• Markdown ファイルからローカルの画像を読み込むには、public フォルダに置かないといけない。参考
• Google Analytics を入れる場合は、partytown というモジュールをインストールして、設定ファイルに追記して、Google Analytics のトラッキングコードを修正したものを head タグに挿入する。参考

Tailwind CSS

• レスポンシブ対応も可能。sm やら md やらを付けるだけでとっても簡単。参考
• UI コンポーネントはFlowbiteを利用した。コピペでいい感じのレイアウトになるので重宝した。

ホスティング

• ホスティングサービスを使うにあたり、いくつか検討した。
• GitHub Pages は、無料かつ手軽に静的サイトのホスティングができてよく使っていたが、ソースコードを公開したくないのでやめた。private リポジトリだと GitHub Pages が使えなかった。
• Netlify は手軽にホスティングができるサービス。Vercel と比較してみたサイトが多かった。Vercel と比較してサイトの描画が遅いらしいのでやめた。参考
• Vercel は個人かつ非商用であれば無料で、かつ Netlify よりもサイトの描画が速いとのことで採用した。参考
• Vercel は無料アカウントの場合、Google AdSense などで広告表示をしてはいけない。参考
• Vercel の GitHub 連携は、Vercel に GitHub でサインアップして、GitHub のリポジトリを登録して、プロジェクト名の設定などをして Deploy をクリックしたら完了。GitHub に Push したら自動でビルドが走る。なにこれ超便利。GitHub ワークフローも作る必要なし。参考
• Vercel でドメイン名を変えたい場合は、設定から編集可能。参考

所感

• Astro を紹介してくれた久本さん、ありがとうございます！！
• Astro+Tailwind CSS+Vercel で爆速で自己紹介サイト作れました。思ったよりも簡単に作れてびっくりです。
• React に慣れている人であれば、学習コストもそんなにかからないと思います。私はチュートリアルに沿って学習したところ何となく書けるようになりました。