いまブログを始めるならGatsbyJS+Netlifyがオススメ！

オリジナルの記事はこちら

こんにちは。mono（@mono7555e）です。

今回は新しくブログを立ち上げた際に使ったGatsbyJSとNetlifyのご紹介です。
新しくブログを立ち上げようとしている方やWordPressに疲れた方には参考になるんじゃないかと思います。

GatsbyJSとは

https://www.gatsbyjs.org/

GatsbyJSはReactで作られた静的サイトジェネレーターです。
JSONやYAML、XMLなど扱うデータを全て一回GraphQLで取り出せるように変換してくれるので、様々なデータが扱いやすく、コンポーネント化がしやすいという特長があります。

また、プラグインも豊富で大抵の場合、既にプラグインがあるのでそれを使うように設定してあげればOKです。

今回のブログ立ち上げの際にもMarkdownで記事が書けるというのを必須事項にあげていたのでgatsby-transformer-remarkというプラグインを利用してMakrdownファイルをGraphQLで扱えるようにしました。

他にもsitemap.xmlを生成してくれるgatsby-plugin-sitemap、Google Tag Managerのタグを入れてくれるgatsby-plugin-google-tagmanagerなど利用しています。

なぜWordPressを使わなかったのか

ブログを立ち上げるとなると真っ先に思い浮かぶのがWordPressだと思います。
ですが、今回は使うのをやめました。
WordPressを使った経験はある方なら分かると思うのですが色々つらみを感じているからです。

セキュリティが不安

WordPressはかなり使われているので様々な方面から狙われやすいです。
セキュリティパッチ等のアップデートを忘れているとすぐに狙われて乗っ取られたり、悪意のあるコードを埋め込められたりする恐れがあります。

管理が大変

前述の通りセキュリティが不安なのでセキュリティパッチが降ってきたらすぐに適用したいのですがカスタマイズをバリバリやっていたりプラグインを使っている場合、それらが邪魔をしてアップデートが出来ないことがままあります。
また、WordPressだけでなくPHPやWebサーバーの管理等も必要なのでその辺りも大変です（レンタルサーバーの場合はその辺り任せられるので楽ですが、カスタマイズがしづらい場合もあります。）

PHP書くの辛い

最後はかなり個人的な理由です。
WordPressはPHPで作られているので、ある程度カスタマイズをしようと思うとPHPでコードを書く必要があるのですが、PHPは書いててあまり楽しい言語ではないので出来れば避けたいと思っています。

なぜブログサービスを使わなかったのか

WordPress以外にもブログをはじめるのに使えるサービスがいくつかありますが、Markdown、アフィリエイト、カスタマイズ性の辺りがマッチせず使うのを諦めました。

有名なところだとAmebaブログ、ライブドアブログ、fc2ブログなどがありますが、それらのブログサービスはMarkdownで記事が書けないので除外しました。

Markdownが使えるのは、調べた限りだとMedium、note、Qiita、はてなブログぐらいですが、それらも他の部分がネックになりました。

Medium

使ったことがないので何とも言えないところですが、日本で使っている人が少ない印象で、検索に引っかかることもないのでSEOにも強くなさそうな印象です。
2017年に日本から撤退しているのも気になりました。

note

アフィリエイトが貼れなかったり、カスタマイズも出来ないのがちょっと辛いかなと。
ただ、有料記事が販売できたりするのでブログとは別に利用しようと思っています。

https://note.mu/mono7555e

Qiita

noteと同様にアフィリエイト、カスタマイズが出来ないのと、プログラミングに関するものしか投稿できないというのがネックです。
もしかしたらめちゃくちゃコードを見せるような記事はQiitaに書くかもしれません。

一応登録だけはしました。

https://qiita.com/mono7555e

はてなブログ

4つの中だと、はてなブログは結構良くてサクッと立ち上げるならオススメです。
独自ドメインを設定する場合は有料プランになってしまいますが気にしない方なら無料版で事足りると思います。
今回はガッツリカスタマイズしたかったのでやめました。

GatsbyJSを選んだ理由

ということでGatsbyJSです。

GatsbyJSはReactベースでGraphQLでデータを扱うというのが当時、流行っていたというのもあって採用することにしました。

GatsbyJSの良いところ、悪いところ

高速

WordPressなどと違い事前にHTMLを生成してあるのでレスポンスが高速です。

維持費が安い

基本的には静的HTMLを置いておくだけでOKなので、AppサーバーやDBは不要。
後述するNetlify等の静的サイトをホスティングするサービスを使うだけでほとんどの場合事足ります。

豊富なプラグイン、ライブラリ

公式、非公式に関わらずプラグインが多数あるのと、npmも使えます。
それらの組み合わせで作ることが出来ます。

専門知識が必要

一方で、ReactやGraphQL、ES6等の知識が必要です。
フロントエンドエンジニアの方であれば問題ないと思いますが、そうでない場合は少しキャッチアップが必要かもしれません。

GatsbyJSを採用したのでホスティングを考えなければなりませんが、GatsbyJSを使うならNetlifyを使うというのがデファクトスタンダードになっています。
なので私も例に漏れずNetlifyを使うことにしました。

Netlifyとは

https://www.netlify.com/

静的サイトをホスティングしてくれるサービスです。
GitHubやBitbucketのリポジトリと連携するだけで、pushを検知して自動でビルド、デプロイしてくれます。

Netlifyの良いところ

無料で独自ドメインを設定できる

基本的には.netlify.comのサブドメインが設定されますが、独自ドメインを持っていればそれを無料で設定できます。

無料でHTTPSにできる

.netlify.comのサブドメインであっても、独自ドメインであってもHTTPSにするのは無料で出来ます。

デプロイ前にプレビューできる

ブランチを切ると自動的にプレビュー用のサイトが自動で作られるので変更内容を公開前に確認できます。

悪いところも書こうと思ったんですが思いつかないですね…
一応、無料だと100GBまでの転送量の制限がありますが、多くても数100MBぐらいしか使わないと思うので全然問題ないかなと思います。

まとめ

私はブログを立ち上げるときの条件

• WordPress以外
• 独自ドメインが使える
• Markdownで書ける
• カスタマイズしやすい

これらを満たすのがGatsbyJSとNetlifyの組み合わせだったので使用しています。

同じような条件で検討されている方はGatsbyJSとNetlifyの組み合わせがオススメなので是非試してみてください。