デモサイトを作成する

NextJSを使用してポートフォリオサイトを作成する

June 22, 2024

nextjs

VFXアーティストのポートフォリオを作成・展開する方法 $0

このガイドでは、Next.js を使用し、Tailwind CSS でスタイルを設定したプロフェッショナルなポートフォリオ Web サイトを作成し、Vercel にデプロイする方法を説明します。技術的な知識がなくても心配ありません。以下の手順に従ってください。

ステップ1：開発環境をセットアップする

Node.jsをインストールします:
- 行くnodejs.orgLTSバージョンをダウンロードしてインストールしてください。Node.jsを使用すると、コンピューター上で必要なコマンドを実行できます。
Visual Studio Code (VS Code) をインストールしてください。:
- ダウンロードしてインストールするVS Codeウェブサイトの編集を容易にするコードエディタ。

ステップ2：新しいNext.jsプロジェクトを作成する

VS Codeを開く:
- VS Code を開き、次に新しいターミナルウィンドウを開きます。表示 > ターミナル。
新しいプロジェクトを開始する:
- ターミナルで、以下を入力してください。
  npx create-next-app@latest my-portfolio --typescript --tailwind
- 画面の指示に従ってください。
- - プロジェクト名を記入してください：私のポートフォリオ。
  - TypeScriptについては「はい」、Tailwind CSSについては「はい」を選択してください。
- これにより、TypeScriptとTailwind CSSを使用した新しいNext.jsプロジェクトが作成されます。
プロジェクトに移動:
- ターミナルで、以下を入力してください。
  cd my-portfolio

ステップ3：ウェブサイトをローカルで実行する

開発サーバーを起動します:
- ターミナルで、以下を入力してください。
  npm run dev
- ウェブブラウザを開いて、http://localhost:3000あなたのサイトを見るために。

ステップ4：基本的なTailwind-CSSスタイルのホームページを作成する

ホームページファイルを開く:
- VS Codeで、ファイルを見つけて開きます。app/page.tsx。
コンテンツを追加する:
- 既存のコンテンツを以下の基本構造に置き換えてください。

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>My VFX Portfolio</title>
        <meta name="description" content="Showcasing my VFX work" />
      </Head>
      <main className="min-h-screen bg-gray-900 text-white flex flex-col justify-center items-center">
        <h1 className="text-5xl font-bold mb-4">Welcome to My VFX Portfolio</h1>
        <p className="text-xl mb-8">Showcasing my best work in visual effects.</p>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <img src="/images/work1.jpg" alt="Work 1" className="rounded shadow-lg" />
          <img src="/images/work2.jpg" alt="Work 2" className="rounded shadow-lg" />
        </div>
      </main>
    </>
  );
}

ステップ5：Vercelにウェブサイトをデプロイする

Vercelアカウントを作成する:
- 行くvercel.com無料アカウントに登録してください。
プロジェクトをデプロイする:
- まだGitHubアカウントをVercelに接続していない場合は、接続してください。
- 「新規プロジェクト」ボタンをクリックして、私のポートフォリオリポジトリ。
- 画面の指示に従うと、Vercelが自動的にサイトを構築してデプロイします。
ライブサイトにアクセス:
- デプロイが完了すると、Vercel から URL (例:https://my-portfolio.vercel.appこのリンクを潜在的な顧客や雇用主と共有できます。

最終仕上げ

SEO最適化: その頭コンポーネントpage.tsxここでは、メタタグ、説明文、キーワードを追加して、サイトのSEOを向上させることができます。
カスタマイズTailwind CSSを使えば、デザインの微調整が簡単に行えます。例えば、Tailwindのクラスを調整することで、色、フォント、レイアウトなどを変更できます。
最新情報を随時更新ポートフォリオは定期的に更新し、新しい作品を追加したり、デザインを改善したりしましょう。

あなたのポートフォリオウェブサイトが公開されました！これらの手順に従うことで、シンプルながらもスタイリッシュなVFX作品紹介サイトが完成しました。さあ、作品の公開を楽しみましょう！

CompStart