10月中旬から少しずつ進めてきたサイトのリニューアル、ひとまず完了しました！　ちょっと拙いところもありますが、このへんで一旦よしとさせてください。頼む。

というわけで、今回のリニューアルを含め、このサイトの制作についてふりかえります。自分はごりごりコードが書けるわけでも優れたデザインスキルがあるわけでもありません。でも、そういう人間の記録をこそ求めてる方がインターネットには絶対いるはずなので！　有識者の方々からすればツッコミどころも多々あるでしょうが、「そのやり方だとサイトが爆発するから即刻やめろ」みたいなのがない限りは温かく見守っていただければと思います。

また、この記事は「個人サイトを語ろう Advent Calendar 2025」の19日目です。昨年に2つのアドベントカレンダーに参加してからもう1年経ったのかと思うと恐ろしい。とはいえ、こうして年単位での歩みを振り返れるくらいにサイトを継続できていることは感慨深いです。

今回扱うのよりも根源的な内容――個人サイトの意義や心構え――については去年書いたので、よければ読んでみてください◎

• 庭いじりとしての個人サイト運営 - 頬杖書房

上記の記事では技術面について書くことを避けたんですけど、今年はそれにあえて挑戦しよう！ということで自分なりにやってみます。コンセプトはタイトル通り「楽をするためには手間を惜しまない」。

概要；当サイトの技術面のあゆみ

• 2020年（開設時）：Hugo + Netlify
• 2021年：Hugo + リトルサーバー + FTP手動アップロード
• 2024年：Hugo + リトルサーバー + GitHub + GitHub Actions
• 2025年（今回）：2024年の構成 + Content Adapters(Hugo) + microCMS

静的サイトジェネレータが好き

わたしは面倒くさがりの超絶ズボラです。なので、サイトを作るにあたっても、地道にHTMLを書くよりはWordPressなどのCMSを使ったほうがいいのかなーと思ったんです。……でも、却下しました。理由はいろいろあります。

まず単純に、WordPressで構築したサイトよりHTMLのサイトのほうが軽いという点。わたしのサイトは絵やマンガではなくテキストが主体なので、全ページがキロバイト単位とごく軽量です。せっかくなのでこの軽さを最大限に活かしたかったんです。

スキルのある人ならWordPressを使いつつもサイトを軽量に保てるんでしょうけど、わたしには無理だろうという確信がありました。なにせweb系の知識に乏しいから、「必要最低限のコードを自作してまかなう」みたいな事ができない。どの構成要素を削ったらいいのか分からず、取捨選択もできないから、重い“全部入り”的なプラグインを入れざるをえないわけです。その積み重ねで、どんどんサイトが重くなることが容易に想像できました。

そして、拡張子“.html”のファイルに素朴さを感じてときめくからというのも大きいです。わたしは高校〜大学時代にいわゆるケータイサイトをやっていたんですが、当時から凝り性で、レンタルサーバーの簡単テンプレートみたいなのを全無視してHTMLとCSSを手打ちしていたんですよね。その当時の記憶が蘇るからか、HTMLファイルとCSSファイルそのものに対してなんとなく愛着があるんです。なかなかどうして侮れないんですよ、ときめきや愛着って。だってそれがあれば、サイトをいじってるだけでも問答無用で癒しを得られるんですから。

あとは、サイトのトラフィックとか軽量化とかの意味ではなく、心理的に身軽でいたいという気持ちもあります。Twitterというインフラに対する信用が急激に変動したことをきっかけに、わたしは一つのサービスに依存することなく、心地よい場所にいつでも移り住めるような身軽さを重視するようになりました。だから、データの取り回しができなかったり独自記法に縛られる可能性のある形式じゃなくて、より原始的なHTMLがいいなーと。

