Gatsby+Firebaseを利用したブログの作り方

Gatsbyで作成したブログをFirebaseで公開するまでの手順です。最初は躓くこともありますがなれると簡単です。お手軽にブログを公開できます。日頃から書き溜めているであろうマークダウンファイルが息を吹き返します。

Firebaseに無料で使える枠があるので、独自ドメインを使わない限りは無料でできます。でも、ドメインはあったほうが良いです。1年で1000円位支払えば十分それらしいものが取得できます。

Gatsbyでローカルにコンテンツを生成します。SPAのブログができます。 要素は静的なHTMLとjsなので、ホスティングするのは静的な要素のみです。データベース等は不要です。 ですので、フォームとかは設置できません。広告とかは設置できます。

Firebaseのホスティングで上記を満たすので、そこにコンテンツをアップロードして公開します。 ドメインの設定方法は後日追記します。

やること

Gatsbyを使ってサイトをローカルに生成する
    Gastbyのインストール
    Gatsbyでブログテンプレートを使ってプロジェクトを作成
    開発サーバー開始
    ローカルで確認
    設定を変更
    コンテンツを作成
    ビルド

生成したサイトをFirebaseで公開する
    Firebaseでプロジェクトを作成
    Hostingの設定
    Firebaseにデプロイ

Firebaseに独自ドメインを連携
    独自ドメインを取得
    Firebaseの管理画面からドメイン接続を行う
    ドメインにTXTレコードを追加
    Firebaseからドメイン所有権の確認
    ドメインに対応するIPの設定
    証明書の反映

ざっくりこんな流れです。必要なプラグイン等は都度インストールしましょう。
以下に詳細な手順を記載します。

Gatsbyを使ってサイトをローカルに生成する

ローカル上でサイトを生成します。

Gastbyのインストール

npm install -g gatsby

事前にnode.jsとnpmはインストールしておきましょう。

Gatsbyでブログテンプレートを使ってプロジェクトを作成

gatsby new sub_blog https://github.com/gatsbyjs/gatsby-starter-blog

sub_blog の部分は好きなディレクトリ名を指定、そこに必要なファイルやスクリプトが生成されます。
後半のURLはスターターというテンプレートみたいなものを指定しています。いくつか公開されているものがあるので以下の中から好きなのを探せば良いです。
Gatsbyのスターター

開発サーバー開始

cd sub_blog
gatsby develop

ローカルで確認

ブラウザで「localhost:8000」にアクセスすると、サイトが表示されます。

設定を変更

gatsby-config.jsの中身を修正します。

