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を実行して、ローカル環境にポートフォリオを作成。
簡単でしたね。
他にもフレームはあるので、全種類試していきたいなと考えています。