未分類

静的サイトジェネレーターに関する備忘録

当ブログのカテゴリーが散らかってきたので、一部記事を新しいブログに引っ越したいな~と考えています。

「そもそも更新止まってるやん…」ってのは、置いといて…。

ついでにWordPressのテーマを自分で作ってみるか~とか計画したのですが、いまは「静的サイトジェネレーター」が盛り上がってるっぽい。

 

というわけで、新ブログではWordPressさんに別れを告げ、静的サイトジェネレーターさんにチャレンジすることにしました。

備忘録をかねて、そこらへんをメモっておきます。

 

静的サイトジェネレーターってなに?

WordPressをはじめとするCMSは、下記の順番でレスポンスを返します。

※WEB畑の人ではないですが、だいたい合ってると思う…

  1. クライアントからリクエストが来る
  2. 該当ページのHTMLを生成する
  3. クライアントにレスポンスを返す

 

「②該当ページのHTMLを生成する」のステップでは、PHPの実行やDBアクセスがリアルタイムで行われます。

DBへのSQL発行を何発やってるか…とかまでは知らないですが、それなりに重い処理かと思います。

 

それに対して、静的サイトジェネレーターの考え方は「いや、リアルタイムじゃなくて、事前にHTML作ったらいいんじゃね…?」みたいな。

②のステップがまるごと消えるので、パフォーマンスの向上を期待できます。

おそらく、CMSが登場する前のやり方と同じで、原点回帰してる感じです。

 

静的サイトジェネレーターについては、下記サイトに中立的な情報が載っています。

https://dyno.design/articles/what-is-static-site-generator/

 

スポンサーリンク

静的サイトジェネレーターの使い方

静的サイトジェネレーターでブログを作るための、最低限の構成は下記。

  • ヘッダーのHTML × 1
  • フッターのHTML × 1
  • 記事一覧のHTML   × 1
  • 各記事のHTML × n

 

「× n」って、使い方合ってるのかな…

カッコつけて使っちゃった(*ノωノ)

 

上記のファイルを用意した上で、静的サイトジェネレーターでビルドすると、全コンテンツのHTMLが自動生成されます。

これをサーバーに上げると、PHPもDBも不要。

 

ちなみに、自分が使っているのは Hugo です。

https://gohugo.io/

 

Hugoのインストール、テーマ(HTML)の作成がおわったら、あとは記事を量産する流れ。

下記のcontentフォルダに、ダカダカ記事を入れます。

 

で、ビルド。

publicフォルダに全HTMLが出力されます。

 

「hugo server -D」やら「{{ .Content }}」やら打たないといけないので、いまはほぼプログラマー専用です。

今後は画面で操作できるように…なるのかな…?

自分はそこまでコマンドが好きではないので、できれば何らかの便利アプリが登場してほしいところです。

 

静的サイトジェネレーターのメリット

静的サイトジェネレーターのメリットは、下記のとおり(WordPress比)

  • レスポンスが速い
  • 維持コストが低い
  • セキュリティ

 

まあ、WordPressでも十分速いし、サーバー代も安いので、既存ブログを引っ越す必要はないかと思います。

自分は引っ越しますが(上手くいきそうなら)

 

個人的には、サーバー代を節約できるのがちょっとうれしい。

Netlifyとかいう無料(?)のサーバーを使えるらしいです。

そこらへんは未調査なので、改めて書きたいと思います。

 

スポンサーリンク

静的サイトジェネレーターのデメリット

自分が感じる静的サイトジェネレーターのデメリットは、下記のとおり(WordPress比)

  • 複数人で運営するサイトには不向き
  • コメント欄が使えない
  • お問い合わせフォームが使えない

 

大人数でガンガン記事を投入するようなサイトでは、あまり現実的ではないと思います。

記事を入れるたびに全HTMLをビルドし直さないといけないですし。

 

PHPもDBも使えないので、コメント欄が使えないのもちょっと痛いです。

あと、お問い合わせフォームも。

 

お問い合わせフォームについては、Google提供のフォームを使えるらしく、大した問題ではないかも。

コメント欄は…、外部サービスあるのだろうか…。

 

まとめ

はい、そんな感じです。

自分にとっては静的サイトジェネレーターの方が向いてる気がするし、技術的に面白そうなので、使ってみます。

正直、ほとんどの方はどっちでもいいと思います。

てか、いま使ってるエックスサーバー、キャッシュサーバーついてるはずだけど、どういう仕組みなんだ…?っていまさら思った

キャッシュされてるなら毎回HTML生成されないはずだけど、レスポンスは向上してない気がする…

キャッシュされてんの?(勉強不足(´・ω・`)

スポンサーリンク