【将棋盤第7回】github pagesで公開する - スマレジエンジニアyushiのブログ

コツコツ将棋盤を作ってます。

使用技術

今回は、github pagesで公開していきます。

Githubの機能で、静的ファイルをごく簡単に公開できる機能です。

リポジトリ単位で公開できます。

公開用のファイルを生成します。

これは簡単で、単にViteのbuild機能を利用します。

まず設定ファイルを追加します。

(frontend/vite.config.js)

export default ({ command, mode }) => ({
  base: command === 'serve' ? '/' : '/shogi-board/',
})

github pagesでは、下記のURLで公開されます。

http(s)://<username>.github.io/<repository>

<repository> = shogi-boardを指定してあげて、index.htmlから読み込む各ファイルのパスを正しく指定できるようにします。

次に、下記のコマンドでビルドします。

yarn build --outDir ../docs

--outDirのオプションで、docsというディレクトリ内にビルド結果を配置します。

github pagesでは、リポジトリのroot階層か、/docs階層のどちらかを公開時のプロジェクトルートに指定できます。

docs/.nojekyll のファイルを作成しておきます。

これがないと、公開時にdocs/_assetsディレクトリ以下のファイルが読み込めないようです。

作成・生成したファイルをgithubにpushします。

次は、github上で設定をします。

こちらの設定はごく簡単で、当該リポジトリの、Settings > Pagesで、公開したいブランチ名とディレクトリ名を指定してあげるだけです。

f:id:yushi0:20210418133642p:plain

設定・ Saveし、 Your site is published at ~~ の表示が出たら、公開成功です。

公開したページはこちら。

※ 機能はまだ揃っていないです。このシリーズでだんだん作っています。

機能は未完成ですが、とりあえず公開しちゃいました。

ブログを読むだけでなく、動かしてみてもらえると嬉しいなと重います。