【Gatsby.js】爆速でポートフォリオを作成する方法

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

完成形はこちら。

そもそもGatsbyとは？

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

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

手順

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

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

インストール方法がわからない場合は、過去にQiitaで投稿したこの記事を参考。

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の中に作成してマークダウン式で編集が可能。

転載元のQiita記事はこちら。

Tomoya