Firebase Hosting でウェブサイトを公開する

この記事は どもがよアドベントカレンダー2022 の22日目の記事です。
22日目はうえのすけさんの 竹は良いぞ。(スプラトゥーン3の話) でした。スプラは1をちょっとだけやって3は未プレイなんですが、読んでみただけでも竹めっちゃ面白そう!ってなったのと、今のスプラのプレイヤーがどんなことを考えながらプレイしているのか知ることができてよかったです。

今回は 個人ウェブ礼賛今すぐはじめられるHTML から続きで、ここまでで作った HTML を実際にアップロードしてインターネット上で見れるようにするところまでの話をします。


レンタルサーバを契約し、ユーザIDとパスワードを使って FTP サーバにアクセスしてファイルをアップロードする。

Google アカウントで Google Firebase 上に Hosting プロジェクトを作成し、コマンドラインツールから deploy コマンドでファイルをアップロードする。

これが20年前と今の違い。Firebase Hosting もここ数年に出てきたサービスなので気軽に脱 FTP できるようになったのは本当に近年のことで、もちろんファイル転送の現場では今も FTP は現役ながらも、個人ウェブサイト程度のものはツールからコマンド一撃で完了するのが現代の流儀ということ。

コマンドラインツールを使う必要があるので少しハードルは高い……とは個人的にはあまり思わない。最近は discord や slack といったコマンドラインインターフェースを備えたツールを実は普段から使っている。bot に命令してるでしょ。あれと同じようなことを黒画面でやるだけ。

Windowsコマンドライン環境は近年だいぶ近代化されてある程度不自由しなくなったし、Windows 向けにツール側でいろいろ整備してくれてると感じることも増えた。Firebase のコマンドラインツールもインストールするだけで使える。

とりあえず、やっていこう。

Google Firebase 上に Hosting プロジェクトを作成する

Gmail のアカウントは大抵の人が持っていると思う、ので、すなわち大抵の人が Google アカウントを持っている。そのアカウントでログインして Firebase のコンソールページにアクセスすると、Firebase のプロジェクト作成画面が表示される。

https://console.firebase.google.com/

ここで「プロジェクトを作成」をクリックし、

firebase

なんでもいいので適当な名前をつける。今回は個人ウェブサイトを作る予定なので、my-website とかでいいだろう。わたしはあおいたくなので、aoitaku-website という名前をつけてみる。

規約もろもろに同意するチェックボックスをオンにして、「続行」。

Google アナリティクスを設定するかどうか聞かれる。どちらでもよいと思うが、ごく個人的な意見としては、アナリティクスを眺めてサイトの運営を熱心にやっていくつもりでなければ、特に設定しなくてもよいと思う。アナリティクスを無効にして先に進めると即座にプロジェクトが作成される。アナリティクスを有効にする場合は「続行」して各種設定を行うこと。

しばらく待つと「新しいプロジェクトの準備ができました」と言われるので「続行」。

プロジェクトのダッシュボードが表示される。

ダッシュボード

「構築」の中の「Hosting」を選ぶ。

Hosting

「始める」をクリック。

Firebase Hosting を使用してサイトをホストするには、Firebase CLIコマンドライン ツール)が必要です。

と言われる。npm というコマンドでインストールしろと言われているので、素直に従う。npm の利用には node.js をインストールする。

nodejs.org

18.12.1 LTS と書かれているバージョンのほうをダウンロードしてインストールする。

インストーラーを実行したら画面に従ってインストールを実行する。特に設定を変更する必要はないので、デフォルトの設定でよい。

インストールできたら、コマンドプロンプトを開き、

node -v

というコマンドを実行する。v18.12.1 と表示されるだろうと思う。表示されれば OK。

この段階で先程必要だった npm というコマンドも利用可能になっている。

npm -v

これで npm のバージョンが表示されれば OK。

npm コマンドがインストールされていることを確認できたら、

