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

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

こんなページをシュッと作れます。維持費もかかりません。
[![Image from Gyazo](https://i.gyazo.com/dc70561dcbfb7c77705554f42323ecdd.gif)](https://gyazo.com/dc70561dcbfb7c77705554f42323ecdd)


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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290998/8706de2b-e8d6-1d70-e7ee-bf77501f28f3.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290998/977d51da-cecf-8212-f3f4-8dd6eccf1994.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290998/e92faf44-7dad-bedb-e38e-d26ade3b7ac8.png)

- ターミナルで作成したリポジトリをチェックアウト

```sh
# <user>を置き換えて！!!
$ git clone git@github.com:<user>/<user>.github.io.git && cd <user>.github.io
```

# Gatsbyで静的サイト作成

- Gatsby CLI インストール

```sh
$ npm install -g gatsby-cli
```

- Gatsby Starterを使ってサイト作成
    - 今回は[gatsby-simplefolio](https://www.gatsbyjs.org/starters/cobidev/gatsby-simplefolio/)を使います。

```
$ gatsby new gatsby-simplefolio https://github.com/cobidev/gatsby-simplefolio
```

- gatsby new が終わったらサイトのディレクトリへ移動

```
$ cd gatsby-simplefolio
```

- 開発環境用サーバ起動

```
$ gatsby develop
```

- http://localhost:8000/ へアクセスし、Gatsbyで作成した静的サイトを確認。早いですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290998/da30df7d-a305-ba7f-6c88-f79e1e7a3fc3.png)

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

実は `<user>.github.io`の命名規則でリポジトリを作成した時点で自動的にGitHub Pagesとして公開されています。
↓こんな感じ。READMEの内容が表示されてますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290998/cacfcbd9-5b2a-a1b5-1fe0-ddfb3160aef3.png)

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

- `package.json` にデプロイ用コマンド追加

```diff: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"
   },
```

- デプロイコマンド実行

```sh
$ yarn run deploy
```

- しばらくすると GitHub Pagesに反映されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290998/dee666fb-87cb-3a04-c81b-96c99a5a62e5.png)

# カラーテーマ変更

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

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

[![Image from Gyazo](https://i.gyazo.com/aa4d375592f79eb1d7b727a68ce9e7f5.gif)](https://gyazo.com/aa4d375592f79eb1d7b727a68ce9e7f5)

- 気に入ったグラディエーションのカラーコードを以下のファイルに反映すればOKです。

```scss:gatsby-simplefolio/src/style/abstracts/_variables.scss
// COLORS
$primary-color: #02aab0;
$secondary-color: #00cdac;
```

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

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

[![Image from Gyazo](https://i.gyazo.com/dc70561dcbfb7c77705554f42323ecdd.gif)](https://gyazo.com/dc70561dcbfb7c77705554f42323ecdd)

# 独自ドメインを設定

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

- ドメインを取得する
    - お好きなところでどうぞ

- [GitHub Pages サイトのカスタムドメインを管理する - GitHub Docs](https://docs.github.com/ja/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain)を参考に、DNSプロバイダでレコード作成
    - ↓はAWSのR53でAレコードを設定した例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290998/96c09df2-9035-94d6-96f9-23f32c08cc1e.png)

- リポジトリのSettingsから、Custom domain に設定したいドメインを入力してSave
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290998/92e3ff55-780d-df09-dc07-32b807a3db8c.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290998/abd39390-42e4-804a-8ce6-66c96ac19a70.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290998/3c6090a7-7a22-b386-e0df-edcbb434f0bf.png)



# 参考
- [GitHub Pages について - GitHub Docs](https://docs.github.com/ja/github/working-with-github-pages/about-github-pages)
- [Quick Start | GatsbyJS](https://www.gatsbyjs.org/docs/quick-start/)
- [Starter Library | GatsbyJS](https://www.gatsbyjs.org/starters)
    - Gatsbyにはブログ用など様々な用途のStarterがあります。こちらから検索してみるだけで面白いです
- https://docs.github.com/ja/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site#configuring-an-apex-domain