また、これは後になってから気づいたことですが、新型ウイルスによって従来の生活様式を続けられなくなり、見知った人たちと次にいつ会えるかわからないという状況を経験したことも大きいと思います。この場所は、この生活はいつ終わるとも知れない。だからいつでも手荷物をまとめて飛び立てるようにしておこう、みたいな。飛躍しているようで、そうでもないでしょ？

……以上、いろんな理由を踏まえて、HTMLでサイトを作ることに決めました。時を同じくして知ったのが、静的サイトジェネレータの存在です。全部手作業でHTMLを書くのは大変だしミスの不安もありますが、静的サイトジェネレータなら「あのテンプレートにこの本文を流し込んでページ作って、記事一覧ページからリンクを張って、サイトトップの最新記事リストも更新して」といった作業を自動でやってくれます。しかも出来上がるのは、軽くて素朴で愛おしいHTMLファイル。「これや！！！！！」と思いました。

なぜHugoを選んだのか

以前Hexoという静的サイトジェネレータを見かけたことがあり、名前が格好いいな〜と記憶に残っていました。なので第一候補として調べ始めたんですが、いろいろ見ていくとわたしにとってはHugoが一番合ってそうだったので、採用しました。最大の決め手はビルドの速さです。そういえばここでも身軽さを重視している。

• Hugo - The world's fastest framework for building websites

2024年のリニューアル

サイト開設当初は、PCで記事を書いて手動でサイトを生成（ビルド）し、手動でサーバにアップロードしていました。でも、これ地味に面倒なんですよね。記事を書くのにエディタを立ち上げ、ビルドのためにターミナルを立ち上げ、サーバへのアップロードにFTPツールを立ち上げ……と、なにかと煩雑で。VS CodeをFTPツールとして使えるようになる拡張機能もあるけど、わたしのスキルレベルだとかえって詰まりそうだなーと思ってやめました。認証まわりの理解も足りてないし。

というわけで、GitHub側でビルドとアップロードを自動化することにしました。PCで記事を書いてリモートリポジトリにpushするとGitHub Actionsが発火して、自動でよしなにやってくれます。これだけでも体感でだいぶ楽になったし、新しいことを取り入れたという達成感も得られました。

2025年のリニューアル

しばらくはそれで満足していましたが……だんだん物足りなくなってきました。そもそもPCの前に座らないと更新作業を進められないというのがきついと気づいたんです。わたしは体が丈夫なほうではなく、とんでもなく疲れやすいので、仕事の日などはデスクにたどり着くことさえできずにベッドに倒れ込むこともままあります。そうなると、いつまで経ってもサイトを更新できない。

スマホにエディタアプリを入れて記事を書き、PCで更新作業をするというのも試しました。アプリもいろいろ試行錯誤しました。でもだめだった。「次にPCを立ち上げたときにアップロードしよう」だと結局そこで滞っちゃうんですよね。もっと……もっと楽がしたいんだよおれは！！

というわけで、Hugoの機能であるContent Adaptersと、ヘッドレスCMSを導入することにしました。この2つを組み合わせると、エディタを開かずともWordPressなどのブログサイトみたいに管理画面から記事を書けます。しかも自動生成されるページはWordPressのそれよりも軽くて取り回しやすいHTML。ブログサイトとHTMLサイトのいいとこ取りみたいな感じです。「これや！！！！！」と思いました（2回目）。

なぜmicroCMSを選んだのか

ヘッドレスCMSにもいろいろあります。その中でmicroCMSを選んだのは、なんといっても日本製のサービスだから！　技術面に自信がないわたしにとって、公式のドキュメントが読みやすいことと（なにせ母語ですから）、なにかあったときにも助けを求めやすいというのはものすごく魅力的でした。わたしの用途だと無料プランで十分事足りるし、UIもきれいで、スマホから問題なく扱えるし。増やしてほしい機能はいくつかあるんですが、こまめにアップデートが行われていて活発に開発されている印象なので、前向きに待機しています。

• microCMS｜APIベースの日本製ヘッドレスCMS

