https://blog.nsys.dev/tags/%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88/ Recent content in 静的サイト on nsys.dev 技術ブログ Hugo ja Mon, 15 Jun 2026 10:00:00 +0900 https://blog.nsys.dev/posts/own-your-writing/ Mon, 15 Jun 2026 10:00:00 +0900 https://blog.nsys.dev/posts/own-your-writing/ <blockquote> <p><strong>シリーズ・第 1 回</strong> — 「個人で出版ツールを作って配るまで」（全 5 回予定）。各回は単独でも読めますが、まとめて辿るなら <a href="https://blog.nsys.dev/tags/crofty/">シリーズの記事一覧</a> からどうぞ。今回は全体像と前提の共有で、個々の設計判断は次回以降に取り上げます。</p> </blockquote> <p>書いたものは、どこに残るでしょうか。</p> <p>普段、文章を書く場所の多くは、誰かのプラットフォームの上です。読んでもらいやすい一方で、記事の住所（URL）も、見た目も、読者との接点も、その場所の仕様に委ねることになります。サービスが方針を変えたり、畳んだりすれば、書いたものもそれに従うしかありません。</p> <p>それ自体が悪いわけではないのですが、「長く手元に残しておきたい文章」については、もう少し自分の側に置いておきたい。そう思ったのが、小さな出版ツール <strong>crofty</strong> を作りはじめたきっかけでした。</p> <p>このシリーズでは、その crofty を作って配るまでに考えたこと・つまずいたことを、テーマごとに分けて残していきます。今回はその土台として、「何をしたかったのか」と「全体の流れ」をまとめます。</p> <h2 id="何をしたかったか">何をしたかったか</h2> <p>やりたかったことは、ひとことで言うと「自分のコンテンツを所有したまま出版する」ことでした。具体的には、次の 4 つです。</p> <ul> <li><strong>自分のドメインで出す</strong> — 記事の住所（URL）を、自分の側に持っておく</li> <li><strong>Markdown で書く</strong> — プレーンテキストなら、どこにでも移せて、長く読める</li> <li><strong>静的サイトにする</strong> — データベースを持たず表示が速い。仕組みを入れ替えても記事はそのまま</li> <li><strong>エッジから配信する</strong> — 世界中どこからでも、軽く開ける</li> </ul> <p>平たく言えば、「書いたものが、それを作る道具より長生きする」状態にしておきたかった、ということです。</p> <h2 id="なぜ既存のツールそのままではないのか">なぜ既存のツールそのままではないのか</h2> <p>ここで正直な疑問があります。静的サイトを作る道具（いわゆる SSG）はすでに優秀なものが揃っていて、たとえば Hugo はとても速くて安定しています。実際、crofty も内部では Hugo を使っています。では、なぜわざわざ別の道具を作ったのか。</p> <p>理由は、「出版」は書くこと自体だけでは終わらないからです。実際にやってみると、書く前後にこまごました工程がついてきます。</p> <ul> <li>記事を書く土台を用意する（最初のセットアップ）</li> <li>体裁が整っているかを確かめる</li> <li>出力が、配信先で正しく開ける形になっているかを確かめる</li> <li>配信する</li> <li>後から見た目や設定を見直す</li> </ul> <p>これらを、その都度ばらばらの手順でやるのではなく、<strong>コマンド 1 つずつの薄い手順</strong>にまとめておきたかった。crofty は、Hugo を置き換えるものではなく、その上に薄くかぶせた小さな道具です。土台は素の Hugo のままなので、いつでも crofty を外して、ただの Hugo プロジェクトとして扱えます。この「いつでも自分の手元に戻せる」感覚も、最初から大事にしていました。</p> <p>なお、「道具を変えても記事は自分のもの」をどう保証するかは、それ自体で 1 本の記事になるテーマなので、次回にゆずります。</p> <h2 id="全体の流れ">全体の流れ</h2> <p>実際の流れは、とてもシンプルです。Markdown を書いて、組み立てて、配る。ほぼそれだけです。</p> <figure class="mermaid"> <img src="pipeline.svg" alt="Markdown を書き、crofty build で静的サイト（dist）を生成し、crofty deploy でエッジに配信して、読者のブラウザに届くまでの流れ図"> <figcaption>書く → 組み立てる → 配る、という一本道</figcaption> </figure> <p>登場するコマンドも、役割で並べるとこれだけです。</p>