blog2018/11/26Gatsby+Firebaseを利用したブログの作り方ブログGatsbyFirebaseGatsbyで作成したブログをFirebaseで公開するまでの手順です。最初は躓くこともあるかと思いますが、なれると簡単です。お手軽にブログを公開できます。日頃から書き溜めているであろうマークダウンファイルが息を吹き返します。Firebaseに無料で使える枠があるので、独自ドメインを使わない限りは無料でできます。ドメインはあったほうが良いです。1年で1000円位支払えば十分それらしいものが取得できます。Gatsbyでローカルにコンテンツを生成します。SPAのブログができます。要素は静的なHTMLとjsなので、ホスティングするのは静的な要素のみです。データベース等は不要です。フォームとかは設置できません。広告とかは設置できます。Firebaseのホスティングで上記を満たすので、そこにコンテンツをアップロードして公開します。ドメインの設定方法は後日追記します。証明書の反映ざっくりこんな流れです。必要なプラグイン等は都度インストールしましょう。以下に詳細な手順を記載します。Gatsbyを使ってサイトをローカルに生成するローカル上でサイトを生成します。gatsby事前にnode.jsとnpmはインストールしておきましょう。部分は好きなディレクトリ名を指定、そこに必要なファイルやスクリプトが生成されます。後半のURLはスターターというテンプレートみたいなものを指定しています。いくつか公開されているものがあるので以下の中から好きなのを探せば良いです。developローカルで確認ブラウザで「localhost:8000」にアクセスすると、サイトが表示されます。設定を変更gatsby-config.jsの中身を修正します。デフォルトでも動きますが、サイトのtitleとか変えておきましょう。GoogleAnaliticsとかtwitterアカウントとか用意してあれば、設定しておくのが良いです。以下に記事を作成します。デフォルトでは記事ごとにディレクトリを作って書いている様子です。固定のページ作るときは.jsでファイルを作成。記事書く際は.mdでファイルを作れば自動的にHTML化されます。基本的な記事は.mdで作りましょう。一覧ページやタグごとのページなど特殊な処理が必要な場合は.jsで作ることになります。.mdファイルの書き方や書式はデフォルトであるファイルを参考に真似すれば問題ないです。基本的に「frontmatter」と呼ばれるファイルのアタマの部分の書式を真似して、本文はマークダウンで自由に書けば良いです。私は以下のようにしています。build上記コマンドを実行するとコンテンツが生成されます。public以下にファイルが生成されるので、それらをサーバに設置することで公開となります。生成したサイトをFirebaseで公開する先程生成したコンテンツをサーバに設置します。Firebaseでプロジェクトを作成Firebaseへようこその画面で「プロジェクトを追加」を選択します。場所を日本に設定あとはデフォルトで大丈夫です。画面左側のHostingを選択して、使ってみるを選択します。以降は基本画面に出る内容をそのまま実行していけば問題ないです。firebaseを利用しているGoogleアカウントの情報を入力します。initとりあえずHostingをチェック、他は今のところ不要ですprojectはさっきFirebaseで作ったやつを選択、あとで変更も可能です。publicディレクトリとして使うのはデフォルトのまま「public」SPA用の設定にするかというところは「yes」public/index.htmlは上書きしない「no」publicがデプロイディレクトリになっているので、この中身がFirebaseへデプロイされる対象になります。deployこれで先程のサイトが公開されているはずです。Firebaseの管理画面のHostingからURLを選択してアクセスして確認します。以前、以下の記事にてドメインの設定はまとめました。詳細に見たい場合はこちらもご確認下さい。私はお名前.comで取得しました。使いたいURLを検索して決定した後、コンビニ等でお金を払えばOKです。お名前.comの管理画面から確認できます。Firebaseの管理画面からドメイン接続を行うFirebase管理画面のHostingのメニューで「ドメイン接続」のボタンを選択します。接続したいドメインを聞かれるので、先程取得したドメインを入力します。プロバイダに追加して〜」と表示されます。そこに記載の値をこのあと使います。この画面のままおいておきます。google-site-verification=〜てやつです。ドメイン設定メニューのDNS関連機能の設定を選択して、「DNSレコード設定」を利用します。DNSレコードの内容を追加できるフォームが表示されるので、以下のように設定して追加します。上記の設定画反映されるまではしばらく時間がかかります。先程おいておいた画面から「確認」ボタンを押して先に進みます。上記で行った操作の反映が済んでいれば承認完了です。失敗する場合は時間をおいてからもう一度行いましょう。場合によりますが半日くらいかかる場合もあります(サイトによると最大72時間だそうです)。所有権が確認されると、FirebaseのHostingしているサイトのIPアドレスが表示されます。その内容をドメイン側に登録します。セットアップモード:クイックセットアップレコードタイプ「A」、値「IPアドレス」が2行表示されるので両方ドメインに登録します。お名前.comのドメイン設定メニューのDNS関連機能の設定を選択して、「DNSレコード設定」をもう一度利用します。DNSレコードの内容を追加できるフォームが表示されるので、以下のように設定して追加します。IPが2つ表示されていたので、2レコード追加することになります。反映にはまた時間がかかりますので気長に待ちましょう。反映が終われば設定完了です。取得したドメインにアクセスするとサイトが表示されるようになります。反映されてもしばらくのうちは証明書によるアラートが表示されます。時間が立つとFirebaseが証明書を発行してくれるので、待っていると解決します。反映の状況はFirebaseのHostingの管理画面から確認できます。ここまでで一通りサイトの発信が完了です。buildすると、public以下にサイトが出力されます。deployすることでpublic以下のファイルがFirebaseにデプロイされ、サイトが公開・更新されます。まとめこんな感じで簡単にWEBサイトが公開できます。カスタマイズしたいところですが、Gatsbyのカスタマイズ方法等はまだあまり情報がないです。このブログでもどんどん試してみて紹介していきます。自分の備忘のためにも手順まとめてみましたが、改めてやってみて簡単でした。上記の手順をまとめながら別カテゴリーの別ブログを公開してます。ドメイン等設定できたらリンク貼っておきます。editerマークダウン特化エディタアプリマークダウンのプレビュー・よく使う記号を入力するボタンが利用できます。野々市市コミュニティバスのっティ時刻表アプリルートとバス停を選択して時刻表が確認できます石川県野々市市に住むフリーランスエンジニア。応用情報とDBスペシャリストの資格を保有。Webシステムの構築、スマホアプリ、プログラミングメンターなどの依頼に対応できます。