HugoとCloudflareでq0tzly.devを作り直した

以前、chota.cssを使って作成し、そのままになっていた個人サイト q0tzly.dev を作り直した。

きっかけは、Hugoで構築した grus.systems の仕組みを、ほかの案件でも使えるように grus-theme として切り出したことだった。

せっかく汎用的なテーマとして整理したのであれば、自分のサイトでも使ってみたい。そう考えて、q0tzly.devを一から再構築することにした。

置きたいものを考え直した

まず、「自分のサイトに何を置きたいのか」を改めて考えた。

新しいサイトには、次の4つを用意している。

• Blog
• Gallery
• プロジェクト
• About

Blogには、考えたことや作ったものについて書く。

Galleryには、これまでInstagramに投稿した写真や、結局投稿しなかった写真をまとめて置く。SNSのタイムラインとは少し違う、**「小さな写真展」**のような場所として常設することにした。

プロジェクトは、これまで取り組んだことや、いま進めていることをまとめる場所。Aboutは自分について書く場所だ。

以前のサイトよりも、「自分が何をしているのか」が分かりやすい構成になったと思う。

Hugoとgrus-theme

サイトは Hugo で作った。

記事をMarkdownで書けることと、静的サイトとして生成できるシンプルなSSGであることが、Hugoを気に入っている理由だ。

デザインの土台には、grus.systemsを作る中で整理していた grus-theme を使っている。

grus.systemsのデザインをそのまま持ってきたわけではなく、ヘッダーや配色、余白、レイアウトといった共通部分を、ほかのサイトでも使えるHugoテーマとして切り出したものだ。

テーマは現在、

• grus-base
• grus-blog
• grus-gallery

の3つに分けている。

grus-base にサイト全体の基本部分を置き、必要に応じてBlogやGalleryの機能を組み合わせる形だ。

今後、別のWebサイトを作るときにも再利用できるようにしている。

日本語と英語の切り替え、ライトモードとダークモードにも対応した。

そして、以前のq0tzly.devでも使っていた、ある意味トレードマークになっているりんごのアイコンも引き続き使っている。

Pages CMSで書く

記事の編集には Pages CMS を使っている。

HugoがMarkdownベースのSSGなので、Pages CMSとの相性がかなりいい。

もちろんエディタを開いてMarkdownファイルを直接編集することもできるが、普段の記事更新のためだけにリポジトリを開いてコードを触るのは少し面倒だ。

Pages CMSを導入することで、一般的なCMSに近い画面から記事を作成・編集できるようにした。

Blogの記事だけでなく、Galleryのタイトルや説明、写真の並び順なども同じ画面から変更できる。

普段の更新ではサイトのコードに触れず、文章を書くことと写真を選ぶことに集中できるようになった。

Hugoのシンプルさを残しながら、CMSの使いやすさも取り入れられたのはかなり気に入っている。

Cloudflare Workersで公開する

Hugoが生成した静的ファイルは、Cloudflare WorkersのStatic Assets を使って配信している。

以前はCloudflare Pagesを使っていたが、今回はWorkersへ移した。

個人的にCloudflareはかなり気に入っている。

DNS、ドメイン、Workers、R2など、Webサイトを運用するために必要なものを一通り同じ場所で扱える。

静的なサイトであればサーバーを自分で管理する必要もなく、アクセス数がそれほど大きくないうちは運用コストをほとんど気にせず公開できるのも大きい。

実際の運用コスト

2026年9月現在、q0tzly.devに継続的にかかっている費用はドメイン代だけだ。

現在のアクセス数やデータ量では、Cloudflare Workersなどの利用が無料枠に収まっている。そのため、レンタルサーバーを別に契約することなく公開できている。

ただし、どのWebサイトでも必ずドメイン代だけで運用できるわけではない。アクセス数、保存する画像の量、問い合わせフォームやメールなどの機能によっては、追加の費用が発生する。

それでも、小規模なサイトであれば、構成を工夫することで毎月の固定費をかなり小さくできる。

写真はR2、表示はCloudflare Images

画像については、サイトを構成する画像と写真そのものを分けて管理している。

ロゴやfaviconなど、サイトの一部として扱いたいものはリポジトリに入れ、Gitで管理する。

一方、Galleryに載せる写真は一枚あたりの容量も大きく、今後枚数も増えていく。

そこで写真は Cloudflare R2 に保存し、URLから読み込む形にした。

ただし、現像して書き出したJPEGをそのままWebサイトで配信すると、ファイルサイズが大きすぎる。

そこで表示時には Cloudflare Images を使い、画面や用途に合わせたサイズへ変換して配信している。

元の写真はR2に置いたまま、Webでは必要な大きさだけを配信する構成だ。

現在Blog内の画像はGit側に置いているが、枚数が増えてきたら、こちらもR2へ移行するかもしれない。

まとめ

今回のq0tzly.devの再構築では、

Hugo + GitHub + Pages CMS + Cloudflare Workers + R2

という構成にした。

Hugoで静的サイトを生成し、GitHubで管理する。
記事やGalleryはPages CMSから編集し、生成されたサイトをCloudflare Workersで配信する。容量の大きな写真はR2へ置く。

いわゆるWordPressのようなサーバー型CMSとはかなり違う構成だが、個人サイトや更新頻度のそれほど高くないWebサイトであれば、このくらいシンプルな構成がちょうどいい。

サーバーそのものを管理する必要がなく、日常的な更新ではコードに触れる必要もない。それでいて、必要になればHugo側を自由に拡張できる。

q0tzly.devは、現在のところドメイン代だけで運用できている。

すべてのサイトで同じになるわけではないが、小規模なWebサイトであれば、運用コストを抑えながら、表示が速く更新しやすい環境を作れる。

今回自分のサイトで一通り試したことで、grus-themeも単なる自分用のテーマではなく、今後ほかのWebサイトや案件でも使っていける土台になってきた。