Honmushi blog
ブログをNetlifyに移動しました2019/01/16

ブログをNetlifyに移動しました

このブログはGatsbyで生成した静的なファイルを、Firebaseでホスティングしていました。 このたび、Netlifyへ移行しこちらで発信するようにしました。かなり便利です。

このような便利なサービスがどんどん出てきますね。使ってみてよかったです。 Netlifyでブログを発信することにした経緯と基本的な情報を書いておきます。

手順については以下の記事で記録しておきます、合わせて参考にしていただければと思います。
NetlifyでGatsbyブログを発信する手順

なぜFirebaseをやめるか

無料枠のアカウントを使っていたのですが、ファイルアップロードの容量制限に到達してしまいました。 これ以上は有料なプランにしないと運用できなくなってしまいました。

詳細には以下の記事に書いていますが、容量計算の考え方が「これまでのデプロイでアップロードした累計のファイルサイズ」となっているため、実際のコンテンツのサイズよりも何倍も容量を消費していました。

Firebaseでブログをつくるのはおすすめできない

容量が1GBまでというのも原因としてあります。有料のアカウントを使うことで10GBまたは従量課金にすることができますが、あっという間にそれもいっぱいになる可能性があるので諦めました。

Netlifyとは

ホスティングサービスです。GitHub pagesやFirebase Hostingと同じです。ほかにも結構いろいろなことに使えるようです。静的コンテンツをホスティングできます。

特徴

  • ビルドやデプロイを自動で行う
    あんまり信じてなかったんですが簡単にできました。とても便利です。

    FirebaseやGitHub Pagesでは、ローカルでgatsby buildして、public/以下に生成される静的なソースをデプロイする必要がありました。しかし、Netlifyではビルドを代わりにやってくれます。

    ですので、src/以下のファイルとgatsby-config.jsやgatsby-node.js、package.json などの設定ファイルのみをアップロードしておくだけでよいです。srcへの変更を察知して、Netlifyがgatsby buildを実行して、public/以下に出力されるファイルを自動でデプロイして公開してくれます。

    もちろんGatsby pagesのようなイメージで、public/以下のみをアップロードしておいて、ローカルでgatsby buildをおこなってpublic/以下をアップロードして更新する方法も可能です。

    Gatsby以外のブログ生成アプリにも対応しています。以下は対応してそうです。他にも使えるものがあるかもしれません

    + Jekyll
    + Grunt
    + Middleman
    + Hexo
    + Hugo
    + Gatsby
    + VuePress
  • GitHubなどと連携できる
    GitHub・Gitlab・Bitbucketと連携できます。リポジトリからソースを持ってきてビルドできます。 リポジトリにプッシュされたことをトリガーに、自動ビルド→自動デプロイができます。
  • HTTP/2とCDN利用によって高速
    HTTP/2対応していることと、CDNを使わせてもらえるので速いはずです。 これらも勝手に設定してくれます。逆に詳細に設定変えることはできなさそうです。
  • カスタムドメイン
    独自ドメインを設定できます。お名前ドットコムなどで取得したドメインを使ってサイトを発信することができます。
  • SSLにも対応
    無料でSSL証明書を用意してくれます。ですのでHTTPSでの配信も無料で行なえます。
  • アカウント作成
    無料枠はメールアドレスやGitHubなどのアカウントを使って利用できます。クレジットカードの登録は必要ありませんでした。

    フリープランだととりあえず以下の制限になっています。(2019/01/16時点)

    ネットワーク転送量:100GB/月  
    容量:100GB  
    デプロイ時のAPIリクエスト: 500リクエスト/分、3デプロイ/分

    チーム向けのプランもあるので、通常の無料枠では複数人での管理はできないと思います。

詳細は以下(英語です、そのうち訳してみます)
https://www.netlify.com/tos/

つかっているもの

Gatsby

node.jsとReactによる静的ブログ生成ができます。 詳細なことはここには書きませんが、SPAもPWAも対応できるのでおすすめです。

記事はマークダウン形式で書いています。

GitHub

ソースの管理はGitHubを使っています。最近プライベートリポジトリが無料枠でも使えるようになったので利用しています。

Netlify

上記で説明している静的コンテンツのホスティングサービスです。

やってみた感想

便利でした。実際のサイトの発信もいまのところ問題なさそうです。

ローカルでsrc/以下のマークダウンファイルを作成・編集して、gitでコミット、GitHubへプッシュを行えば、 Netlifyが感知してbuild、deployをやってくれます。

簡単にサイトを公開できました。これからはローカルでのビルドが必要なくなるのでとても快適です。 手順は以下の記事に書いてます。参考になれば。
NetlifyでGatsbyブログを発信する手順

懸念

1点、使っている容量等を確認できる画面が無い?ので心配です。 容量使いすぎたりすると、何らかの形でお知らせされるのだと思います。

  • このエントリーをはてなブックマークに追加