• リンク
  • パート1
  • パート2
  • パート3

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://[取得したドメイン]/にアクセスしてページが表示されることを確認しましょう。

お疲れ様でした!