概要

ハッカソンではとりあえず見せることが重要です。Done is Better than Perfectです。
以前ハッカソンに参加した時に、この手順はまとめといたほうがいいなと思ったので、手順を紹介します。
必要なものは下記の2つ。
- GitHub アカウント
- Netlify アカウント

留意点

• 公開まで無料で行くことを目標としています。使用するサービスのうち有料のオプションについては触れません
• この環境はあくまでフロントのみの環境です。DBが必要、サーバーサイドで動かすものが必要な場合、firebaseやHerokuなどの使用を検討してください

1. リポジトリ作成

GitHubリポジトリを用意します。無料アカウントであれば公開されたリポジトリしか作れないので、その点は注意してください。
リポジトリを作ったら、共同作業する人をCollaboratorsに追加し、次のステップへ進みます

2. Netlify プロジェクト作成

Netlifyとは、無料で静的なサイトをホスティングするサービスです。
GitHubと連携し、特定のブランチにマージされたらその中身をデプロイする、ということが可能です。今回はこの機能を使っていきます。

プロジェクト作成

プロジェクトを作成します。
New site form Gitをクリック

Continuous DeploymentでGitHubを選択し、Only select repositoriesから1.で作ったリポジトリを登録、Installボタンをクリック

Deploy Settingを設定します。ここでは
- どのコマンドを叩くか
- どのディレクトリを公開するのか
- どのブランチを使うのか
などを設定できます。

そのプロジェクトやフレームワークに合わせたコマンド、ディレクトリを設定してください。

これだけでホスティング完了です。お疲れ様でした。

備考、Netlifyの設定について

Netlifyは通常、例えば/.dist/フォルダなどのルート直下にあるディレクトリの公開を行います。
実体験ですが、僕は構成をミスって

/ios/xcodeのプロジェクト
/nuxt/nuxt.jsで作ったプロジェクト

という意味不明なリポジトリ構成にしてしまったことがあります。なぜリポジトリわけなかったのかいまだに謎です。
しかもそれをすでにチームメンバーに伝えてしまったため、今更ディレクトリ根っこから変えます..と言えませんでした。

Netlifyではnetlify.tomlという設定ファイルをリポジトリルートに起き、細かい設定を記述することができます。
以下は実際に使った設定です

[Settings]
ID = "NetlifyプロジェクトのID"

[build]
base    = "nuxt/"
publish = "nuxt/dist/"
command = "npm run generate"

base: Netlifyが動作する根っこ
publish: 実際に公開するディレクトリ
command: 叩いてほしいコマンド

もっと細かい設定ができるみたいですが、最低限これだけ使えてれば公開は可能です。
https://www.netlify.com/docs/netlify-toml-reference/