GatsbyJSのサイトをGithub Pagesで公開する

May 31, 2020 Category: ブログ

Github Pagesとは

Githubのリポジトリを直接ホストしてくれるサービスです。

Githubにリポジトリを作る

Githubに {Githubのusername}.github.ioという名前でリポジトリを作成すると、そのリポジトリのmasterブランチにあるコードを自動でホストしてくれます。
ページにはhttps://{Githubのusername}.github.ioでアクセスできます。

ソースコードを管理する

github.ioのリポジトリのmasterブランチにはGatsbyJSでビルドしたファイルを置くことになりますが、ソースを管理するリポジトリを別に用意するのもいまいちなので、同じリポジトリ内の別のブランチで管理します。

このサイトのリポジトリではソースの管理リポジトリをsourceとしました。

#ソースのディレクトリに移動
cd {ソースのリポジトリ}
#gitのリポジトリとして初期化
git init
#sourceブランチを作成して移動
git switch -c source
#ファイルを全てコミット
git commit -a
#作成したGithubリポジトリをリモートリポジトリに指定
git remote add origin https://github.com/{Githubのusername}/{Githubのusername}.github.io.git
git push -u origin source

デプロイ用コマンドの作成

Github Pagesにデプロイするツールgh-pagesを追加する。

yarn add -D gh-pages

package.jsonにデプロイコマンドを追加する。

"scripts": {
  "build": "gatsby build",
  "deploy": "yarn build && gh-pages -d public -b master"
}

デプロイする

yarn deploy

悪魔のオコトバ