revo-Labo

技術ブログを作成 (1)システム選定

2024-07-24
技術
Astro

技術ブログを作った

アウトプット用の場所を作りたくて、技術ブログを作りました（このサイト）。
システムについては結構悩んだんですが、最終的にはAstroで静的サイトとして作ることを選択しています。

選択肢と選定の経緯

WordPress

ブログでWordPress、一番無難でメジャーなやり方ですよね。もちろん最初に検討しました。でも個人的にWordPressって、弄っていて楽しくないんですよね…
なんていうか、テーマに独自関数とか追加して「このテーマでしか使えない機能」みたいなのが普通にあるじゃないですか。それって機能とデザインを分離するという原則を簡単に破れるってことじゃん！てなってすごく気持ち悪いというか…

PHP製CMS

WordPress以外のCMSを使う選択肢も考えました。具体的にはDrupalとかGravとかbaserCMSとかでしょうか。
DB使うのは大掛かりすぎる気がするし、かといってフラットファイルCMSは記事数が増えた時の挙動が不安だし…となって、選定できませんでした。

  • Drupal ： Web-DBやコミュニティサイトが主戦場だと思っていて、ブログに使うにはオーバースペックに思える
  • Grav ： ミニサイト用に設計されたシステムなので、記事数が多くなるとキツくなりそう
  • baserCMS ： バージョンアップでプラグインもテーマも全滅してるっぽい？

静的サイトジェネレータ

ブログを作る方法を調べると、結構な割合で静的サイトジェネレータが出てくるんですよね。
Markdownで記事書けたりと利点が多いのはわかってましたけど、運用する仕組みを整えないといけないなど事前準備が大変な印象で、選択肢から外していました。
が、今までの選択肢がどれも決め手に欠けていたこともあって、改めて検討してみることに。

静的サイトジェネレータについて検討する

静的サイトジェネレータは、ローカルでHTMLを作成しサーバにはその生成したHTMLを置いておくことで、サーバ側でプログラムを実行せずともサイトを表示できる仕組みです。

メリット

  • 動的サイトに比べシステムへの負荷が軽く、運用コストが低くなる可能性が高い
  • 動的サイトに付きまとう「管理画面のセキュリティ」問題を気にしなくてもいい
  • 記事をgitで管理できデプロイが楽
  • Markdownをベースに記事を作成できる

システムへの負荷が軽く、運用コストが低くなる可能性が高い

なんといっても、サーバーでプログラムを動かす必要がないのでシステムへの負荷がかからず、結果として運用コストが低くなる可能性が高いことが魅力です。

WordPressを含めたCMSの場合、当然ですがどこかにPHPなどのプログラムが動くサーバを用意する必要があり、大抵はレンタルサーバを利用することになるでしょう。
一方、静的サイトはファイルをHTTP(S)で配信できれば十分で、サーバーサイドでプログラムを動かす必要はありません。

レンタルサーバはサーバー側でプログラムを動かすことを想定しているサーバーなので、静的サイトにとってはオーバースペックです。
今は静的サイト専用のホスティングサービスが存在します。このようなサービスを使うとレンタルサーバーより低コストでホスティングできるため、運用コストが低く抑えられるでしょう。

「管理画面のセキュリティ」問題を気にしなくてもいい

サーバーでプログラムを動かさないが故の、セキュリティに対する安心感も魅力です。
静的サイトにはログイン画面が存在しないため、管理画面に不正アクセスされてどうこうといったことは起きようがありません。

記事をgitで管理できデプロイが楽

レンタルサーバーを利用する場合、ファイルはFTPでアップロードすることが多いと思うのですが、静的サイトホスティングサービスではFTPを使う必要はほぼありません。
大抵の静的サイトホスティングサービスはgitHubやgitLabなどのgitホスティングサービスと連携でき、gitのリモートリポジトリに変更内容を登録すると自動で更新するように設定することができます。
どれが新しいか、古いファイルを間違えてUPしないようになど気を使う必要はありません。

このようにgitと連携できるため、導入やリニューアルの際などに試行錯誤がやりやすいでしょう。
新機能を試したければブランチを作ればいいのです。

Markdownをベースに記事を作成できる

Markdown記法はいまやコンテンツを記述する場合のデファクトスタンダード状態になっています。
例えばCMSで記事を書くときにMarkdown記法が使えるように試行錯誤することなどはよくあることだと思うのですが、大抵の静的サイトジェネレータはMarkdown記法に対応しているため、そのような試行錯誤は不要です。

デメリット

もちろん、メリットばかりではありません。

  • 運用システムを組み上げる必要がある
  • Web画面から投稿や編集などができない
  • gitとMarkdownを使って管理することが事実上必須
  • ビルドにコストがかかるため、記事を何度も修正する（ビルド回数が増える）ような使い方は向かないかもしれない
  • 動的要素をどうするのか、考える必要がある

運用システムを組み上げる必要がある

開発環境を作るだけではなく「運用する仕組みを整える」といった、技術とは違う正解がないものを一から検討する必要があります。
記事を追加・更新する仕組みを自分で一から考えて組み上げる必要があるというのは結構なデメリットだと思います。
動的サイトならログインして利用するだけでいいわけですから。

Web画面から投稿や編集などができない

メリットの裏返しになりますが、やはり管理画面が存在しないことは大きいでしょう。
ブラウザでログインして記事を書き、完成しなかったら下書き保存しておいて後で続きを書いて公開…みたいなことができるのは、Webの管理画面があるからです。
前述の通り、静的サイトで記事を追加したい場合、新規でMarkdownファイルを作成しgitに登録する手順を踏みます1。
これはWebの管理画面にログインして編集画面で入力する動的サイトのCMSに比べるとどう考えてもハードルが高いと言えます。

