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