Firebaseでドメインを設定する
前回はhugoを使ってローカルでブログを書きました(hajimete
というディレクトリ以下にブログファイルを作成しました)。今回はそれをFirebaseで公開して行きます。
Firebaseのコンソールに入りhositngの設定を始めます。
ドメインを接続
しましょう。
ドメインを入力したらDNSにTXTレコードを設定してドメインの所有者であることを示します。
DNSレコードの反映は最大24時間ほどかかりますので気長に待ちましょう。
ここまで完了したらあとはファイルのアップロードするだけです。
Firebaseクライアントのインストール
Firebaseにファイルをアップロードするためにfirebaseのコマンドラインツールを利用します。インストールはnodeから行います。
> npm install -g firebase-tools
# or
# yarn global add firebase-tools
インストールできたらコマンドラインツールからfirebaseにログインすます。
> firebase login
次はhajimete
ディレクトリに移動してfirebaseの初期化を行います。
firebase init
昔のクッパダンジョンを彷彿とさせるWelcome画面が出ますので十字キーでHosting
を選んで初期化します。Firebaseのプロジェクト名を入力すると初期化完了です。
.firebaserc
が作成されていれば正しく行えています。
> cat .firebaserc
{
"projects": {
"default": "[入力したプロジェクト名]"
}
}
Firebaseでデプロイ
firebaseでホスティングする際にどのローカルのどのディレクトリをホスティング対象にするか,,などをfirebaseに教えてあげる必要があります。hajimete
ディレクトリ以下に下記の内容でfirebase.jsonを作成しましょう。
> cat firebase.json
{
"hosting": {
"public": "./public",
"ignore": [
"firebase.json",
"database-rules.json",
"storage.rules",
"functions"
],
"headers": [{
"source" : "**/*.@(js|html)",
"headers" : [ {
"key" : "Cache-Control",
"value" : "max-age=0"
} ]
}]
}
}
hugoではpublic
ディレクトリにhtmlファイルが作成されますので
"public": "./public"
と指定しています。
firebase.json
のその他の設定について知りたい場合は公式ドキュメントを参照ください。
ここまで来たら残りはデプロイコマンドを入力するだけです。
> firebase deploy
上記の画面が出たらデプロイが完了しています。
https://[取得したドメイン]/
にアクセスしてページが表示されることを確認しましょう。
お疲れ様でした!