Hugo 静的サイトジェネレータのすゝめ
この前まではWordPressを使ってましたが、
維持費やスペックや相性や諸々の問題があったため、
静的サイトジェネレータを使うことに決めました。
そしてこれはとても素晴らしいものでしたので、
実体験も兼ねて紹介していきたいと思います。
TL;DR
静的サイトジェネレータ凄い！
サイトが速い！サイトが軽い！維持費が安い！
やりたい事がほぼできる！
みんなWordPress辞めて静的サイトジェネレータ使おうぜ！
Hugoとは
Hugoとは静的サイトジェネレータです。
たぶん「ヒューゴ」です。
発音が公式動画で挙がってます。
静的サイトジェネレータとは
Static Site Generator(SSG)と書きます。
静的サイトを生成してくれるツールです。
ここ数年で注目されてきているCMSです。
静的サイト、動的サイトとは
静的サイトって単語は難しく聞こえますが、
一言でいうとHTML,CSS,JSで作成されたサイトが静的サイトになります。
例：旧来からホームページと呼ばれているサイト
動的サイトというのは、PHPやDatabaseなどを使って
見るたびに状態が変わるサイトが動的サイトになります。
例：WordPressやSNS(Tiwtter)などの複雑な構成のサイト
静的サイトジェネレータの利点
速い
動的サイトの画面を開くと画面を見るまで数秒タイムラグがあります。
サイトの裏で動いているPHPや、データを取得するためにDBにアクセスします。
サーバのスペックが良ければ体感的にはそこまで不快にはなりませんが、
低スペックなサーバでは動作すらしてくれませんでした。
静的サイトはそもそもPHPやDBを使いません。
HTML,CSS,JSをジェネレータで生成して、サーバに配置するだけです。
HTML,CSS,JSだけで完結します。
あとはリクエストがあった時に呼び出されるだけですので、
処理は至ってシンプルであるため高速に動くことができます。
負荷につおい
サイトを見る時にモッサリしているということは、
裏でなにかが動いているということになります。
そんな状態で後から大量にアクセスが来たら処理を捌ききれずに
パンクしてしまいますよね？
静的サイトジェネレータで作成されたサイトは
ボトルネック（処理が遅くなる部分）になる要素がほとんどありません。
このサイトはまだＰＶ数が少ないので、
WordPressの時はそこまで気にする必要はありませんでしたが、
不安の種は早めに摘んでおきたいと思ってました。
セキュリティの心配がない
HTML、CSS、JSで作成されているだけなので、
DBに不正アクセスされてログインできないとか、
サーバを不正利用されて高額請求が来たということもないです。
バージョンアップを気にしなくてよい
WordPressって定期的に脆弱性が発見されて
その度にバージョンアップを強いられますよね？
バージョンアップしないと後で後悔するよ？
って言われてるようでしんどいんですよね。
静的サイトジェネレーターは生成するためのEXEファイルの
バージョンアップがあるぐらいなので、
自分の好きなタイミングでバージョンアップすれば良いのでとても気が楽です。
バックアップ方法が簡単
基本的にバックアップするのは、テンプレートと記事データのみになります。
データベースのバックアップとか難しいことは入りません。
そしてほとんどがHTMLデータやMarkdown記事データなので
それらはGithubのPrivateリポジトリで管理できます。
サーバーを気にしなくてよい
一番のネックはサーバの維持費でした。
2019年12月時点まで使っていたサイトはWordPressを使っていましたが、
WordPressの公式サイトの要件では次のようにサーバーでの動作環境を推奨しています。
これらが動く環境でないとWordPressが動かないか動きが遅くなります。
そのため、レンタルサーバを契約する時は
WordPressがきちんと動くか細かく見なければいけませんでした。
しかし、きちんと動くレンタルサーバは月額費用がそこそこかかりました。
最低でも月500円～。そこそこ安定したサーバだと月1000円以上かかります。
また、以前はGoogle Cloud Platform(GCP)を使ってWordPressを動かしましたが、
スペックを下げると動かなくなり、スペックを上げると月額費用に響きました。
最初は「勉強になりますね」みたいなことを出しゃばって言いましたが、
商用のサイトでもない限りはもうサーバのスペックは気にしなくないんですよね（笑
今回このサイトを公開するために、AWSのS3というサービスを利用しました。
オブジェクトストレージサービスですので、
PHPなどプログラムは動きませんが、静的サイトを設置して公開することが可能です。
また、維持費も格安で運用することが可能で、現在の目算では以下のようになってます。
なんと月額１ドル以内におさまりました。
2020/01/01 追記
S3がいいと思って色々記事を書いて実行していたのですが、
結局Netlifyが素晴らしかったのでNetlifyに移行しました。
色んな静的サイトジェネレータ
こちらのサイトで色んな静的サイトジェネレータを見ることができます。
代表的なジェネレータとしては以下があります。 (2019年12月時点)
- Jekyll
- Hugo
- Hexo
- Gatsby
- Octopress
- Middleman
- VuePress
今回はHugoを使いました。
ホスティングサービス
静的サイトジェネレータで生成したファイルを公開する場合、
最近では以下のラインナップがメジャーになってきています。
- Netlify
- GitHub pages
- AWS S3
- Firebase Hosting
現在色々迷っていて、
とりあえず全てのサービスを使ってみようかと思ってます。
これから色々サイトを形作っていきます。
その過程も紹介できたらなと思ってます。
以上