JavaScript
React
gatsby

さくっとGatsbyでポートフォリオサイトを作った話


はじめに

以前、個人でSharevelというiOSアプリをリリースしたのですが、

当初はサポートサイトでポートフォーリオサイトもなくFacebookのプロフィールページで代用していました。

アプリリリースもでき、せっかくなのでアプリのポートフォーリオを作りました。

どうやって作ろうか考えたときにReact.jsでサイトを作れるGatsbyに

前々から興味もあり実際に使ってみました。

どんなサイトかは作ったGithubPage: winkry-siteで確認できます。


デプロイまでの流れ

1. Gatsbyをクイックスタートに従ってインストール

npm install -g gatsby-cli

2. プロジェクトの作成

今回はwinkry-siteというプロジェクトを作成しました。

テーマはgatsby-starter-dimensionを使用させていただきました。

gatsby new winkry-site https://github.com/codebushi/gatsby-starter-dimension

cd winkry-site
gatsby js develop

で表示確認

3. コンテンツとテンプレートを修正

表示内容の修正は、

src/componentsのHeader.jsとMain.jsを変更

スマホで横幅が合わず表示されなかったので、スタイルを少し修正しました。

src/assets/scss/layout/_main.scss

position: relative;

width: 40rem; ←削除
max-width: 100%;

4. デプロイの設定

ホスティングはGithub Pagesを利用しました。

収益もないので無料で利用できるのはありがたいです。

デプロの設定は本家にドキュメントを参考に設定します。

GithubPagesのドメインをそのまま使用する場合、

gatsby-config.jsにpathPrefixを追加しないと

jsファイルか取得できないので注意が必要です。

pathPrefix: "/winkry-site"

5. デプロイ

yarn run deploy


感想

カスタマイズをしなければ、かなり短時間でいい感じのReact.jsのページが作成できます。

用途にあったテンプレートを利用できれば活躍の場面がありそうです。

カスタマイズするならReact.jsのスキルがかなり必要ですが、

ゼロから作るよりはずっと早いのではと思います。


参考URL

GatsbyJS + TypeScriptでポートフォリオをつくった

GatsbyJSでgithub user pagesにデプロイするまでの手順