Qiita 10周年記念イベントということでこの記事を作成してみました
前々から自分のブログを作ってみたいなあと思いつつ、WordPressはサーバー代結構かかるなあと思ってなかなか手が出せずにいました。
でいろいろ調べた結果、SSGなら運用コスト0円でサイトを作れると知り、その中でも人気のHugoを使ってみた結果思いのほか良かったので、HugoとWordPressの比較＆検証をしてみました。
ちなみに自分の作ったブログがこちらです！
https://engineer-life.okdyy75.com
よくあるWordPressのブログっぽいデザインで作りました
運用コストはドメイン代の年1,540円のみで、GitLab Pagesでホスティングしています。
GitLab Pagesはプライベートリポジトリでサイトを公開できるのでオススメです
比較
①基本
| WordPress | Hugo | |
|---|---|---|
| サイト構築の難易度 | ○ | △ |
| 記事執筆の手軽さ | ○ | ○ |
| テーマの種類 | ○ | △ |
| カスタマイズ | ○ | ○ |
②インフラ面
| WordPress | Hugo | |
|---|---|---|
| 運用コスト | △ | ○ |
| パフォーマンス | △ | ○ |
| セキュリティー | △ | ○ |
| バージョン管理 | △ | ○ |
| 複数環境での運用 | × | ○ |
| 別環境への移行 | △ | △ |
③細かい点
| WordPress | Hugo | |
|---|---|---|
| ユーザーの管理 | ○ | × |
| コメント機能 | ○ | × |
| お問い合わせ | ○ | × |
| サイト内検索 | ○ | × |
| 人気記事 | ○ | × |
| 関連記事 | ○ | ○ |
| ブログカード | ○ | × |
| SEO | ○ | ○ |
| 画像管理 | ○ | ○ |
解説
①基本
サイト構築の難易度
- WordPressはプログラミング未経験の人でも構築できる
- Hugoの場合は最低限Gitが使えないと構築が難しい
記事執筆の手軽さ
- WordPressはhtml、WYSIWYG、マークダウンで記事をかける。プレビュー・予約投稿可能
- Hugoはhtml、マークダウンで記事が書ける。プレビュー・予約投稿可能。ネットに繋がっていなくてもローカルで確認できる
テーマの種類
- WordPressはテーマの数も多く、使いやすいテーマもそれなりにあると感じた
- HugoはWordPressに比べて数も少なく、使いやすいテーマも少ないと感じた
カスタマイズ
- WordPressはGUI上で簡単にサイトのレイアウトを変更したりカスタマイズできるのがメリット。アクションやフィルターなど使って細かいカスタマイズも可能。ただしWordPressのお作法に則った記述が必要。動的サイトのため、webでできることはなんでもできる（と思う）
- Hugoはゼロからフルカスタムで作りやすいのがメリット。そのための機能も十分用意されている。既存のテーマを使う場合はconfigを設定するだけで簡単に使うことも可能。ただしconfigで設定できる以上のことをしたい場合は自分でコードを書く必要がある。静的サイトのため、できることには限りがある。
②インフラ面
運用コスト
できるだけ最低料金で1年契約とするといくらかかるか計算してみた（※2021年9月29日時点）
ちなみに独自ドメインを使う場合は +1,540円かかる（Googleドメインの場合）
②-1 WordPress
- Herokuを使えば0円でも可能だが、常時起動できない＆画像管理できない等、現実的ではないので除外
- 有名どころのサーバーは月平均500円ほど
ロリポップの場合
- ライトプラン 5,610円（初期費用 1,650円 + 利用料金 330円/月 × 12か月）
- ディスク容量 160GB, 転送量 500GB/日, DB容量 500MB
さくらのレンタルサーバの場合
- スタンダード 6,286円（初期費用 1,048円 + 利用料金 5,238円 一括払い）
- ディスク容量 100GB, 転送量 300GB/月, DB容量 3GB
スターサーバーの場合
- ライトプラン 4,950円（初期費用 1,650円 + 利用料金 275円/月 × 12か月）（今ならキャンペーン中で3,300円らしい）
- ディスク容量 160GB, 転送量 500GB/日, DB容量 1GB
リトルサーバーの場合
- ミニプラン 2,720円（初期費用 920円 + 利用料金 150円/月 × 12か月）
- ディスク容量 20GB, 転送量 30GB/時, DB容量 1GB
②-2 Hugo
- Hugoの場合、GitHub PagesやGitLab Pagesを使えば0円でも運用可
GitHubの場合
- 無料アカウント パブリックリポジトリ 0円
- 1ファイル 上限100MB, リポジトリサイズ 無制限だが推奨1GB, Pagesサイズ 1GBまで, 転送量 100GB/月, 10ビルド/1時間, CI 2000分/月
- 1ファイル 上限100MB, リポジトリサイズ 無制限だが推奨1GB, Pagesサイズ 1GBまで, 転送量 100GB/月, 10ビルド/1時間, CI 2000分/月
- プライベートリポジトリを使うなら Proプラン 5,340円（$4/月（445円ほど）× 12か月）
GitLabの場合
- 無料アカウント プライベートリポジトリ 0円
- 1ファイル 上限10GB？, リポジトリサイズ 10GB, Pagesサイズ 1GBまで, 転送量 上限なし, ビルド上限なし, CI 400分/月
パフォーマンス
- WordPressはリクエスト処理+DB処理が走るので静的サイトに比べその分重い。記事や画像、プラグインが増えればサイト全体が重くなる。WordPress本体の処理は削れないので、チューニングにも限界がある。
- HugoはWordPressに比べ静的サイトなのでかなり速い。記事や画像が増えてもビルド時間が増えるだけで、比例してサイト全体が重くなることはない。ゼロから自作すればかなりチューニングできる
セキュリティー
- WordPressは動的なサーバーを使う以上常に脆弱性のリスクがある。WordPress本体、php、使用プラグイン等のバージョンも随時上げていく必要がある
- Hugoは静的サイトなのでできることも限られるがリスクはかなり低い。秘匿情報をgit上にあげる事がなければ
バージョン管理
- WordPressは自分でソースとDBのバージョン管理が必要。前のバージョンに戻したい場合はそれなりに面倒
- Hugoはgitの使用が前提なので、前のバージョンに戻したい場合も簡単
複数環境での運用
- WordPressはサイトの設定をDBで管理するため、複数環境を作っても本番との乖離が生まれやすい。そのため結局本番の設定を直接いじったりして障害になる場合も。。大きなデザイン変更やサイト全体のカスタマイズの場合、一度本番と同じ環境をローカルに作ってと手間がかかる。
- Hugoはサイトの設定をソースで管理するため、本番との乖離がほぼ生まれない。ローカルで確認→本番デプロイの流れがあるので、障害も出にくく、大きなデザイン変更やサイト全体のカスタマイズもしやすい
別環境への移行
- WordPressは引越し用のプラグインもあるので難しくはないと思うが、インフラ周りの差分があれば合わせる必要があり、それなりに面倒
- HugoはGitHub、GitLabへの移行は簡単だが、それ以外のレンタルサーバーの場合はgitのインストールや、CIでデプロイ環境を構築する必要があるので面倒
③細かい点
ユーザーの管理
- WordPressはユーザーの管理ができるため、複数人でのサイト運用や、読者向けにメルマガ配信といったことが可能
- Hugo（SSG全般）はできない
コメント機能
- WordPressは標準搭載
- Hugo（SSG全般）はできない。Disqusという外部ツールを使えば可能。実際使ってみた感じ、匿名でのコメントは一応できるが、名前＆メールアドレス＆画像認証が必要とかなりハードルが高く正直使いづらい。一応Disqus以外にも色々選択肢はあるので公式をチェック
お問い合わせ
- WordPressはプラグインで簡単に設置可能
- Hugo（SSG全般）はできない。Googleフォームを使えば可能
サイト内検索
- WordPressは標準搭載
- Hugoでも一応できるが、実装がけっこう面倒
人気記事
- プラグインで対応可能
- Hugo（SSG全般）はできない。自前でAPIサーバーを建てたりすれば可能だが、けっこう面倒。
関連記事
- WordPressはプラグインで対応可能。関連させたいタイトル、内容、カテゴリ、タグ、関連度の閾値などの設定も可能
- Hugoは標準搭載。関連させたいタグ、カテゴリ、関連度の閾値などの設定も可能
ブログカード
- WordPressは内部リンクなら標準搭載。外部リンクはプラグインで対応可能。
- Hugo（SSG全般）はできない。はてなのブログカードやブックマークレットなど他の方法で代替可能
SEO
- WordPressはSEOを意識したテーマが多く、記事編集画面に必要な項目を入力すれば、自動的にメタタグや構造化データ、ampを自動で生成してくれるものもあるので簡単。
- HugoはSEOを意識したテーマは少なく、基本必要なタグは自分で実装する必要がある。が、表示速度が非常に速いので、その点はSEO的にかなりプラス要素
画像管理
- WordPressは標準でGUIからリサイズ・トリミングが可能。プラグインを使って画像の一括圧縮やwebpへの変換もできる
- Hugoはリサイズ・トリミング・画像フォーマットの変換・圧縮（圧縮率も設定可）などが可能。webpへの変換もできる
Hugoは未来のWordPressになりうるのか？
現時点では一部基本的な機能（コメントや人気記事など）が使えないので、まだWordPressを超えたとは言えませんが
最近はSSG構成のサイトも増えているので、これらを解決する外部ツールやSaaSが増えた時、HugoがWordPressを超えることになると思います。
10年内には解決すると思うので十分Hugoは未来のWordPressになりえると思います！
最後にHugoを推したい
WordPressを使っていて下記点を感じたらぜひHugo使ってみてください！
- 意外とデザイン変えたりカスタマイズしづらい。色々いじってカスタマイズしたら動かなくなった！！
- → Hugoならローカルで簡単にカスタマイズ＆確認できます。本番障害起きにくいです
- 管理画面やサイトの速度が遅くてストレス
- → Hugoであればローカルの起動も高速でリアルタイムに記事を書けます。作成されるサイトも静的サイトなので動的サイトより圧倒的に高速です。
- wordpress本体やプラグインのアップデート、定期的なバックアップなどセキュリティーリスクを気にするのが面倒
- → Hugoは作成されるサイトが静的サイトなので、動的サイトに比べるとセキュリティーリスクは低いです
- 維持費が結構かかってきつい
- → Hugoなら運用コスト0円でいけます
Hugoはカスタマイズがしやすい＆速度も速い＆運用も楽＆コストも安く抑えられるので、めちゃくちゃオススメです！