個人サイトWebオンリー めぐる市開催記念のブログ投稿、2件目です:)
本記事では、現サイト「呼吸書房」の技術面にまつわる話を綴りました。前回の記事で書いたとおり、当サイトは素朴なHTMLサイトの時代を経て現在に至るので、そこからどう変化したのかなどにも触れています。
個人サイトの技術的な裏側に興味あるな〜って方にぜひ覗いてもらえたら嬉しいです。
ご挨拶と目次
ご挨拶と自己紹介は、前回の記事「中学生当時から現在まで、個人サイト変遷の思い出エッセイ」で存分に書いたので笑、未読の方はそちらからどうぞ笑。
以下は本記事の簡単な目次です。
- 「呼吸書房」サイトの技術構成
- 静的サイトジェネレーターEleventyについて
- GitHub + Netlifyデプロイについて
本記事では、HTMLやFTPやサーバーなどの用語説明はあまり行いません。
「昔ちょっとだけHTML書いてたことある」「FTPソフトでファイルアップロードしたことある」「レンタルサーバーがどんなものかぼんやり分かる」くらいの方であれば多分おおよそお読みになれると思います:)
「呼吸書房」サイトの技術構成
現「呼吸書房」サイトの技術構成は以下のとおりです。
- 静的サイトジェネレーター：Eleventy（Build Awesome）
- ビルド＆ホスティング： Netlify
- ファイル管理＆デプロイ：GitHub
以上！ あとエディタはVSCode使ってます。
ファイル構成はHTMLとMarkdownファイルで95%＋CSS2%+Liquid2%+JSやJSONで残り1%って感じです。静的サイトジェネレーターについては後述。
ブログも手作りです。せめてブログだけはWordPressとかMicroCMS使えばよかったよ…
なお、サイトデザインも自作で、CSS含めて自分で書いています。CSSが好きです。あんまりこだわったCSSアニメーションとかは書けないけど…笑！
デザインはちゃんとFigmaとかで作った方が良いんだよな〜〜と思いつつ、あまり本格的には設計していないです。なのでページによっては余白設計がｶﾞﾀｶﾞﾀだったりします。こういうのが数年経つとじわじわ大変になってくるんですが、そこはもう目を瞑っています…笑。
静的サイト？ 動的サイト？
本記事では何度か「静的サイト（static site）」という言葉を使います。あまり聞き馴染みのない言葉なのでちょっとだけ解説を。
対義語となる「動的サイト」から説明した方が分かりやすいかな。
めちゃくちゃざっくり簡単に言うと、「アクセスしたユーザーによって表示内容が変わる（動的）」or「データベースを基にサーバーサイドでページを生成している」サイトは動的サイトです。
前者はログインが必要なマイページとか、もっと言えばTwitterとかpixivとかがイメージしやすいでしょうか。後者はまんまWordPressです。ブログもだいたいそう。ブログだと分かりやすいかな。記事の投稿内容がデータベースに保存されていて、それを基にサーバーがHTMLファイルを生成していると思ってください。
つまり、現在のインターネットにおいて、大半のサイトは動的サイトなのです。（Webアプリケーションとかの話になってくるとより複雑なので省略！）
で、静的サイトはその逆です。
「誰がアクセスしても表示内容はほぼ固定（静的）」。
つまり昔ながらの素朴なHTML個人サイトは基本的に静的サイトです。index.htmlなどのHTMLファイル・CSSファイル・画像ファイルなどなどがあり、FTPソフトとか使ってレンタルサーバーにアップロードする、あれ。
コンテンツ更新にはHTMLファイルを直接編集しなきゃいけないやつ。
最近だとWIXやStudioなどの、ノーコードでサイトを作れる仕組みも人気ですが、これらのサイトでは逆にHTMLをゴリゴリ編集したりとかは基本的にあまりできないはずです。（あまり触ったことないので間違ったこと書いてたらごめんね）
静的サイトジェネレーターEleventyについて
話を戻しまして。
そういうわけで、呼吸書房は昔も今も「静的サイト」です。
今もサイト更新の際にはHTMLファイルを都度編集しています。笑
とはいえ完全に昔ながらの「編集するファイル＝サイトとして公開しているファイル」という構成ではありません。
この辺、むか〜しホームページ作ってたな〜という方には想像してもらいやすいと思うのですが、今どきのサイトには大体備わってる「全ページに共通で存在するヘッダー」、あれを2006年くらいに個人サイトで実現しようとするとめっちゃ大変じゃなかったですか。
サイト内の全HTMLファイルにヘッダー書いたとして、ヘッダーにリンク項目追加したら、サイト内の全HTMLファイルを同じように更新しなきゃいけない。で、普通にサイトのフォルダ内にHTMLファイルが50件以上あったりする。地獄！！（だから滅びた…）
そういうわけで昔のサイトはフレーム分割とかしまくってたわけですね。わはは。なおframeタグは現在では廃止されました。例に漏れず私もかつてはframeタグを使いまくっていたので白目を剥きながらiframeに置き換えた思い出…。
まあとにかく、静的サイトはそのままでは更新作業が大変なわけです。動的サイトなら、サイトの中身（コンテンツ）と見た目（テンプレート）が分離されてることがほとんどなので、記事の投稿にはデータベースだけ更新すれば良いし、ヘッダー更新するにしてもテンプレートの該当箇所だけ変えれば良いけど、静的サイトではそうもいかない。
その辺を補助するために当サイトで使っているのが静的サイトジェネレーター「Eleventy」となります。
静的サイトジェネレーターとは、文字通り、静的サイトを生成してくれるフレームワーク（＝便利な機能詰め合わせセット）です。Eleventyの他にもAstroとかGatsbyとかNext.jsが有名かな。最近は静的サイトジェネレーターって言わなくなりつつあるみたいですが面倒なのでそのまま言います。
彼らはだいたいJavaScript製です。そうJS。昔の個人サイトでJS使う機会ってどれくらいあったっけ…アクセスカウンターのCGIとか絵チャットのJavaの方がまだ馴染みあったような…。Node.jsとかReactとか込み入った説明しだすと大変なので、まあなんか現代の進化したスゲェJSです（ざっくり）。
当サイトはEleventyを用いて構築しています。
更新の際にはEleventyの処理を実行することで、たとえば以下のことをやってくれます。
- ヘッダー項目（があるテンプレートファイル）を更新したら、サイト内の全HTMLファイルにその変更を適用してくれる
- ブログ用のマークダウンファイル（テキストファイルみたいなものです）を作成・更新したら、ブログのレイアウトに沿ったHTMLファイルを生成して、かつ、前後記事やブログ記事一覧のHTMLファイルも自動的に更新してくれる
みたいな。手作業だと死ぬあれこれを自動化してくれます。だからジェネレーターなんですね。WordPressやブログならサーバーサイドで行われる工程を、私の手元にあるPC内でやっているイメージです。
最終的には、Eleventyが生成した後のHTMLファイルをまるっとインターネットに上げている※ので、当サイトは静的サイトという区分になります。
※だいぶ雑な説明なので後ほどNetlifyの段で補足します
どんな風に便利で役立っているか
やや技術的な話。上記の他にも、Eleventyの便利なところは、HTML以外の言語でファイルを書けるようになることです。
たとえば書籍一覧ページの刊行リストは、ファイル内で以下のように書いています（うまく記事生成できなかったので{}抜いて崩しています…笑）。Liquid言語です。
<ul class="list__publish">
%- for book in objects-book -%
<li>
<span>{ book.published | date: "%Y.%-m.%-d" }</span>
<div class="book-info__detail">
%- if book.url != '' -%
『<a href="{ book.url }">{ book.title }</a>』刊行
%- else -%
『{ book.title }』刊行
%- endif -%
</div>
</li>
%- endfor -%
</ul>
書籍情報はサイト内のあちこちで使うのでJSONファイル管理にして、サイト内のファイルであればどこからでもデータとして参照できるようにしています（上のコードで言うfor book in objects-book…部分がそれ。JSONファイル内のデータの数だけループして内容出力してね…というコード）。
当サイトのobject-book.jsonファイルの中身はおおよそこんな感じです。楽〜〜
{
"title": "すべての木陰に歌を",
"handle": "tree-shade",
"url": "/book/trees_shade",
"published": "2026-05-04",
"genre": "幻想長編",
"category": "novel"
},
{
"title": "walking postcard vol.12",
"handle": "postcard-12",
"url": "/book/postcard_12",
"published": "2025-11-23",
"genre": "個人誌",
"category": "postcard",
},
Eleventy以外の選択肢
同じ静的ジェネレーターの仲間であるGatsbyとAstroもちょっと触ったことがあります。
Astroでも良かったな〜と若干後悔中。ただAstroは多機能なぶん学習コストがやや高く、Eleventyは機能シンプルな分React初心者でもとっつきやすいです。
ただしドキュメントの読みやすさはAstroが圧勝。ブログだけでもそのうちAstroで作り直そうかなあ。。
CMS（コンテンツ・マネジメント・システム）との連携
この辺がややこしいんですが、静的サイトは（WordPressみたいな）データベースが一切使えないのかというとそういうわけじゃないです。
EleventyとWordPressを連携させて、記事コンテンツはWordPressのデータベースに持たせることもできます。EleventyでWordPressのデータベースから記事の情報を引っ張ってきて、ブログ記事のHTMLを生成する感じですね。
でも静的サイトなの！？ 静的サイトです。サーバーサイドで生成してるわけじゃないから……（ややこしい）
ブログを手元で全部管理するのめちゃくちゃ大変なので使えるならブログだけでもCMS連携させた方がいいです。呼吸書房サイト内のHTMLファイル数はそろそろ100を超えてきたんですが、そのうちの半数以上がブログ記事なので…。
GitHub + Netlifyデプロイについて
サイト内部についての話はここまで。続けてはサーバーの話。
昔ながらの個人サイトでは、FTPソフトでちまちまとファイルをアップロードしたり、レンタルサーバーの管理画面にアクセスして、やっぱり必要なファイルを個別にアップロードしたり…という作業が必要でした。個人サイトに限らず、10〜15年くらい前ならWordPressサイトも大体そうだったんじゃないかな。当サイトも2019年くらいまではこの運用でした。
これねえ、大変です。アップロードするファイルが抜け漏れしたり間違えたりするし。
自動化しようぜ！！！
ということで現在、呼吸書房サイトはGitHubとNetlifyを用いて、その辺をいい感じにしています。多機能レンタルサーバーみたいなものだと思ってください。
GitHubについて簡単に
GitHubね、聞いたことあるわ〜〜って人の方が少ないと思います。知ってる人いたら同業者なので本節は読み飛ばしてください。
ざっくり言うとファイルやソースコードの管理・共有サイトです。共有というところがミソで、おかげで外部のサーバーに繋いで「ファイル更新あったよ〜このとおりにサイトの内容にも反映してね」という連携ができます。
あとはファイルの更新差分を細かに記録できるので、やべぇアップロード内容をミスった、というときにも簡単に過去の内容に戻したりすることができます。
当サイトの活動報告記事でたびたび登場していた「コミットログ」もgit絡みのもので、『すべての木陰に歌を』の執筆過程はすべてGitHubに保存してあります。
ちょっと取っ付きづらいかもしれませんが間違いなく便利なので、とりあえず作って触ってみるととても楽しいもののひとつ。
ただし個人情報とか機密情報とか共有されるとヤバいものは間違っても入れちゃ駄目ですよ。
Netlifyについて簡単に
Netlifyは…さっきザックリ書きましたが、うん、多機能なレンタルサーバーという説明で良いんじゃないかと思います。ウェブサイトのホスティングの他、デプロイやビルドやキャッシュ管理なんかもやってくれます。
ただしFTPソフトのような、ファイルをひとつひとつ選んでアップロード…という作業は行いません。基本的にはGitHub上のファイル置き場（リポジトリ＋ブランチ）と連携し、「GitHubにファイル更新内容がアップロード（プッシュ）されたら、その内容を取得してサイトに反映する」という流れが基本です。
当サイトは無料プランで利用しています。無料でも広告が出ないぞ！！！
ただし無料プランの場合は一ヶ月あたりの更新回数とか、アクセス可能数に上限があります。とはいえこじんまりした小説中心サイトなら無料で充分です。
高画質な画像をいっぱい置いてあるサイトだとちょっと厳しいかも（サーバーとの月間通信容量制限があったりする）。
Netlify、去年に料金プランが更新されてよくわからんことになってるんですよね。。
最近はVercelやGitHub Pages、Cloudflare Pagesなども選択肢としてよく聞きます。
シンプルなサイトならGitHub Pagesで良いんじゃないかしら（ただし容量制限きつめなのでブログ管理はおそらく厳しい）。
日本国内のレンタルサーバーでも、エックスサーバーStaticが似たような仕組みを採用していて、GitHub連携して自動更新が可能だったりするみたいですね。
ビルドとデプロイと静的サイト
これは技術的な余談。カタカナが！カタカナが多い！！
当サイトは静的サイトであるとさっきから繰り返していますが、じゃあサーバーでファイル生成してないのか？というとやや語弊があります。
Netlifyにはビルド機能が備わっています。
つまりNetlifyサーバー上のNode.jsがEleventyの処理を実行し、マークダウンファイル等を元にサイト用のHTMLファイル等を生成（ビルド）してネットに配信しています。
さっき手元でもファイル生成してなかったかって？ この辺がややこしくてねえ……手元だとビルド通ったのにサーバーだと通らね〜〜みたいなことがよくある……
これはCMS連携前提のサイトで考えると分かりやすくなります。
個人サイトなら、管理人の私ひとりですべてが完結するので、自分の手元でファイル更新して生成してアップロードして〜ってやれば終わりですが、いわゆる企業サイトのような、複数人がCMS…WordPressみたいなブログで記事投稿を行なってるようなサイトだと、まあ大変なことになります。ブログ更新担当者が毎回手元でコマンド実行するなんて無理だし。
その辺を代替してくれるのがNetlifyです。GitHubだけでなく、CMSとも連携してくれるので、ブログ更新（によるデータベース更新）が行われたら自動的にHTMLファイル生成してサイトにも更新反映するね〜って挙動をしてくれます。
サーバーでファイル生成してるなら動的サイトじゃね？って感じですが、WordPressなどの動的サイトとはファイル生成のタイミングが異なります。
動的サイトがデータベースからファイルを生成するのは「ユーザーが（URLにアクセスして）ページをリクエストしたタイミング」です。なのでアクセス集中すると動作がちょっと重かったりする。
その点、Netlifyが静的サイトのファイルを生成するのは「デプロイ（ファイルの更新情報がNetlifyに連携）されたタイミング」です。ユーザーのアクセス毎ではない。なのでアクセス集中に強く、サイト表示も早いことが多いです。
その代わりにマイページみたいな機能を静的サイトで作ろうとするとかなり大変。
おわりに
以上！！！ お楽しみいただけたでしょうか。
個人サイト懐かしみ勢にもお読みいただけるよう、かなりざっくりした解説になっているので、同業者やWebに詳しい勢は片目を瞑りながら読んでいただけると助かります笑。もし明らかな記述ミスや認識違いがあったらそっと教えてください。
当記事をお楽しみ頂けた方は、過去に投稿したこちらの技術記事「ダークモード切り替え機能実装のログ」も合わせてどうぞ🌙
先日の記事「中学生当時から現在まで、個人サイト変遷の思い出エッセイ」で書いたとおり、個人サイトを運営してそろそろ20年になります。
20年という月日は、おおよそのサイトがそのままでは耐えられない時間です。Yahoo!ジオシティーズが終了したように。Web周りの技術はどんどん進化していくので、昔ながらのサイトは技術的に非推奨となり、いつかは表示できなくなっていきます。よほどシンプルなテキストサイトなどは例外として。
GitHub…は20年もつかもしれません。WordPressも。彼らはもはやインフラとなりつつあるので。Netlifyはどうかな。Eleventyはきっと無理でしょう。
現在の呼吸書房を構成している仕組みは、やがて当サイトよりも先に、きっと終了の時を迎えます。
そのときに次の仕組みへと引っ越ししやすいように、と考えたことも、静的サイトを選んだ理由でした。CMS導入をずるずる引き延ばしているのも同じ理由です。
静的サイトは、最悪なにかがあっても、サイトを構成するファイルをそっくりそのまま次のサーバーに連れてゆけます。動的サイトではそうもいかない。CMSもそうで、これまで投稿してきた記事の内容を全部エクスポートして引越し先にインポートして、それをまた引越し先の設計に合わせて新しく生成する仕組みを整えて…というのはすごく大変です。
この辺りの技術面はいずれAIが進化して何とかしてくれるかもしれませんが。
エディタの話を最後に少しだけ。私が使っているVSCodeはGitHub CopilotというAI補助機能が搭載されていて、HTMLやらCSSやらJSやらを書いていると、予測変換みたいな感じで、こういうコード作ろうか？という候補をちょこちょこ出してくれます。
無視することの方が圧倒的に多いのですが（コード生成が役立つのは主にJSを書くときなので）、たまに、存在しないそれっぽい本や小説のタイトルを予測候補として出してくることがあり、苦笑したいような微笑ましいような、なんともいえない気持ちになります。20年後にはどんな開発環境になっているんでしょうね。
改めて、個人サイトWebオンリー めぐる市開催、おめでとうございます。当日中に間に合ってよかった！
夕方以降〜夜には私も会場にいる予定です。良き祝祭を！