GatsbyJSで自分のホームページを作る

はじめに

自分のホームページや、就職活動などでポートフォリオサイト作りたいなと思った事ありませんか？ この記事では、React製の静的サイトジェネレータであるGatsbyJSを紹介させていただき、実際に自分もポートフォリオサイトを新しく作ってみました。

GatsbyJS

GatsbyJSとは、React製の静的サイトジェネレータです。モダンで高速なサイトを作ることができます。また、静的サイトのリソースのデータ取得にはGraphQLが使われています。

Vue.jsが好きな方はVue.jsの静的サイトジェネレーターGridsomeもあります。

www.gatsbyjs.org

やってみる

• 以下の環境で動作を確認しています。

$ node -v
v11.10.1

gatsby -v
Gatsby CLI version: 2.8.19
Gatsby version: 2.18.5

• GatsbyJSのサイトから、「Get Started」 -> 「Quick start」を選択してこのページにいきます

• 指示通りにGatsby CLIをインストールします。

npm install -g gatsby-cli

• 次に、新規作業フォルダを作成するのですが、今回はGatsby Startersを使用します。

これは開発を迅速に開始することを目的に、様々なデザインのテンプレートを使用できるので好きなものを選んでください。

www.gatsbyjs.org

• 選んだstarterをインストールする

gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GIT_REPO]

例えば、このstarterを使いたい場合は

gatsby new gatsby-starter-resume https://github.com/anubhavsrivastava/gatsby-starter-resume

これでインストールできました。

• サーバを起動する GatsbyJSは以下のコマンドを実行しlocaohost:8000で起動できます。

cd 作業ディレクトリ
gatsby develop

• あとは好きなようにコードを書き換えていきます。

下記を参考にしました。

https://www.gatsbyjs.org/docs/gatsby-link/

https://www.gatsbyjs.org/packages/gatsby-image/

• ビルドする

gatsby build

Gatsbyは、サイト用に最適化されたプロダクションビルドを実行し、静的HTMLおよびルートごとのJavaScriptコードバンドルを生成します。

公式サイトより引用(日本語訳)

ホスティング

今回ホスティングにはNetlifyを使用しました。

www.netlify.com

やり方はこちらの記事を参考にさせていただきました

ブログを Gatsby + Netlify に移行した | aobako.net

完成

できました。

https://taka621.netlify.com/

GitHub - TakaShinoda/portfolio_v2.0

おわりに

GatsbyJSを使ってポートフォリオサイトを作成しました。 今回はstarterを使うことで簡単にできました。 また新しく作る際は一からデザインも作っていきたいです。