GatsbyJSを利用してポートフォリオサイトを構築しています

GatsbyJSを利用してホームページやコーポレートサイト、ブログなどの静的サイトが構築できるようにまずはポートフォリオサイトを作ってみた

GatsbyJSを利用してポートフォリオサイトを構築しています

目次

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ(@nakanakamu0828)です。

今回は、GatsbyJSを利用してポートフォリオサイトを構築したいと思います。 私がメンタリングしている生徒さんがポートフォリオサイトをGatsbyJSで構築したいと勉強していたことがきっかけとなり、私も構築してみることにしました。

GatsbyJSとは

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

GatsbyJSは、ReactJSで構築された静的ジェネレーターで高速にWebサイトやアプリを構築するためのサポートを行うオープンソースのフレームワークです。

なぜGatsbyJSを利用したか?

上述しましたが、きっかけは、私がメンタリングしている生徒さんがGatsbyJSを利用してポートフォリオを作りたいと相談されたことです。 その他にもGatsbyJSを利用したかった理由がありますので以下に記載します。

  • GatsbyJS、ReactJSの経験が浅かったので実績を作りたかった
  • Gridsomeにて簡単なデモサイトの構築経験があったので、静的ジェネレーターとして善し悪しを比較したかった
  • 今後、ホームページやコーポレートサイトを構築するときにGatsbyJSで構築できるようにノウハウを身につけておきたかった

ポートフォリオサイトの構成について

基本的には個人の紹介サイトになる為、Home画面を利用したシングルページ構成で自己紹介や経歴紹介、問い合わせを用意しています。
+αの情報をブログとして記事にしていきます。

利用しているプラグイン/ライブラリは?

追加した主なプラグイン/ライブラリを紹介します。

GatsbyJSのプラグイン

import '@components/navbar'import '../../components/navbar.js'

それ以外のライブラリ

利用方法

$ gatsby new [project name] https://github.com/nakanakamu0828/gatsby-starter-portfolio
$ cd [project name]
$ gatsby develop

※ [project name]は任意の名称を指定してください。プロジェクトルートのディレクトリ名になります

最後に

本サイトのソースコードはgithubのnakanakamu0828/gatsby-starter-portfolio をご確認ください。 サンプル的なものになりますが、お役に立てた際はStarなど頂けると幸いです。


GatsbyJS

香港在住4年目になるWEBエンジニアのなかむです。エンジニア歴10年になります。顧客は全て日本の企業になります。リモートにて受託、業務委託で各企業様の支援を行なっております。

Name
なかむ
Address
HongKong
Email
yuuki.nakamura.0828@gmail.com

Home