a bd.me

私の個人的なウェブサイト

私の個人的なポートフォリオ Web サイトは、閲覧数を含む MDX ブログ投稿、ダーク モードの切り替え、ギア リスト、概要ページなどの機能を備えながら、シンプルかつクリーンになるように設計されています。

技術スタック

バックエンド:

• Next.js / TypeScript
• MDX / コンテンツレイヤー (ブログ投稿)
• PlanetScale (データベース)
• プリズマ (ORM)

フロントエンド：

• Tailwind CSS (スタイリング)
• Radix プリミティブ (ヘッドレス UI コンポーネント)
• Radix UI カラー (カラー システム)
• フレーマーモーション（アニメーション）

はじめる

マシンに Node.js v18.17.0 以降がインストールされていることを確認してください。

1. 依存関係のインストール: npm install
2. 環境変数: .env.exampleを新しい.env.localにコピーします。
3. データベースのセットアップ: 「データベースのセットアップ」を参照
4. Prisma セットアップ: npm install @prisma/client (まだ行っていない場合)、 npx prisma generate実行します。
5. 開発の開始: npm run dev 。これにより、.contentlayer ファイルが自動的に作成され、Next.js 開発サーバーが起動します。

データベースのセットアップ

• PlanetScale アカウントにサインアップする
• PlanetScale で新しいデータベースを作成する
• PlanetScale が提供する接続文字列を使用して、プロジェクトの.env.localファイル内の DATABASE_URL 環境変数を更新します。

導入

このプロジェクトは Vercel にすぐにデプロイできます。 Vercel アカウントを GitHub リポジトリに接続するだけで、Vercel はメイン ブランチに新しいプッシュを行うたびにアプリケーションを自動的に構築してデプロイします。

プロジェクトの .env 変数を Vercel プロジェクト設定に追加します。