npm install -g firebase-tools

というコマンドを実行して、firebase-tools をインストールする。 インストールしたら Firebase のページに戻って「Firebase JavaScript SDK をウェブアプリに追加する手順も表示する」というチェックはオフのまま、「次へ」をクリック。

firebase login

で、まずログインする。

Hosting にアップロードするウェブサイトを作る

firebase init

しろと言われるが、これはアップロードするファイルを置くフォルダ内で実行する。

そのために、好きな場所に適当にフォルダを作って、Hosting にアップロードしたい自分のウェブサイトの HTML を置く場所とする必要がある。

今回は、たとえば c:\projects\my-website という名前の場所に html ファイルを置くことにする。

コマンドプロンプトを開き、

cd  c:\projects\my-website

というコマンドで c:\projects\my-website に移動する。cフォルダを移動するには cd というコマンドを使うと覚えてほしい。

移動したら、

firebase init

を実行。

「 Are you ready to proceed?(準備はいい?)」と聞かれるので、Enter。

なんか選べと言われるので、

上下キーでカーソルを移動し、「Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys」にカーソルをあわせ、スペースキーを押してチェックを入れる。チェックが入ったら Enter。

「Please select an option」 と言われるので、「Use an existing project」を選んで Enter。

そうするとプロジェクト一覧が表示される。先ほど作ったプロジェクト名がここに表示されているはずなので、それを選んで Enter。

「What do you want to use as your public directory?」と聞かれる。アップロード対象のフォルダをどうするかという質問で、デフォルトは public というフォルダになっている。基本はこのままでよいが、今回は _site という名前にする。_site とタイプして Enter。続く「Configure as a single-page app (rewrite all urls to /index.html)?」は設定する必要はないので、そのまま Enter を押せばよい。「Set up automatic builds and deploys with GitHub?」も同様に何も設定しなくてよいので、そのまま Enter。ここまでで設定が完了する。

my-website_site フォルダに index.html というファイルが作られている。これを 前回 作ったものに置き換えよう。もちろん好きな内容に書き換えてもよい。

