2020/05/03 追記
どうやら、basic_auth の記述は無視され、単に環境変数に BASIC_AUTH_USERNAME および BASIC_AUTH_PASSWORD が設定されていれば有効になる（設定されていなければ無効になる）ようです（確認中）。
結論（手順）
- heroku-buildpack-static というビルドパックを用います
- このビルドパックの設定ファイルである
static.jsonに"basic_auth": trueと指定して、Basic認証を有効にします - ユーザ名とパスワードを
.htpasswdまたは環境変数に設定します
手順の詳細
1. heroku-buildpack-static というビルドパックを用います
VuePress のデプロイの手順でも推奨されている、heroku-buildpack-static というビルドパックをインストールします。
具体的には、ダッシュボードの「Settings」タブの「Buildpacks」の項目で「Add buildpack」を選択し、heroku-buildpack-static のリポジトリを指定してインストールします。
2. ビルドパックの設定ファイルである static.json に "basic_auth": true と指定して、Basic認証を有効にします
公式ドキュメント に書いてあるように、設定ファイルである static.json を作成し、以下の行を書き加えます。Basic認証 の機能だけを用いたい場合は、以下の行だけを書いた static.json を用意すればよいです*1。
{ "basic_auth": true }
3. ユーザ名とパスワードを .htpasswd または環境変数に設定します
Basic認証用のユーザ名とパスワードを設定します。2つの方法があります。
1つ目の方法: .htpasswd ファイルに記述する
プロジェクトのルートディレクトリに .htpasswd というファイルを用意し、そこにユーザ名とパスワードを書きます（テキストファイルです）。一般的な .htpasswd の書式です。例えば以下のようになります。ユーザ名 が foo で、パスワードが bar の場合です。
foo:$apr1$JbNy4cjB$SnBqnmSmZgGs2R8IBVD750
注意点は、パスワードはハッシュ化された内容を記述する という点です。パスワードの文字そのものを記述しても動作しません。
文字列をハッシュ化するためにはコマンドを実行する方法もありますが、以下のようなWebサービスを利用するものいいでしょう。不安なようでしたら、コマンドで行いましょう。なお、「暗号化方式*2」は特段の理由がない限り「MD5」を選びます。
https://htaccess.cman.jp/explain/basic.htmlhtaccess.cman.jp
2つ目の方法: 環境変数にユーザ名とパスワードを設定する
Heroku の環境変数にユーザ名とパスワードを設定することもできます*3。ユーザ名のキーは BASIC_AUTH_USERNAME で、パスワードのキーは BASIC_AUTH_PASSWORD です。
ここでも注意する点としては、パスワードはハッシュ化された内容を記述する という点です。
4. ユーザ名とパスワードを設定するにあたってどちらの形式がいいのか
ユーザ名とパスワードを設定する際に、.htpasswd 形式と環境変数形式にはそれぞれの特徴があります*4。なお、以下において「パスワード」というのはハッシュ化されたパスワードを指します*5。
.htpasswd形式では、ユーザ名とパスワードを複数行に渡って書くことができるので、複数のユーザ名とパスワードのペアでBasic認証の突破が可能になります.htpasswd形式では、リモートリポジトリを使う場合ではファイルをリポジトリに直接置くことになりますので、リポジトリを見られる人ならば誰でもその内容が見られます- もっとも、ハッシュ化されているので、実質的には、生のユーザ名とパスワードが分かってしまうということは無いかとは思います
- 誰が編集したのか、どういう履歴をたどったのかが明確になります
- パブリックリポジトリの場合は勝手に変更されるなどのリスクがあるかと思います
- 環境変数形式では、ユーザ名とパスワードのペアは一組だけです
- 環境変数形式では、Heroku のダッシュボードの「Settings」にアクセスできる権限がない人には、ユーザ名とパスワードは分かりません
- 狭い範囲でしか見られたり変更されたりすることがないという心理的な安心感があります
補足
- PHP のビルドパックを用いる方法などよりも断然に楽かなと思います*6
- Rails などを使う場合にはそれぞれのフレームワークの流儀に則ればいいです（本記事の内容は関係ない）