とりあえずデフォルトでも動きますが、サイトのtitleとか変えておきましょう。 GoogleAnaliticsとかtwitterアカウントとか用意してあれば、設定しておくのが良いです。

    {
      resolve: `gatsby-plugin-google-analytics`    ,
      options: {
       //trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },

コンテンツを作成

src/pages 以下に記事を作成します。デフォルトでは記事ごとにディレクトリを作って書いている様子です。

固定のページ作るときは.jsでファイルを作成。記事書く際は.mdでファイルを作れば自動的にHTML化されます。
基本的な記事は.mdで作りましょう。一覧ページやタグごとのページなど特殊な処理が必要な場合は.jsで作ることになります。

.mdファイルの書き方や書式はデフォルトであるファイルを参考に真似すれば問題ないです。 基本的に「frontmatter」と呼ばれるファイルのアタマの部分の書式を真似して、本文はマークダウンで自由に書けば良いです。 私は以下のようにしています。

---
title : 'Gatsby+Firebaseを利用したブログの作り方'
date : '2018-11-26'
tags : ["ブログ","Gatsby","Firebase"] 
category : 'blog'
---

本文をここに書く

ビルド

gatsby build

上記コマンドを実行するとコンテンツが生成されます。 public以下にファイルが生成されるので、それらをサーバに設置することで公開となります。

生成したサイトをFirebaseで公開する

先程生成したコンテンツをサーバに設置します。

Firebaseでプロジェクトを作成

Firebaseへようこその画面で「プロジェクトを追加」を選択します。

プロジェクトの名前を設定
場所を日本に設定

あとはデフォルトで大丈夫です。

Hostingの設定

画面左側のHostingを選択して、使ってみるを選択します。 以降は基本画面に出る内容をそのまま実行していけば問題ないです。

Firebase ツールをインストール。

npm install -g firebase-tools

ターミナル ウィンドウを開き、サイトのディレクトリに移動するか、ディレクトリを作成します。

cd sub_blog

Google にログインします。firebaseを利用しているGoogleアカウントの情報を入力します。

firebase login

プロジェクトを開始。

firebase init

とりあえずHostingをチェック、他は今のところ不要です。

projectはさっきFirebaseで作ったやつを選択、あとで変更も可能です。

publicディレクトリとして使うのはデフォルトのまま「public」。

SPA用の設定にするかというところは「yes」。

public/index.htmlは上書きしない「no」。

publicがデプロイディレクトリになっているので、この中身がFirebaseへデプロイされる対象になります。

Firebaseにデプロイ

firebase deploy

これで先程のサイトが公開されているはずです。Firebaseの管理画面のHostingからURLを選択してアクセスして確認します。

Firebaseに独自ドメインを連携

以前、以下の記事にてドメインの設定はまとめました。より詳細に見たい場合はこちらもご確認下さい。
ドメインの取得・Firebaseへの設定

独自ドメインを取得

私はお名前.comで取得しました。 使いたいURLを検索して決定した後、コンビニ等でお金を払えばOKです。 お名前.comの管理画面から確認できます。

Firebaseの管理画面からドメイン接続を行う

Firebase管理画面のHostingのメニューで「ドメイン接続」のボタンを選択します。 接続したいドメインを聞かれるので、先程取得したドメインを入力します。

「以下の TXT レコードを DNS プロバイダに追加して〜」と表示されます。 そこに記載の値をこのあと使います。この画面のままおいておきます。

google-site-verification=〜
てやつです。

ドメインにTXTレコードを追加

お名前.comでは ドメイン設定メニューのDNS関連機能の設定を選択して、「DNSレコード設定」を利用します。

DNSレコードの内容を追加できるフォームが表示されるので、以下のように設定して追加します。

TYPE：TXT
VALUE：google-site-verification=〜
状態：有効

上記の設定画反映されるまではしばらく時間がかかります。

Firebaseからドメイン所有権の確認

先程おいておいた画面から「確認」ボタンを押して先に進みます。

上記で行った操作の反映が済んでいれば承認完了です。失敗する場合は時間をおいてからもう一度行いましょう。場合によりますが半日くらいかかる場合もあります（サイトによると最大72時間だそうです）。

ドメインに対応するIPの設定

所有権が確認されると、FirebaseのHostingしているサイトのIPアドレスが表示されます。その内容をドメイン側に登録します。

セットアップモード：クイックセットアップ

レコードタイプ「A」、値「IPアドレス」が2行表示されるので両方ドメインに登録します。

お名前.comのドメイン設定メニューのDNS関連機能の設定を選択して、「DNSレコード設定」をもう一度利用します。 DNSレコードの内容を追加できるフォームが表示されるので、以下のように設定して追加します。 IPが2つ表示されていたので、2レコード追加することになります。

TYPE：A
VALUE：Firebaseで表示されたIP
状態：有効

反映にはまた時間がかかりますので気長に待ちましょう。

反映が終われば設定完了です。取得したドメインにアクセスするとサイトが表示されるようになります。

証明書の反映

反映されてもしばらくのうちは証明書によるアラートが表示されます。 しばらく時間が立つとFirebaseが証明書を発行してくれるので、待っていると解決します。

反映の状況はFirebaseのHostingの管理画面から確認できます。

ここまでで一通りサイトの発信が完了です。

サイトの更新

以降はgatsby buildすると、public以下にサイトが出力されます。
firebase deployすることでpublic以下のファイルがFirebaseにデプロイされ、サイトが公開・更新されます。

まとめ

こんな感じで簡単にWEBサイトが公開できます。 いろいろカスタマイズしたいところですが、Gatsbyのカスタマイズ方法等はまだあまり情報がないです。 このブログでもどんどん試してみて紹介していきます。

自分の備忘のためにも手順まとめてみましたが、改めてやってみて簡単でした。上記の手順をまとめながら別カテゴリーの別ブログを公開してます。ドメイン等設定できたらリンク貼っておきます。

別テーマのブログ