他のヘッドレスCMSサービスもいくつか試しましたが、対応言語が英語のみとか、スマホからだと表示が崩れるとか、無料プランの制限が大きすぎるとか、サポートに英語でメールしてみたけど返事が来ない（悲）とかで諦めました。多少行き詰まってもバリバリ自己解決できるくらいスキルのある人なら問題ないんでしょうけど、わしには無理じゃった。

そんなこんなで、今回のリニューアルでサイト更新の流れはこう変化しました。

所感

楽になった！！

嬉しい！！！！！

休日の朝にベッドでごろごろしながらサイトを更新できるの最高すぎます。移動中や休憩中などに「ちょっと書き進めとくか（ぽちぽち）」ができるのもよい。それでいてサイト本体は軽いまま！　わたしが求めていたものがここにある。

単純にサイトを軽量化する・つくりをシンプルにするなら、上記のような仕組みは全部削って、手打ちでHTMLを書いてアップロードするのが一番に決まってます。でもそれだとわたしがしんどい。個人サイトにおける判断基準は法と利用規約に反しない限りすべて管理人にあるので、「わたしが快適かどうか」で落としどころを設定していいんですよね。その点でいくと現状がベスト。もちろん今後も随時見直して、楽に快適にサイトを続けられる最適な状態を維持していきたいです。自分が楽をするための勉強、楽しすぎる。

Claude.aiに助けられた

コーディングにおける会話型AI、まじもんの神です。Claudeがいなかったら、この記事に書いたことはほとんど全く実現できてないと思う。「GitHub Actions導入したいからコード書いて」とか「Content AdaptersとmicroCMSでいい感じにしたいんだけど何したらいいの」とか雑に聞いてもすべて教えてくれました。

わたしのような素人が技術系の記事を参考にコーディングするときの壁ベスト3：「なんかエラー出たけどどこが間違ってんのか分からん」、「自分の環境だとどこをどう書き換えたらいいのか分からん」、「あっちとこっちの記事で書いてることが微妙に違うけどどっちを採用したらいいのか分からん」、これらを爆速で解消できるのが最高です。特に、エラーが出たらログをコピペして「これどういう意味？」って聞くだけでなんとかなるのがもう……大革命です。

わたしは対話型AIに頼るとき、よく「初学者向けに、比喩を適宜用いて解説しながらステップバイステップでサポートしてください」と指示を出してます。めちゃくちゃ優しく教えてもらえるのでありがたい。

サークル活動のページも整備できた

microCMSに同人誌のデータを入力して呼び出すことで、これまでの活動を一覧できるページを簡単に作れました。サイトメニューにある「dojin」がそれです。CSSがまだ詰められてないので見た目があちこち微妙ですが、用は足りるのでひとまず公開しました。こういった制作物や実績的なページがあると、《自分の城》っぽさが増して満足感ありますね。

microCMS導入前はHugoのdataディレクトリにJSONファイルを作る方法でやろうとしてたんですけど、面倒くさがりなわたしにそんなんできるわけないだろ。この世にヘッドレスCMSがあって本当によかった。

デザインまわりに手をつける余裕が生まれた

これは言わば副産物ですが、移動中や休憩中にサイトの更新ができるので、相対的にPC前での時間を他のことに割けるようになりました。おかげで、ずーっと気になっていた改装に着手できたんです。めちゃくちゃすっきりした。

実は、この記事で改装についても触れようと思っていたんですが、書いてるうちにとっちらかってきたのでまるっと削除しちゃった。別途ふりかえりを書こうと思います。

以上です

個人サイトって、インターネット（特にSNS）のネガティブ面から解放されてのびのび過ごすことのできる素敵な居場所です。今回、仕組みづくりをちょっと頑張って事務的な手間も減らすことで、さらに居心地のいい空間になりました！

これからも無理せず楽しく過ごします。個人サイトを持つすべての人たちも、それぞれが快いインターネット生活を送れますように。