Photo by Pixabay from Pexels
WordpressからHugoへ
最近全然更新してないこのブログだけど、久々の話題はブログを移行してみましたって話。
Wordpressに不満があったって言うより、静的サイトジェネレーター（Static Site Generator）を使ってみたかったというのが強い。
もっというと、AWSのS3でブログをホストして運営してる人の話を聞いて自分もやってみたくなった。
S3は可用性99.9%以上だし、フルマネージドサービスだからサーバーのメンテナンスなんかいらないし、おまけに静的サイト(htmlの集合)をホストしてるだけだからサイト自体の動作も軽いという利点もある。
Wordpressのデメリット
Wordpressはいろんな機能がてんこ盛りで記事を書くのも管理するのも簡単というのが最大のメリットだとは思うけど、デメリットも色々ありそう。
自分が気づいたところでいうと
-
サーバーが必要
自分はGCPの無料枠インスタンスでWordpressを動かしてたけど、正直ちっちゃいブログ一個に使うにはもったいない。
コンピューティングリソースはなんか他のことに使いたい。 -
Wordpress自体のアップデートや、プラグインのアップデートを定期的にしないといけない
サーバーを持つがゆえのメンテナンスコストですよね
-
記事編集機能が微妙
Wordpressの記事編集UI gurenberg かな？ これイマイチ好きじゃなかった。
Hugoはじめ静的サイトジェネレーターではmarkdownで記事を書いて、htmlにレンダリングするのが主流っぽい。
自分はmarkdown書くのには慣れてるので、こっちのほうがいい気がした。
Hugo導入
環境
AWS S3
今回はAWSを触りたかったというのもあり、最初からS3にホストするつもりだった。
クラウドサービスとしての信頼性はピカイチ。
S3には静的サイトのホストオプションがあるので、htmlをアップロードするだけで簡単にブログができる。
デフォルトでAWS管理のドメインも割り当ててくれる。
Cloudflare (DNS・証明書)
Cloudflareは無料のDNSサービス
独自ドメインを登録して、CNAMEにS3にホストしたサイトのDNS名を設定すれば良い。
CloudflareはSSL証明書を自動で用意してくれて、クライアントとの間で通信をSSL化してくれる機能もあり、めちゃめちゃいい。
いわゆるSSLオフロードしてくれるので、CloudflareとS3間はhttpで通信する。
S3でhttps化ならCloudfrontを使うのがベストプラクティスなんだろうけど、Cloudfront安くなさそうだしこれでいい。
ちなみにS3側はバケットポリシーでアクセス元IPをCloudflareに絞っている。
この辺は以下URLを参考に
https://support.cloudflare.com/hc/en-us/articles/360037983412-Configuring-an-Amazon-Web-Services-static-site-to-use-Cloudflare
全然関係ないけど、Cloudflareはドメインレジストラもやっていて、お名前.comとかから移行するのおすすめ。
Github (レポジトリ管理)
markdown記事を含むプロジェクト資材はGithubレポジトリで管理
Github Actions (自動デプロイ)
せっかくだからモダンな感じで、自動デプロイの仕組みを作ってみた。
Githubへのpushをトリガーに自動でHugoによるビルドし、出来上がったhtmlファイル群をS3にアップロードする。
PushされるとGithub管理のサーバー上でおそらくコンテナが生成されてHugo使ってビルドしてくれる。
ビルドされたファイルをS3にアップロードするには、レポジトリのSecrets(暗号化変数)にIAMアカウントのアクセスキーなどを登録しておく必要があるので、あらかじめS3へのアップロード権限をもったIAMアカウントを作っておくといい。
このへん参考
Github Actionsを使って、HugoサイトをS3にデプロイする方法｜yiio｜note
テーマ
Zzo
zzossig/hugo-theme-zzo
Zzo – Z Themes Documentation
オシャレ感はそれほどないけど、ブログに向いているデザインで高機能な印象。
複数言語対応、目次機能、Katex、Mathjaxのサポートなどいろいろできる。
注意としては、内部でSASSを使ってるようで、Hugo extended版じゃないとビルドに失敗する。
おわり
せっかく一新したし、またブログ書き始めようかな。
最近はstreamsyncというchrome拡張機能とそのバックエンドのサーバーをつくっていて、休みの日になるとそのコードを書いたり本を読みながら設計を考えたりばかりしている。
そのへんのことも記事にしたいとは思ってるんだけど、いざ書き始めると時間が取られるのと、開発しながらあっち行ったりこっち行ったり設計をどんどん変えてるので自分の頭の中でもあまりまとまってないところがある。。
逆に他人に説明するつもりで、文字に起こせば自分の頭の中も整理できるかもね。