さいとブログ

ブログをGatsby.js+Netlify構成にした話

今回、はてなブログからGatsbyJS + Netlifyの構成でブログを移行しました。
1から自作する力はないため、スターターテンプレートのgatsby-stater-lumenを利用しました。

なぜ移行したのか？

はてなブログは、「とりあえずやってみるか」程度なら不満はないんですが、

  • 読み込みが遅い
  • Proプランだと維持費かかる
  • 外部依存が辛くなりそう

以上の、3つが長く続けていく上でネックになりそうと思いました。
なので、4月にはてなブログで開設、7月に今の構成に移行という形にしました。

ここから移行しようと思った理由の3つについて深掘りします。

読み込みが遅い

これについては、はてなブログだけではなく、QiitaやWordPress製でも同じだと思ってます。
ページ遷移するたびに読み込みが発生するウェブサイト全般に言えることです。
GatsbyJSでビルドしたページは、SPA(Single Page Application)として動作します。
SPAのページはJavaScriptを用いてHTMLを部分的に差し替えてコンテンツを切り替える為、高速な画面遷移を実現します。

高速な画面遷移で閲覧者に対して、ページ遷移のストレスから解放することができます。

Proプランだと維持費がかかる
これについてはケチりましたwww
2020年7月5日時点で1ヶ月コースだと、¥1,008/月 かかります。

じゃあ、GatsbyJS + Netlifyはどうなんだと。
現時点で、当ブログはドメイン料の ¥1,170/年 のみで運用してます。
ドメイン取得しなかったら、無料で運用も可能です。その場合のURL末尾はnetlify.appになりますが。。（許容範囲ないでしょう）

Netlifyの無料枠なので制限はありますが、技術ブログとして利用する分には許容範囲内です。
Netlify公式サイトによると（2020年7月5日時点）

  • 1チームメンバー（$ 15 /追加ユーザー）
  • 1つの同時ビルド
  • 100 GBの帯域幅/月
  • 300ビルド分/月
  • 継続的な展開
  • アドオンへのアクセス


外部依存

こちらについては、はてなブログというサービスを利用しているので万が一閉鎖したら、記事を失うことにもなりそうで怖いです。
一方、当ブログはMarkdownファイルに書いてリモートにpushするだけなので、GitHub上にもローカルPCにも記事データが残っている状態なので、安心です。

デメリット

いい点ばかり述べたので、デメリットについても述べます。

  • React, JavaScript, GraphQLの知識が必要
  • UIの変更で開設まで時間がかかる
  • 日本語のドキュメントが少ない


こちらも3つ上がりますが、特に初めの2つについては自分はデメリットに感じなかったです。
というのも、知識については丁度勉強したいと思っていたことと、UIについては自由度が広がりカスタムできるからです。

最後の日本語ドキュメントについては、探すのに苦労しました。見つけても上手く適用できなかったりと苦労しましたが、これも勉強の内と思い、なんとか移行して公開できるレベルまで持っていくことが出来ました。

最後に主に参考にした記事を羅列します。



### 参考


プロフィール

profile icon

saitoです。
ソフトウェアエンジニアとして働いています。
web開発に関する学びを当ブログに書き残しています。

GitHubTwitterZenn