また、システムによっても事情は異なるでしょうが、Markdownだけでは「どのようなページになるのかわからない」のもマイナスかもしれません。
CMSの管理画面で記事を書いた場合、その場で簡単にプレビューしてどのようなデザインで公開されるのか確認できることがほとんどですが、静的サイトジェネレータの場合、ビルドするか開発サーバを起動するまでどのようなページになるのかわからないことが多いでしょう。エディタでMarkdownを書いているときは、どのようなページになるかは想像するしかありません。

gitとMarkdownを使って管理することが事実上必須

前述の通り、静的サイトはgitとMarkdownを使って管理することが実質必須ですが、これは必ずしもメリットになるとは限りません。
例えば場合によっては学習コストが高いかもしれませんし、他にも、Markdownは文章が多めの文書を前提としたフォーマットであるため、絵や図が多めだったり見た目にこだわった記事を書きたい場合は「Markdownで書くしかない」ことはデメリットになるかもしれません。

また、静的サイトホスティングサービスは基本的にgitHubなどのリポジトリサービスを使うことを前提として作られているので、外部のリポジトリサービスを使いたくない場合は大変かもしれません。

ビルドにコストがかかるため、記事を何度も修正する（ビルド回数が増える）ような使い方は向かないかもしれない

静的サイトホスティングサービスは、ビルドに回数などの制限があることが多いです。
また、当然ですがビルドにはある程度の時間がかかります。
静的サイトで記事を公開したり修正したい場合にはビルドし直すことになるので、最初に投稿してから記事を何度も修正するような使い方は向かないかもしれません。

動的要素をどうするのか、考える必要がある

また、ブログは基本静的なコンテンツですが、それでも一部動的な要素が存在していることがあり、それをどうするのか考える必要があります。
具体的にはコメントやコンタクトフォーム、記事検索、人気記事一覧といった要素です。

どうする？

静的サイトジェネレータが万能とは思いません。むしろ、どちらかと言えば玄人向けだと思います。
でも、「技術ブログ」ということを考えた場合、静的サイトジェネレータはアリかな、と判断しました。
CMSより泥臭いですけど、運用コストを低く抑えられるし、gitの勉強にもなりそうだし、慣れておけばいつか役立つかもしれないし（例えばコーポレートサイトやランディングページに静的サイトジェネレータ便利そうだなと思ったので）。

静的サイトジェネレータの選択肢

静的サイトジェネレータと一言で言っても、選択肢は無数に存在します。
有名どころだとこんな感じでしょうか。

言語的にはGo言語とnode.jsが優勢みたいですね。
自分はどちらも慣れていないので、悩ましいところです。

そんな中、自分が選んだのはAstroです。
どうせnode.jsは避けて通れないし…となって、「学習コストが低い」「他のフレームワークのUI部品を流用できる」「人気がある」「公式サイトが日本語対応してる＆ドキュメント豊富」あたりが決め手でした。
公式サイトのドキュメントに、ブログを作る手順がチュートリアルとして解説されていたのも大きかったです。しかも日本語！

ホスティングサービスの選択肢

静的サイト専用のホスティングサービスはいくつか存在します。
比較検討したのは以下のサービス。

レンタルサーバは有料サービスが前提ですが、静的サイトホスティングは無料サービスが充実しています。
無料の範囲でできることや制限が少ないところ・表示が早いところなどの情報を収集し勘案した結果、Cloudflare Pagesかな…、となりました。
ホスティングサービスは途中で切り替えもできるので、システム選定よりは気楽ですね。

所感など

WordPress以外でブログを書きたい場合、選択肢は少ないんですよね。
特に「大掛かりなものは必要ない」な場合、静的サイトが現実的な選択肢になったのが自分でもびっくりしました。
正直javascriptは得意じゃないので、勉強しつつサイト構築している状態です。
Astroは「学習コストが低い」とはいえ、あくまでも他のnode.jsフレームワークを知っている前提での「学習コストが低い」のようですし、そのあたりの基礎ができていない自分はヒーヒー言いつつ調べながら構築してますね。
それでも今のところ仕様などに納得できない点は出てきていないし、触っていて楽しいです。
人気なのも納得というか。
そしてある程度形ができてくると、実際にどうやって運営するのかがなんとなく見えてきて、シンプルに運営できそうだなあとなりました。

ただ、プログラマじゃない人にとっては静的サイトを選択するのは難しいだろうなと思ったのも事実です。
でもプログラマじゃなくても静的サイトのメリットが魅力的な人は多いだろうな…。
また、最初の不安通り、やっぱり事前準備が大変でした。配布されてるテーマ使っても手直し部分多いし。
でもそこクリアできたら静的サイトは優秀じゃないかな！って思います。

今後記事としてまとめておきたい情報

今回の件、色々と勉強になったのでできれば情報を残しておきたいなと。
以下のような内容を考えています。

  • 開発環境を整える
  • 実装した機能
  • ホスティングしてみる
  • 運用環境とルールを整える

脚注

  1. 静的サイトとヘッドレスCMSを組み合わせるとヘッドレスCMSの管理画面から記事を追加できるなど「動的サイトと静的サイトのいいとこどり」ができるようですが、サイトの根幹であるコンテンツを自分で持たないことに対してちょっと不安を感じるので、今回は選択肢から除外したいと思います。 ↩

avatar

calm-matsu

主に技術情報をまとめています。

  • 大昔、PHP製の社内システムを担当していました。
  • Javaによる業務システムを設計・開発・運用・保守まで担当していました。
  • 趣味でDrupal製のコミュニティサイトを運営しています。
  • Astro勉強中です。
  • Laravel勉強中です。

何かある場合はこちらまでどうぞ
お問い合わせ