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

Fri, 11 Sep 2026 01:05:00 +0900

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