Gatsby静的サイトジェネレーターでポートフォリオ作成

友人から教えてもらったGatsby。
Gatsby Starter Libraryからキットを使えばサイトが簡単に作れるという事で、早速作ってみました。
Gatsby＋Contentfulでサイトを作成したかったのですが、Pluginが足りない、GraphQLの知識が必要など、うまく作成できなかったため、Gatsby初心者の手習いという事で、ポートフォリオのキットから作成する事にしました。

1. Gatsbyサイトからスターターキットを選択

それでは、GatsbyのGatsby Starter Libraryからキットを選択していきましょう。
https://www.gatsbyjs.com/starters/

この中から、ポートフォリオのキットを選択。

2. Gatsbyの開発環境をセットアップ

2.1 Node.jsのインストール

GatsbyはNode.jsの環境下で作成されているため、Node.jsをインストール。
Node.jsの公式 Web サイトから最新の Node.js バージョンをダウンロードしてインストールします。

2.2 Gatsby CLIのインストール

ターミナルから npm install -g gatsby-cli を実行。
以下のコマンドを実行し、正しくインストールされているか確認。
gatsby --version

2.3 Gatsby Starter Libraryで選択したフレームを作成

Gatsby Starter Libraryで選択したフレームの作成コマンドをターミナルで実行。
npx gatsby new gatsby-starter-portfolio-cara https://github.com/LekoArts/gatsby-starter-portfolio-cara

2.4 ローカル環境にBuild

ターミナルからGatsby developを実行して、ローカル環境にポートフォリオを作成。

簡単でしたね。
他にもフレームはあるので、全種類試していきたいなと考えています。