ブログをリニューアルしました
約一年ぶりの記事更新及び約一年ぶりのサイトリニューアルとなってしまいました、みなさまいかがお過ごしでしょうか。
今回のリニューアルでブログの運用管理方法を刷新したので、今までのブログ更新方法と、それがどのように変わったのかを簡単にではありますが紹介していこうと思います。
リニューアル前
リニューアル前は以下画像のように React ベースのフレームワーク Gatsby.js を使用した SSG (Static Site Generator) 要は静的サイトとしてサイトを更新及び公開していました。
ブログの記事自体は AWS の勉強を兼ねて AWS の Amplify というサービスを利用して、記事の更新や実装の調整を GitHub にコミットプッシュ操作を行うと、それをトリガーとして Amplify 側でテストコードを実施し、パスしたら勝手に Gatsby のビルドスクリプトを走らせてデプロイまで行ってくれるというかなりお手軽と言える構成でした。
ただし、問題点もいくつかあり、コンテンツは Markdown 形式で入力したかったので MDX のプラグインを使用していたのですが、コンテンツを静的ファイルとしてどこかしらにおいてい置く必要があったので Gatsby の実装と同じ Git リポジトリで管理することとしました。
ただ、それにも問題があり、記事の更新が Git であったり Node.js が動作する環境でないと実質記事の更新が行えないという問題がありました。
これだと気軽に記事が更新できないですね （全然記事を更新していなかった言い訳）。
Gatsby は引き続き起用し、データソースを AWS の Amplify Backend を使用したり、microCMS 等の SaaS 型のサービスへの移行も検討しましたが、当然ながら SaaS なので、途中から規約や料金が消えたり、改悪されたりサービスの終了で代替を探したりする手間を考え始めてしまい、使用を断念しました。
SaaS 以外のデータソースの候補として Drupal を使用することも実はできるのですが、後述の理由で見送っています。
また Gatsby を使ったことがある人であればわかると思うのですが、実際に出力された HTML を見てみると何やらいろいろな JS が読み込まれているのが見て取れると思います。
きっとページのプリロードの兼ね合いだったり、SPA のような挙動を実現するために必要な JS の実装が施されているんだとは思うのですが、少なくとも個人ブログ用途としては不要なものだと考えていて、とにかくシンプルな HTML と CSS で素早くページが表示してくれれば良いと以前から考えていたので、個人的な悩みの種となっていました。
リニューアル後
実はリニューアル前のリニューアル前も Drupal を使用していたのですが、今回は Drupal を静的 CMS として使用することにしました。
ただし Drupal は動的 CMS として設計されているので、静的に使用するには 3rd パーティモジュールを導入するなりする必要があり、代表例として Tome モジュールを使用するのが通例っぽいのですが、今回は自前で静的 HTML を出力するモジュールを実装しています。
後は静的に HTML を出力したら AWS の S3 に格納し、CloudFront を用いて https 対応を行い、ホスティングをするだけという構成にしています。
構成的には Rapsberry Pi に直接 Drupal を入れているような図になっていますが、Docker compose を使用してコンテナ上で起動しています。
自宅の Raspberry Pi を DDNS を使用してそのまま公開したり、AWS の ECS を使用した方法も考えられたのですが、少なくとも当ブログを動的に公開することによって得られる恩恵が薄いのと、コスパも悪いと判断し、このような構成にしてみました。
これをベースとし、マークアップ観点での SEO 対策や、コンテンツ SEO （コンテンツの定期的な更新や拡充）を加味した施策を行っていこうと考えています。
今後も Pulog をよろしくお願いします。