追記: GatsbyJS@2 以前の古い記事です。最新のチュートリアルはこちら
以前 neet.love というハローワークの対義語みたいなドメインを購入したのですが，こんなクソみたいなドメインに使い道なんてあるわけもなく，あろうことかスクワッティング状態になってしまっていたのでポートフォリオを作ります．求職してなさそうですね．
MediumのReactタグで「GatsbyJSでポートフォリオ作ったで」というような記事を拝見したので今回はGatsbyJSを採用します．（どの記事だったかは忘れました）
GatsbyJS is 何
GatsbyJS（ギャッツビージェイエス）は，React用の 静的サイトジェネレーター です．「静的サイト」というのは与えられるパラメータによって情報が変化したりしない純粋なHTMLページのことですね．
類似プロジェクトとしてGitHub Pagesでよく用いられているJekyll (ジキル)というものがありますが，あちらはRubyが用いられています．
GatsbyJSはそのかわりにJavaScriptの仮想DOMライブラリである React を採用し，ページ全体をコンポーネントのライフサイクル上に置くことで動的なDOMの変化でもパフォーマンスが安定し，尚且NPM上にある 数多ものReactパッケージ をインストールしてよりゴージャスなwebサイトを作ることも可能というわけ．
さらにデフォルトでService worker（≒ PWA）やServer-side renderingもやってくれたり，誰しもが面倒なWebpackやBabelの設定もプラグイン一つで完了したりとかなりヤバイ，全人類一度は使ってみるべき．もちろんGitHub Pagesでもデプロイ可能です．
🙌 Getting started
前提として，プログラミング言語はTypeScript, スタイルシートはSCSS，メタ情報のマークアップにはYamlを使うことにします．
はじめに gatsby-cli というパッケージをインストールします，これは読んで字のごとくGatsbyのCLI (コマンドラインインターフェイス) です．バンドル時に使うモジュールのバージョンに直接的な関係がないのでグローバルにインストールしても構いません．
npm i -g gatsby-cliインストールすると gatsby にパスが通っているので，以下のコマンドでプロジェクトの雛形を生成します．
gatsby new <PROJECT NAME> https://github.com/haysclark/gatsby-starter-typescriptnewでは第三引数で雛形となるプロジェクトのURLを指定できます，GatsbyJSのデフォルトの開発言語はJavaScriptなので，ここではTypeScript版の雛形としてメジャーなgatsby-starter-typescriptというものを使わせていただきます．もちろんデフォルトの雛形を利用して自分でTypeScriptに書き直しても構いません．
🌏 YAMLでソーシャルアカウントを管理 & 表示
ポートフォリオサイトにありがちな，TwitterアカウントやGitHubアカウントやE-mailアドレスがかっこいいアイコンとともにリストされているコンポーネントをつくります．まず，適当なディレクトリにYAMLファイルを作成します．
ここでは例として，プロジェクトの srcに configというディレクトリを作り，その中に social_accounts というファイルを作成し，そこに私のソーシャルアカウントの情報を書いていきます．
オブジェクトにはname, label, href , fa のキーがあり，それぞれに名前，内容，URL，Font awesomeのクラス名が付与されています．
次に，上のYAMLファイルをReactコンポーネント側で扱いたいのですが，ファイルはどのようにインポートしてパースするのでしょうか？
通常考えられる方法はWebpackの text-loaderで平文としてインポートして js-yaml を使ってYAMLをパースしてforEachしてコンポーネントに埋め込む…とかかと思いますが，GatsbyJSではそうではなく，大体のデータがGraphQLを介して管理されています．
GraphQLはREST APIに変わる新世代のクエリ言語で，通常クライアントとサーバー間の通信に用いられます．触ったことが無い方でもサンプルを読めば理解できると思いますし，今後主流になると思うので，いい機会に勉強してみてはいかがでしょうか．
ちなみにGraphQLの学習には HowToGrahpQL.com というwebサイトがおすすめで，全編動画と超丁寧なキャプション付きなので脳死状態でも理解できます．
GraphQLがOKな人は次に進みます．YAMLのパースに必要なGatsbyプラグインをインストールし， gatsby-config.js に有効化のために必要な設定を追記します．
yarn add gatsby-transformer-yaml gatsby-source-filesystem
こうすることで，GatsbyJS内のReactコンポーネントからGraphQLにクエリを飛ばすことができます．以下がクエリを実行しているコンポーネントの例です．
Gatsbyによって管理されるファイルでは，デフォルトでエクスポートされたReactコンポーネントの props 内の data に自動的にクエリの実行結果がインジェクトされ，デコレータのようなものを書くことなくシームレスに動的なプロパティを利用できます．
Yamlファイルをパースするパッケージであるgatsby-source-filesystemでは all<キャメルケースのファイル名>Yaml のようなストラクチャでクエリ化され，その中のedgesにオブジェクトの配列が入っていて，さらにその中のnodeでそのオブジェクトの内容を参照することができます．ですので上のようなクエリになるのですが，どうあがいても欲しいものにたどり着くまでのPropsのネストが深すぎるので諦めて長いInterfaceを書くしかありません．
あとは適当にJSXを書いて完成させます
FYI:
GraphQL初学者で，実際にクエリを書いてみてどういうのが返ってくるのかインタラクティブに知りたい！という方はGraphiQLというブラウザ拡張のGraphQLクライアントがオススメです．
開発の際には gatsby develop というコマンドで開発サーバーを立ち上ることで， http://localhost/__graphql にGraphQLサーバーが公開されます．
📰 Mediumの投稿一覧を埋め込む
GatsbyJSに惚れた理由の一つとして，プラグインの多さがあります．gatsby-source-mediumでは，Mediumから指定のユーザーの投稿を取得してGraphQLで参照可能にしてくれます．
使い方は簡単で， gatsby-config.js に設定を追記します．usernameはアットマークが必要なことに注意してください．
ビルドすると allMediumPost というクエリで投稿の一覧表示が可能になりました，ヤバい．
💄 SCSSを書く
SCSSも通常はstyle-loaderをインストールして，css-loaderをインストールして，sass-loaderをインストールしてwebpack.config.jsに追記して，ExtractTextWebpackPluginをrequireしてバンドル名を指定して…としなければなりませんが，GatsbyJSならこれも裏でやってくれるのでプラグインをインストールするだけで構いません．
yarn add gatsby-plugin-sass
設定を追記したら，普通のモジュールと同様にコンポーネントに import './style.scss' などと書けば一緒にCSSにコンパイルしてくれます．
Done!
こうして最悪なドメイン2018優勝候補がオシャレなポートフォリオに変わりました．当初はハローワークにリダイレクトしようと思っていましたがその必要はなさそうです．
ちなみになんでずっと放置していたのに急に作り出したかというと，某イベントに参加する予定で名刺を発注したのですが，どうしてもホームページのURLを載せたくてまだ作ってもいないのに載せたため急遽作成したのでした．
名刺はラクスルさんで500円ほどで100部発注しました，クオリティは大満足です．
ポートフォリオのソースコード:
