はじめに

今回は、Gatsby.jsを使って簡単にカッコいいポートフォリオを作る方法を共有したいと思います。

こちらが、完成形の例になります。

そもそもGatsbyとは？

Gatsbyは、Reactに基づく無料のオープンソースフレームワークであり、開発者が非常に高速なWebサイトやアプリを構築するのに役立ちます

*公式ドキュメント（英語）より

手順

1 . まずは、Gatsbyでの開発に必要な以下のツールを揃えましょう。

• Git
• Node.js（npmを使えているなら入っているはず）
• Gatsby CLI

もしもインストール方法がわからない場合は、こちらの記事を参考にしてください。

2 . こちらのGatsby公式サイトで、お好きなテンプレートを見つけましょう。

今回は、この
gatsby-starter-portfolio-caraというテンプレートを使用していきます。

3 . 作業用のディレクトリにcd 開発をするディレクトリ名で移動し、gatsby newする

先ほどのテンプレート詳細ページに下にスクロールしてもらうと、使い方が英語で載っています。

そこに、gatsby newのコマンドが載っているので、それを作業するディレクトリに移動して実行します。

cd ディレクトリ名
gatsby new gatsby-starter-portfolio-cara https://github.com/LekoArts/gatsby-starter-portfolio-cara

その後、gatsby newで生成したディレクトリにcdで移動し、次はgatsby developします。

cd gatsby-starter-portfolio-cara
gatsby develop

はい、一応完成です！！
gatsby developが成功したら、ブラウザでタブを開いてlocalhost:8000にアクセスしてみてください。

お洒落でカッコいいサイトができあがってますよね！！

使用するテンプレートによっても異なりますが、もちろん中身の編集も簡単にできます！

今回の
gatsby-starter-portfolio-caraというテンプレートの場合、作成されたフォルダの中のsrcの中にintro.mdxというファイルが入っており、ページのトップの部分はマークダウン式で中身を自由に編集できるようになっています。トップ以外の箇所も、projects.mdx、about.mdx、contact.mdxという風にそれぞれファイルをsrcの中に作成してマークダウン式で編集可能です。

最後に

今回は、Gatsby.jsを使用して簡単にカッコいいポートフォリオサイトを作成する方法をシェアしました！
とっても簡単なので、ぜひ皆さん試してみてくださいね！