GatsbyJSとは
GatsbyJSとはReactをで作られた静的サイトジェネレータです。
なぜGatsbyJSで作成したのか
ブログを作るなら低価格がいいと思ったのと、Reactなど様々な技術の勉強にるからです。
このブログ作成に使用したもの一覧
- GatsbyJS
- React
- GraqhQL
- TailwindCSS
- PostCSS
サーバーなどのツール一覧
- CircleCI
- AWS Route53
- AWS S3
- AWS Cloud Front
- AWS API GateWay
- AWS Lambda
- AWS SES
良かった点
爆速
GatsbyJSを選択する一番の理由がこれだと思います。
ReactやGraqhQLに触れられたのでいい勉強になった
GraqhQLは触ってみたかったので勉強になった。
低運用費
いろいろツールを使用しているが、無料範囲内などでできているので、大して料金が掛からない。
PG・SEとしてのポートフォリオになる
Reactなんかのスキル証明になる…のかな?
あとWordPressでのブログよりなんとなくかっこいい。
不満点・微妙なところ
基本的に静的サイトなので検索システム等が難しい。
Algoliaを使用して、実装する手法もあるがユーザーが検索を多用するとすぐに無料枠が圧迫される可能性がある。
Contentful等のHeadlessCMSと連携する方法もあり、提供されているREST API宛に非同期通信(fetchやaxios)で検索リクエストを飛ばせばできるが、これも前記と同じように、ユーザーが検索を多用してしまい無料枠が潰される可能性がある。
WordPressとも連携ができ、HeadlessCMSのようにあつかえるが、WP側でサーバー代が掛かってしまうのでWordPress単体の場合と比べて、割高になる可能性が高い。
しかし、前記2つと違いサーバー側を自由にいじれるのでセキュリティを高めたり、スケーリングも可能。
また、WordPress単体のサイトより速度が圧倒的に速いためユーザーからの満足度も高い。
お問い合わせページの導入が難しい
前記と共通部分も多いが、これがかなり大きい問題だと思う。
仕事等の依頼も受けたいと考えている人も多いからね・・・
思い切ってSNSからのお問い合わせのみにするというのも手の一つ。
このサイトは、AWS LambdaとAWS SESでno-replyメールを送信して、返信などは別のメールアカウントでするようにしています。
一般的にはSendGridなどに登録して、AWS LambdaやNetlify Functionsを使用している人が多い。
問い合わせ内容のデータベースへの登録はあきらめている人が多い傾向にある気がします。
Google フォームを使用するのもありだが、かなり好みが分かれます。
コメントページの導入が難しい
Disqusというサービスを導入するのが一般的らしい。
これを導入すれば、snsアカウントで書き込みが行われます。
匿名投稿を導入したいなら、前記などのようにWordPressなどでREST APIを作るしかない。
このサイトではコメント欄は無しにしました。
荒らし等が多いですし、作成・管理にもかなり気を使うのでいらないです。
ビルドに時間がかかる
ビルドに時間がかかるので記事が多くなってくると、即更新とはいかないときもあります。
また、サービス・ツールで料金が発生してしまう場合もあります。
作成の手軽さや管理コストなどを考えるとWordPress等のほうが良い
Reactに慣れてる人ならGatsbyJSの方が速いかも知れないが、周りのツールなども選定が多い。
WordPressはプラグインも多く、すでに完成品のためコーディング時間が掛からないこともあります。
GatsbyJSもプラグインはあるが、基本的にコードを書かないといけなくて時間がかかります。
特にパッケージの更新は、依存関係がかなり深いので結構気を遣います。
純粋にアップデートしただけじゃnpm auditのセキュリティ警告が消えないこともあります。
WordPressもパッケージ更新で苦労することもありますが、nodeパッケージよりは楽なことが多いと思います。
基本的にマークダウンで書かないといけない
CKEditorなどのWYSIWYGエディタに慣れているとマークダウンは使いづらいかもしれません。
TyporaみたいなWYSIWYGなマークダウンエディタもあるので、試してみるといいでしょう。
WordPressと連携したり、HeadlessCMSを使用したりすれば、WYSIWYGエディタが用意されていることが多いので手軽に記事が書けるようになると思います。
まとめ
不満項目が多いですが、全体的には満足しています。
低運用費 これに越したことはないです。
まだ問題点が多く、仕事や業務に使うほどではないですが、静的サイトジェネレータの動向に注目していきます。