前回の HTML を以下に記載しておく。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>今すぐはじめられる個人ウェブサイト</title>
<style>
h1 {
  font-size: 128%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
p {
  line-height: 2.0;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<h1>個人ウェブサイトのつくりかた</h1>
<p>個人ウェブサイトの最小構成は一枚の HTML ファイル。「最近は CSS を覚えないとうんぬんかんぬん」ということを20年前から言われているが、まずやるべきことは一枚の HTML を書くこと。CSS はその後。</p>
<h1>HTML とはなんぞや</h1>
<p>原稿となるテキストデータに対して「ここは見出しにしたい」「ここは太字にしたい」という注釈をつけるとウェブブラウザがその注釈にそってきれいに表示してくれるというファイル形式。これが一番シンプルな説明だと思う。この注釈をつけることをマークアップすると呼ぶから HTML のようなものを指してマークアップ言語と呼ぶし、HTML の ML は Markup Language の略である。</p>
</body>
</html>

書き換えて保存したら、

firebase deploy

コマンドを実行する。

これで作った HTML をワールドワイドウェブにアップロードできた。

今後、HTML を編集してアップロードしたいときは、my-website フォルダの中で firebase deploy を実行するだけでよい。ログイン情報はお使いのコンピュータにキャッシュされているので FTP サーバを使っていた時代のように毎回ログインする必要はないし、my-website フォルダ内にどのプロジェクトに紐づいているかの情報が保存されているので、アップロード先の指定すら必要ない。アップロードは基本的に変更があったものだけを自動的に検出して行われるため、自分でアップロードするファイルを選択する必要もない。_site フォルダの内容が同期されるということを覚えておけばよい。アップしたファイルを消したかったら、_site フォルダからそのファイルを消して firebase deploy すれば消える。

ここまでの設定は少々込み入っており面倒に感じたかもしれないが、その面倒が吹き飛ぶくらい、今後のアップロード作業は便利になる。なんせ個人ウェブサイトの更新が滞る原因の一つが「ファイルをアップロードするのが面倒」だったりしたもので、だからこそブラウザで更新できるブログが流行ったりもした。だが、これくらいアップロードが簡単なら、ブログでなく個人ウェブサイトも充分選択肢になると思う。特にブログの広告を邪魔に感じている人にとっては、自分が自由にできる空間を手に入れられるということでもある。検討する価値は大いにある。

HTML の手書きをやめる

ここまで HTML の書き方を紹介してきたのに、HTML の手書きはやめようということを言うのはちょっとおかしい気がしなくもないが、これから紹介する Markdown という記法は、結局のところ HTML の糖衣構文――人間にとって書きやすくした別の表現方法――にすぎないので、HTML を知らずに Markdown を使うのはあまり本質的ではない。HTML のすべてを知る必要はなく、まあだいたいこういうものであるということだけ知っていればよいので、前回の記事くらいの理解度で充分足りる。足りるが、必要最低限、前回くらいの理解度はあったほうがよい。

Markdown から HTML を作る方法はいろいろあるが、今回は 11ty というツールを使う。これは npm でインストールできるので、インストールしていく。

my-website フォルダで

npm init -y

というコマンドを実行。これが下準備。今いるフォルダで npm によるパッケージ管理を有効化する。

それから

npm install --save-dev @11ty/eleventy

これで my-website 内に 11ty をインストールする。

アップロード対象のフォルダを _site にしたのは、今インストールした 11ty が生成する HTML のデフォルトの出力先が _site フォルダになっているからというだけの理由なので、11ty の設定を適切に行うなら public でも構わない。今回は 11ty の設定をスキップするために firebase 側の設定を 11ty に合わせている。他のツールも出力先フォルダがそれぞれ異なったりするので、ツールに合わせて変えるのがいいだろうと思う。

my-website 内に _includes というフォルダを作り、_site 内の index.html をこの中に移動し、index.njk という名前に変更する。

index.njk を以下のように書き換える。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<style>
h1 {
  font-size: 128%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
p {
  line-height: 2.0;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
{{ content | safe }}
</body>
</html>

11ty にはテンプレート機能があり、njk とはそのテンプレートファイルの拡張子になっている。これは前回紹介した MDN の記事を書くために実際に使われているテンプレート言語でもある。

11ty のテンプレート機能を使うと、テンプレートとなる HTML に内容を流し込んで完成された HTML を出力することができる。head 要素の中身を毎回書くのは大変なので、使い回したい。使い回したい部分はテンプレートに書き、ページごとに変わる内容だけを各ファイルに書いていくというのがやりやすいし更新しやすいし持続可能である。そして、流し込む内容を Markdown で記述すれば、HTML を書かずに、プレーンテキストに近い形でサイトの内容を記述できる。

というわけで、実際のページの内容が書かれた index.md を作ろう。

---
layout: index.njk
title: 今すぐはじめられる個人ウェブサイト
---
# 個人ウェブサイトのつくりかた

個人ウェブサイトの最小構成は一枚の HTML ファイル。「最近は CSS を覚えないとうんぬんかんぬん」ということを20年前から言われているが、まずやるべきことは一枚の HTML を書くこと。CSS はその後。

# HTML とはなんぞや

原稿となるテキストデータに対して「ここは見出しにしたい」「ここは太字にしたい」という注釈をつけるとウェブブラウザがその注釈にそってきれいに表示してくれるというファイル形式。これが一番シンプルな説明だと思う。この注釈をつけることをマークアップすると呼ぶから HTML のようなものを指してマークアップ言語と呼ぶし、HTML の ML は Markup Language の略である。

最初の --- から --- までの間は、そのファイルの情報を書くところ。layout は使用するテンプレート名で、_includes フォルダ内のファイル名を指定する。title はテンプレート内の {{title}} の部分に表示される文字列なので、ページごとに設定すればページごとにタイトルを変えられる。

--- から --- まで以降全部が内容になり、Markdown で書ける。

Markdown では # ではじまる行が h1 要素に置き換えられる。## で h2 要素、### で h3 要素となる。ハイフンと半角スペース - ではじまる行は箇条書き、数字とピリオドと半角スペースではじまる行は順番つきの箇条書き、大なりと半角スペース > ではじまる行は引用文……などもあるが、とりあえずこれくらいを覚えておけばいいだろう。それ以外は p 要素になる。前回 h1 要素と p 要素しか説明しなかったのは、これだけあれば Markdown の説明上は充分だったからだ。HTML の体裁的には Markdown の外側のほうが重要で、内容は Markdown で何が書けるのかということと、Markdown で表現されるものはあくまで HTML である、ということだけわかっていればよい。

index.md を編集したら、いよいよ 11ty で HTML に変換する。

npx @11ty/eleventy

実行すると、index.md_site\index.html として出力された旨が表示されると思う。これで _site 以下に _includes\index.njkindex.md を組み合わせて作られた index.html が出力された。

あとは firebase deploy を実行すれば、これがアップロードされる。

ここまで来れば、Markdown を書いて HTML を出力して Firebase Hosting にアップロードする、ということを、コマンドライン上ではコマンドニ回実行するだけでできるようになった。

あとは Markdown を書くだけである。

ページの体裁を整えたいだとか、リンクを張ったり画像を表示したりしたい……ということがあれば、Markdown の記法を調べていろいろ試してみるとよい。ここで説明しようと思っても、世の Markdown のリファレンス以上のことは説明できない。

www.markdown.jp

このあたりを見ればよいように思う。

11ty 自体は日本語の説明が少ない。公式ドキュメントは英語だが、しかしこれが一番確実な情報源である。

www.11ty.dev

そんなに難しい英語は書かれていない。ただし、技術的な知見が要求される場面はある。さいわいわたしは普段から JavaScript も 11ty も使い込んでいるので、何かあったらどんどん聞いてみてほしい。

個人ウェブサイトを公開するハードルはここまで低くなったし、周辺ツールの整備も本当に驚くほど整備されたと思う。11ty のようなツールは、20年前だと Bloxsom という perl 製のツールがあったが、それにかなり近い使用感でありながらも、あらゆる部分が近代化されてていて使いやすくなっている。いい時代になったとつくづく思うし、それだけに、今個人ウェブサイトが下火なのがもったいない。

たとえばわたしはゲームを作っているのだけど、昨日まさにゲームアツマールがサービス終了を発表し、代替サービスもいつまで持続可能かはわからない中で、自分が作ったゲームの情報を集約する場所が何らかのサービスに依存していていいのかな、と思う。ゲームはサイズが大きくなりがちなので、個人のホスティングスペースだと容量や転送量の面で厳しいから、ファイルの実体はどこかのサービスを使う必要があろうと思うが、ゲームの紹介サイト自体は自身のウェブサイトであるほうが、おそらくは今後生き残りやすいのではないかと思っている。Firebase Hosting が終了しないという根拠はないにせよ、手元にウェブサイトのデータがあれば、他のサービスに乗り換えたときも基本的にはそのサービスのツールを使ってコマンド一回叩くだけでよい、という状態はたぶん維持される。そのほうがレジリエンス高いよ。きっと。

というわけで、何かしらコンテンツを作っておられる皆さまにおかれましては、自身のコンテンツのある場所というものをほんの少し意識してもらって、個人ウェブサイトという選択肢もあるよ、勉強する必要はあるけど、覚えてしまえばずいぶん便利になったよ、ということをお伝えして、三回に渡る記事を締めくくらせていただく。


23日目はうのはなさんの「uMusicBotの使い方&技術解説」の予定です。お楽しみに!