【Hugo】WordPressブログをHugo・AWSに移行した
レンタルサーバーで運営していたWordPressブログをHugoに乗り換え、サイトのホスティングもAWS（S3・CloudFront）に変更しました。移行の理由や感想等を書いていきます。
当サイトの構成について
今回新サイトに移行するまでは、レンタルサーバーにWordPressをインストールし、ドメイン取得サービスで取得した独自ドメインのdimzakki.comでサイトを運営していました。
WordPressでのブログ運営時から一貫していたことですが、あくまで趣味としてのブログ運営であることから、なるべく低コストで運営することを重視していました。レンタルサーバーは一番安いプランにし、ドメインは無料キャンペーンで取得したものを維持してきました。今まで運営で掛かっていた費用は年間6,000円未満のサーバー代のみでした。
ただ、安いプランを契約していると、サーバー性能が貧弱なのでサイトのスピードがあまり出ませんでした。その為、なるべくサイト速度が低下しないようブログ内容も余計な機能や装飾を抑え、シンプルな内容にしてきました。
この度、ブログの構成を一新し、レンタルサーバーメインの構成から、AWS上への運営へと移行することにしました。具体的には、サイトコンテンツを静的サイトジェネレータ（SSG）であるHugoに移行して、AWS S3にデプロイしています。
また、SSL対応やパフォーマンス向上の為CloudFrontをキャッシュサーバーとしています。併せてドメインもAmazon Route 53へ移管しました。
また、サイトのコンテンツはGit（Github）で管理しており、ブログ更新時のHugoのビルドとS3へのデプロイはGitHub ActionsによるCI/CDパイプラインを用いて自動的に行っています。
補足：SSGについて
SSGとは、「Static Site Generator（静的サイトジェネレーター）」の略で、文字通り静的なHTMLを生成するツールのことです。静的であるため、アクセスしたユーザーには常に同じ内容が表示されます。有名なSSGには、Hugoの他にGatsbyやJekyllなどがあります。
反対に、WordPressは動的サイトに分類され、アクセスしたユーザー毎に自動でページ生成されて表示されます。
HugoはGo言語で実装されており、ビルドの掛かる時間が高速であることが大きな特徴です。また、ブログ用のテンプレートが豊富にあることもメリットの1つですね。
Hugoに移行した理由
今回、WordPressからHugoへ移行した一番の理由は、コストを抑えつつ高速化したかったからです。
WordPressである程度のサイトスピードを得るには、それなりの性能のサーバーを使用する必要があり、結果サーバーの費用が掛かるので大きく赤字運営となってしまいます。
当サイトではWordPressで実現できる様な複雑な機能は特に必要としていないので、それなら静的サイトジェネレータで低コストかつ速度を重視したサイトへ変えようと思った訳です。
Hugo・AWS構成は、静的サイトジェネレータの中ではこの構成が比較的メジャーであり、ネット上の参考文献も他より多かったことも理由になりました。
また、AWSはこれまで仕事であまり使う機会が無かったので、AWSへの知見を深めるのにも丁度良いと思ったのも理由の1つになります。
Hugoのメリット
ここから、レンタルサーバー・WordPressからHugo・AWSに移行するにあたってのメリットについてまとめます。
1.サイトスピードに優れる
Hugoは静的サイトジェネレーターであり、生成したHTMLを公開しているだけなので、表示速度に優れているのが大きな特徴です。
対して、WordPressではリクエスト毎にPHPでデータベースにアクセスしてページを生成しているため、どうしても重くなってしまいます。
2.セキュリティリスクが少ない
WordPressではWeb上の管理ツールでサイト管理を行うので、不正アクセスなどのセキュリティリスクが付きまといます。また、プラグインも様々な開発元が制作していますので、脆弱性が発生する可能性があります。
静的サイトであるHugoにはそのようなリスクは無いため、セキュリティ的に堅牢であると言えます。なお、ホスティングに使用するAWSについては、アカウント乗っ取りなどのリスクがあるため、最低限ログイン時のMFA（2段階認証）の有効化をする必要があります。
3.コストパフォーマンスに優れる
このサイト構成の場合に掛かる費用は、AWSでのRoute 53・S3・CloudFrontの利用代のみになります。費用はドル換算のため、為替レートによって変動はありますが、個人のブログサイト程度ならレンタルサーバーと比較して非常に低コストで運営ができます。
厳密に言うと、DDoS攻撃によって高額な請求が発生する、いわゆるEDoS（Economic Denial of Sustainability）攻撃のリスクは存在しますが、個人サイトなので、そこまで気にしなくてもいいかなと思います。費用は掛かりますが、AWS WAFなどで対策することができます。
4.コンテンツ管理が簡単
Hugo・AWS構成ではサーバーやDBを管理する必要もありません。また、サイトの内容についてはGitHubのリポジトリにソースファイルを置くことでWordPressより低コストでバージョン管理が可能です。
Hugoのデメリット
次に、Hugoのデメリットについてもまとめます。
1.サイト構築の難易度が比較的高い
Hugoだけではなく、AWSやGitの基礎知識が必要なので、WordPressよりは若干ハードルが高いです。
とは言え一度構築さえしてしまえば、記事の更新にはGitへのプッシュだけで簡単に行えます。
2.日本語の資料が少ない
ネット上のドキュメントの数は、WordPressに比べると圧倒的に少ないです。場合によっては、英語の資料もある程度見ていく必要があります。
3.動的な機能が使えない
Hugo上で人気記事ランキング・お問い合わせフォーム・コメント機能の様な動的な機能を実装するのには、ある程度カスタマイズが必要になってきます。なお、最低限必要なお問い合わせフォームに関しては、こだわりが無ければGoogleフォームで簡単に実装が可能です。
Hugoへの移行手順
WordPressからHugo・AWSに移行した際のメモを、備忘録として記事にまとめました。
レンタルサーバーのドメインをRoute 53に移管する
【AWS】Amazon Route 53に他サービスの独自ドメインを移管するHugoをローカルに構築してコンテンツを移す
【Hugo】ローカルにサイト（Mainroadテーマ）を構築する【サイト構築①】HugoをS3にデプロイし、CloudFrontで配信する
【AWS】HugoをS3・CloudFrontにデプロイする【サイト構築②】GitHubで自動デプロイを設定する
【Hugo】Github ActionsでS3に自動でデプロイする【サイト構築③】
以上の4つのプロセスでサイトを運営することができました。
また、必須の機能ではありませんが、人気記事ランキングも実装してみました。
移行した感想
とりあえず、無事にHugo・AWSへサイトを移行できたので一安心です。ブログ自体もサイトスピードが大きく向上しました。
手順の中で、一番時間が掛かったのはサイトコンテンツの移行でした。サイトの構築自体は参考文献が色々とありましたので、思ったよりスムーズに行きました。
運営コストについては、初月はドメイン代が掛かっているものの、以降の月は平均して1ヶ月で100円以下と非常に安く運用できています。
悲しいことに、移行した後にロリポップの自動更新を切るのを忘れていて、結局プラス1年サーバー代を払うことになってしまいましたが…。
以上がWordPressからHugoへの移行についての話になります。AWSの各種サービスも色々と触ることができましたので、良い勉強になったと思います。
今後もサイトの更新を進めていきたいと思います。以上で記事を終わりにします。