【自作ブログ #14】GitHub Pagesでの公開(1) - スマレジエンジニアyushiのブログ

自作ブログを作っています。

yushi-dev.hatenablog.com

技術スタック

TypeScript
React
Next.js
Styled Components
GitHub Pages

今回はGitHub Pagesで公開します。

設定

GItHub上での設定が必要です。

Settings > Pagesが設定ページです。

今回は Source = Deploy from a branch という設定で、gh-pagesというブランチをpushしたときに、/docs以下をデプロイするよう設定しました。

静的ファイル化

通常の開発時には開発サーバーを立ち上げ、その機能によって画面表示がされます。

一方本番デプロイのためには静的ファイルとしてまとめる必要があります。

今回利用しているNext.jsでは静的ファイル化の機能を提供しているため、これを呼び出すだけで済みます。

まずはnext.config.js

package.json にコマンドを追加します。

{
  ...
  "scripts": {
    ...
    "export:gh-pages": "npm run clear:gh-pages && BASE_PATH='blog' npm run export && touch out/.nojekyll && cp -r out ../docs",
    "clear:gh-pages": "rm -rf ./out ../docs",
    ...
  }
  ...
}

clear:gh-pages は、主にローカル環境での動作確認時に、生成されるファイルを削除するコマンドです。

export:gh-pages は、静的ファイル生成のためのコマンドです。

npm run export というのがNext.jsが提供しているコマンドです。

touch out/.nojekyll の記述によって、.nojekyllというファイルを生成します。
こちらがないと、デプロイ時に生成ファイルの内_next に対してNot Foundエラーが発生してしまいます。
この問題については、下記のページの説明がわかりやすかったです。

GitHub Pagesで普通の静的ホスティングをしたいときは .nojekyll ファイルを置く #GitHub - Qiita

最後にcp -r out ../docs の箇所にて、docs ディレクトリに静的ファイルを移動します。
これは、

BASE_PATH='blog'の記述については、次の章で説明します。

path問題の解決

GitHub Pagesで公開した場合、デフォルトのURLは下記のようになります。

https://[user-name].github.io/[repository-name]

ここでの問題として、ローカル環境の場合と違ってGitHub Pages上では/[repository-name] のパスが含まれることへの対応が必要となります。

next.config.js への記述によって、base pathを指定することができます。

const basePath = process.env.BASE_PATH ? '/' + process.env.BASE_PATH : ''

const nextConfig = {
  basePath,
}

module.exports = nextConfig

process.env.BASE_PATH の箇所は環境変数で、これによって、ローカル環境では未指定としたり、GitHub Pages上では[repository-name] を指定することができます。

前章の静的ファイル化のコマンドに含めた BASE_PATH='blog'は、この[repository-name] = blogを指定していました。

デプロイ

先の設定に則り、gh-pages というブランチにpush することで公開ができます。

デプロイに成功しました。

ただ画像が表示されない問題があります。
こちらは次回解決していきます。

あとがき

あけましておめでとうございます。
年末は夫婦で体調を崩して大変でしたが、なんとか回復しました。