Gatsby + GitHub Pages でポートフォリオページを無料でシュッと作る


エンジニアたるもの、自分のポートフォリオページは持っておきたいですよね。
Gatsby + GitHub Pages を利用したポートフォリオページ作成手順をまとめましたのでご活用ください。

こんなページをシュッと作れます。維持費もかかりません。

GitHubでポートフォリオ用リポジトリ作成

まずはポートフォリオ用のリポジトリを作成していきます。

  • GitHub右上のメニューから 「New repository」をクリック

  • Repository name に <ユーザ名>.github.io を入力し、 「Initialize this repository with a README」にチェックつけて「Create repository」をクリック

  • リポジトリ作成完了。Clone with SSH をコピーしておきます

  • ターミナルで作成したリポジトリをチェックアウト
# <user>を置き換えて!!!
$ git clone [email protected]:<user>/<user>.github.io.git && cd <user>.github.io

Gatsbyで静的サイト作成

  • Gatsby CLI インストール
$ npm install -g gatsby-cli
$ gatsby new gatsby-simplefolio https://github.com/cobidev/gatsby-simplefolio
  • gatsby new が終わったらサイトのディレクトリへ移動
$ cd gatsby-simplefolio
  • 開発環境用サーバ起動
$ gatsby develop
  • http://localhost:8000/ へアクセスし、Gatsbyで作成した静的サイトを確認。早いですね。

作成した静的サイトを GitHub pages として公開

実は <user>.github.ioの命名規則でリポジトリを作成した時点で自動的にGitHub Pagesとして公開されています。
↓こんな感じ。READMEの内容が表示されてますね。

ページのカスタマイズをする前に、先ほどGatsbyで作成したページを一旦そのままGitHub Pagesとして公開してみます。

  • package.json にデプロイ用コマンド追加
gatsby-simplefolio/package.json
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "deploy": "gatsby build && cp -pvr public/* ../ && git add ../ && git commit -m 'Deploy to production' && git push"
   },
  • デプロイコマンド実行
$ yarn run deploy
  • しばらくすると GitHub Pagesに反映されます

カラーテーマ変更

  • サイト全体のカラーテーマを変更することができます

  • https://uigradients.com/ で好みの色を見つけましょう。

  • 気に入ったグラディエーションのカラーコードを以下のファイルに反映すればOKです。
gatsby-simplefolio/src/style/abstracts/_variables.scss
// COLORS
$primary-color: #02aab0;
$secondary-color: #00cdac;

コンテンツ内容設定して完成!

  • 中身はただのReactです。タグ定義なんかも自由にカスタマイズしていきましょう!

独自ドメインを設定

以降の手順は任意です。お金がかかるケースもあります

  • リポジトリのSettingsから、Custom domain に設定したいドメインを入力してSave

  • CNAME というファイルが作成されます。設定ページからではなく手動でこのファイルを作成してもOKです。

  • これで、独自ドメインでポートフォリオページを表示できるようになります!

https://mishiwata1015.com/
※スマホ対応できてないです

参考