Help us understand the problem. What is going on with this article?

[超簡単]Gatsby.jsでカッコいいポートフォリオを作成する方法

はじめに

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

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

そもそもGatsbyとは?

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

*公式ドキュメント(英語)より

手順

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

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

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

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

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

Screen Shot 2020-04-01 at 17.21.06.png

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にアクセスしてみてください。

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

Screen Shot 2020-04-01 at 17.34.58.png

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

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

最後に

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

wlcmty
TECH::CAMP70期(3/27に卒業) / Ruby on Railsによる個人開発、チーム開発を経験 / 現在React等のJSを独学しながら就職活動中 / スキル → 英語(TOEIC880 英検準1級) QiitaでGatsby公式Docの翻訳記事を執筆中
https://my-portfolio-en.netlify.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした