ParcelでバンドルしたプロジェクトをGitHub Pagesに表示する

Parcelで Parcelの導入や開発フローについては説明しません。

ページは一つだけで、cssとjsをロードする簡単なプロジェクトを想定します。
GitHub Pagesの表示はmasterブランチのdocsフォルダを使用する方式を採ります。

ディレクトリ構造

大まかなディレクトリ構造はこんな感じ。docsはGitHub Pagesで表示するためのディレクトリで、Parcelの本番用バンドルの出力先となります。

.
├── docs
├── index.html
├── src
│   └── index.js
└── style.css

index.htmlの記述

何の変哲もないlinkタグとscriptタグの記述ですが、本番用バンドルの出力と比較しやすいように載せておきます。

...
<link rel="stylesheet" href="style.css" />
...
<script type="text/javascript" src="./src/index.js" charset="utf-8"></script>
...

本番用にバンドルする

本番用のbuildコマンドです。

• --out-dir docsオプションを指定し出力先をdocsディレクトリにする
• --public-url .オプションを指定する

// package.json
  "scripts": {
    "dev": "node_modules/.bin/parcel index.html",
    "build": "node_modules/.bin/parcel build index.html --out-dir docs --public-url ."
  },

--public-urlオプションがないと実際にGitHub Pagesで表示したときにロードができなくなります。

--public-url .を指定しない場合の出力結果

<link rel="stylesheet" href="/style.f5c87fca.css" />
...
<script type="text/javascript" src="/src.c52f2b67.js" charset="utf-8"></script>

--public-url .を指定した場合の出力結果

<link rel="stylesheet" href="style.f5c87fca.css" />
...
<script type="text/javascript" src="src.c52f2b67.js" charset="utf-8"></script>

あとはGitHubにリポジトリをつくり、GitHub Pagesの設定を行えば問題なく表示されるはずです。