crofty で作った実例

abc.js で楽譜を書く

Sat, 13 Jun 2026 19:00:00 +0900

ABC notation は音楽を書くための素のテキストの方法だ。プロジェクトのレンダーフック（render-codeblock-abc）が abc フェンス付きコードブロックを abc.js に送り、それが譜面を彫刻して再生ボタンを加える── すべてブラウザのなかで、あなたの記事のテキストから。

簡単な曲

調と拍子を変えた音階

どちらの譜面でも再生を押せば音が聞こえる。記法はあなたの Markdown のなかで素のテキストのまま残るので、差分はきれいに取れ、どのプラットフォームでも生き延びる── レンダリングと音声は、ファイルに焼き込まれているのではなく、読者のブラウザが加える。

ここでの Markdown の見え方

Fri, 12 Jun 2026 09:00:00 +0900

このページのすべては Markdown で書かれている。それが何をもたらすか、手短に紹介しよう。

見出しは構造を明快に保つ

長い文章を、読者が見渡せる節に分けるのに使う。

太字、斜体、インラインコード を、記法を意識せずに書ける。

リストはただのハイフン
1 行に 1 項目
入れ子もできる

引用は、立ち止まる価値のある一行を際立たせる。

コードは、フェンスで囲む:

crofty build
crofty deploy

そしてリンクは角括弧の中のただのテキスト。これで道具立ては全部だ ── エディタもプラットフォームも要らず、どのファイルでも読めるテキストだけ。

コードに色を

Thu, 11 Jun 2026 09:00:00 +0900

フェンス付きブロックにその言語のタグを付ければ、Hugo のハイライター（Chroma）が色を付けてくれる。このサイトはクラスベースのハイライトを使っているので、色は css/chroma.css から来ており、読者のライト／ダーク設定とともに切り替わる。

crofty build のようなインラインコードはそのまま素のままだ。ブロックには完全な扱いが施される。

package main

import "fmt"

func main() {
    // a tiny program
    for i := 0; i < 3; i++ {
        fmt.Println("hello, crofty", i)
    }
}

const posts = await fetch("/index.json").then((r) => r.json());
const recent = posts.filter((p) => p.draft === false).slice(0, 5);
console.log(`showing ${recent.length} posts`);

from pathlib import Path

def word_count(folder: str) -> int:
    return sum(len(p.read_text().split()) for p in Path(folder).glob("*.md"))

print(word_count("content/posts"))

crofty build       # render Markdown to a static site
crofty deploy      # push it to your own domain

{
  "workspace": "01KV1XEQ26RCK07BFWGZW743K1",
  "deploy": { "provider": "cloudflare", "project": "crofty-demo" }
}

言語を指定しないフェンスは色が付かないまま残る──シェルのやり取りや素の出力にはこれで十分だ。

言葉を所有する

Wed, 10 Jun 2026 09:00:00 +0900

web 上の文章の多くは、誰か他人のプラットフォームの上にある。無料に見えるが、住所は相手のもので、読者は借り物、サービスが終われば言葉も消えうる。

このブログは設計からして逆だ。すべての記事はディスク上の Markdown ファイル。crofty はそれを素の静的サイトに変え、私が所有するドメインへ公開する。出ていきたくなっても、エクスポートするものは何もなく、囲い込みもない ── ファイルははじめから私のもので、土台はただの Hugo だ。

言葉を所有するのは郷愁ではない。自分が持つ土地の上に建てるか、借りた土地の上に建てるか、その違いだ。

フィードを持ちつづけるということ

Tue, 09 Jun 2026 09:00:00 +0900

フィードはサイトを追う最も古い方法であり、いまなお最も優しい方法だ。ログインもなく、アプリもなく、何を目にするかを決めるアルゴリズムもない。購読すれば、新しい記事は、あなたがすでに使っているどんなリーダーにも届く。

私がここでひとつ持ちつづけているのは、この関係を直接のものにしたいからだ。私の書くものを気に入ってくれたなら、そのアドレスを手に取って、そのまま持ち去ってくれていい。あいだに立って、私の言葉があなたに届くかどうかを決めるものは、何ひとつ存在しない。

それこそがすべての魅力だ。フィードは何も求めず、すべてを覚えている。

Mermaid で図を描く

Sun, 07 Jun 2026 09:00:00 +0900

Mermaid はフェンス付きコードブロックを図に変える。あなたは関係をテキストで書き、ブラウザがそれを描く。プロジェクトのレンダーフック（render-codeblock-mermaid）がそれを使うページにだけ Mermaid を読み込み、図はあなたのライト／ダーク設定に追随する。

フローチャート

graph TD
  A[Write Markdown] --> B{crofty build}
  B -->|ok| C[Static site]
  B -->|error| D[Fix and retry]
  C --> E[Deploy to your domain]

シーケンス図

sequenceDiagram
  participant You
  participant crofty
  participant Cloudflare
  You->>crofty: crofty deploy
  crofty->>Cloudflare: upload built site
  Cloudflare-->>You: live URL

円グラフ

pie title Where the words live
  "Plain Markdown" : 92
  "Front matter" : 6
  "Everything else" : 2

ソースは記事のなかで素のテキストのままなので、図はその周りの散文と同じくらい持ち運びやすく──そして差分も取りやすい。

出口こそが機能だ

Sat, 06 Jun 2026 09:00:00 +0900

ほとんどのプラットフォームは、去れないように作られている。投稿も、フォロワーも、履歴も、すべて内側にあり、出口はわざと狭い。

私は逆がよかった。このサイトは、私が持つファイルを、私が持つドメインへ公開しているだけだ。

去りたくなっても、エクスポートするものは何もない。ファイルははじめから私のものだ。

それは些細なことに聞こえる ── 終了したサービスに十年分の文章を奪われるまでは。容易な出口は、去るつもりがある印ではない。はじめから囚われていなかった、という印だ。

画像と図版

Thu, 04 Jun 2026 09:00:00 +0900

画像は、それを使う記事のすぐ隣に置かれる。この記事は ページバンドル ──index.md とその写真を収めたフォルダ──なので、ファイルは一緒に旅をし、リンクが壊れることはない。

素の Markdown 画像

標準の記法は ![alt text](file) だ。これはこのフォルダに同梱された SVG である。

代替テキストは省略可能な飾りではない──それはスクリーンリーダーが読み上げるものであり、画像が読み込みに失敗したときに表示されるものだ。声に出して言うキャプションのように書こう。

キャプション付きの図版

写真にクレジットやキャプションが必要なとき、生の HTML も使える（このサイトは Hugo の unsafe な Markdown を有効にしているので、あなた自身の HTML がそのまま通る）。

Markdown のフォルダから、デプロイ済みのサイトへ、ひと手間で。

文中に、インラインで

画像は文中にも、周囲のテキストの大きさで収まれる──文の途中に落とした小さなアイコンに便利だ。（これは高さを指定するのに少しだけ生の HTML を使っている。素の ![]() 画像はつねにそれ自身のブロックとしてフルサイズでレンダリングされ、本物の写真にはたいていそのほうが読みやすい。）

これが写真のための道具一式のすべてだ。フォルダのなかのファイルと、それを指す一行の Markdown。

テキストのフォルダ

Tue, 02 Jun 2026 09:00:00 +0900

このサイトの背後にデータベースはなく、ダッシュボードもない。あるのはフォルダだ。その中には Markdown ファイルが、記事ごとに一つずつ、名前順に並んでいる。

そのフォルダはどんなエディタでも開けるし、どんなツールでも検索でき、どこかへコピーすればバックアップになる。二十年後も意味をなしているだろう。テキストはいつもそうだったのだから。

テキストのフォルダはつつましい。そしてそこが肝心なのだ。動かし続けるのに企業を必要としない。必要なのは、私が書き続けることだけだ。

動画を埋め込む

Sun, 31 May 2026 09:00:00 +0900

自分の所有するページに動画を載せる誠実なやり方は二つある。ファイルを自分でホストするか、どこか別の場所からプレイヤーを埋め込むか。ここではどちらも動く。

自前ホスティングの動画

ファイルを手元に置けば、主導権も手元に残る。HTML の <video> 要素には第三者も JavaScript も要らない。下のクリップはこの記事のフォルダに同梱されているので、音を出してほしい──音声がある。

Your browser does not support the video tag.

.mp4 を記事のフォルダに置き、画像と同じやり方で src をそこに向ければいい。（このクリップは Big Buck Bunny、© Blender Foundation, CC-BY 3.0。）

YouTube の埋め込み

動画がすでにプラットフォーム上にあるなら、Hugo の組み込みショートコードを使う── 生の HTML は要らず、動画 id だけでいい。

このショートコードはレスポンシブでプライバシーに配慮した iframe をレンダリングする。{{< vimeo id >}} は Vimeo に対して同じように働く。プラットフォームの到達力がほしいときは埋め込みに、ファイルがプラットフォームより長生きしてほしいときは <video> に手を伸ばそう。

開かれた場で書く

Thu, 28 May 2026 09:00:00 +0900

頭のなかにある考えと、見知らぬ人たちのために書き留めなければならない考えとのあいだには、違いがある。後者は、筋が通っていなければならない。曖昧な身振りの陰に隠れることはできない。

だから私は開かれた場で書く──どの投稿も完成しているからではなく、それを仕上げるという行為そのものが、私に何かを教えてくれるからだ。ページを埋めようとして初めて、穴が見えてくる。

これらの投稿のほとんどは、ごくわずかな人にしか読まれないだろう。それでいい。この鍛錬は私自身のものだ。誰かが見ていようといまいと。

貼り付けるだけの外部スニペット

Mon, 25 May 2026 09:00:00 +0900

web の半分は HTML のかたまりを手渡して「これをあなたのサイトに貼り付けて」と言う。それらのスニペットはただの生の HTML と <script> であり、このサイトが Hugo の unsafe な Markdown を有効にしているので、ここでも動く。よくあるものをいくつか。

GitHub Gist

Gist は、gist の .js URL を指す一つのスクリプトタグで埋め込める。

CodePen

CodePen の埋め込みは <p> のプレースホルダーと彼らの ei.js で、それがライブのエディタに差し替わる（これは CodePen 自身のドキュメントにある例の pen だ）。

See the Pen on CodePen.

ソーシャル投稿

Mastodon（や X、Bluesky、Instagram…）は <iframe> と、それをリサイズする小さなスクリプトを手渡してくる。iframe は本物の HTML なので、スクリプトがブロックされても投稿は表示される──ただ高さを自動で合わせられないだけだ。これは Mastodon 自身のアカウントである。

素の iframe

そして他のすべてが行き詰まったとき、素の <iframe> はそれを許すものなら何でも埋め込む──地図、スライドデッキ、ダッシュボード。

上のどの埋め込みも、本物の生きたリソースを指している──だからここで見えるものは読者が得るものそのものであり、あなたのページをどのプラットフォームも所有しない。

タイムラインを去った理由

Fri, 22 May 2026 09:00:00 +0900

タイムラインは、人を反応させ続けるために作られている。すべての投稿が他のすべての投稿と競い合い、勝つのは最も真実なものではなく、最も声の大きいものだ。気づけば私は、勝つために書いていた。

それは、ゆっくりと自分を見失っていく道だ。考えをフィードに合わせて形づくるようになり、フィードを自分の考えに合わせて形づくることをしなくなる。

だから私は去り、何もスクロールして消えていかない場所を作った。ここでは投稿は、誰かが読もうと選ぶまで、じっと留まっている。カウンターも、ランキングも、急かすものもない。聴衆が叫び返すのをやめてみると、私にはかえって語るべきことが多くあったのだ。

プレーンテキストは生き残る

Fri, 15 May 2026 09:00:00 +0900

九〇年代のファイルで、もうどのプログラムでも開けないものが手元にある。その形式は、それを作った会社とともに死んだ。だが、同じ年に作られたプレーンテキストのファイルは、何ででも、たちどころに開く。

それがテキストの静かな超能力だ。バージョンもなく、ライセンスもなく、依存するホストもない。Markdown のファイルとは、構造のふりをした文字といくつかの約物にすぎない。

何で書くかを選ぶとき、私はそれがどれだけ生き永らえるかも選んでいる。プレーンテキストは、私が選びうるほとんど何よりも、長く生き残る。

自分だけのドメイン

Fri, 08 May 2026 09:00:00 +0900

プラットフォーム上のユーザー名は、ゲスト用の通行証だ。取り消され、名前を変えられ、サービスが畳まれれば消し去られてしまう。ドメインは違う。それは自分が直接借りる住所であり、好きなところへ向けることができる。

私のドメインは、これまで何度かホストを移ってきた。リンクが切れたことは一度もない。名前は変わらず、その背後にある機械だけが入れ替わったからだ。

その連続性は、書き続けるほど重みを増す。人は古い記事を見つける。他のサイトが自分のサイトへリンクを張る。自分だけのドメインは、そのすべてが塵に帰すのを防いでくれるものだ。

ゆるやかな web のための覚え書き

Thu, 30 Apr 2026 09:00:00 +0900

ページは、生きているために動く必要はない。私を追跡することも、何かを勝手に再生することも、一文を読み終える前に注意を乞うこともいらない。

ゆるやかな web とは、ただそういったものをすべて取り除いた web のことだ。一度に読み込まれるページ。じっと佇むテキスト。読むこと以外、あなたに何も求めないサイト。

私は自分のささやかな一画を、そんなふうに築こうとしている。ポップアップもなく、装飾もなく、人為的に煽られた切迫感もない。ただ、あなたの時間を尊重する一枚のページの上の言葉だけ。ほかのすべてが速くなればなるほど、私はただ静かに待つ場所をひとつ欲しくなる。

ブログロールの復活

Wed, 22 Apr 2026 09:00:00 +0900

かつては、どの個人サイトにも、その書き手が気に入った他のサイトの短い一覧が載っていた。そのリンクをたどって、人はさまよった。一つの良いブログが、さらに三つへと導いた。

その習慣は、プラットフォームが発見を引き受けたときに薄れていった。次に見るものをアルゴリズムが差し出してくれるのなら、なぜわざわざ外へリンクを張る必要があるだろう。

けれど、そのさまよいこそが一番よいところだった。ブログロールは、ささやかな寛容のふるまいだ ── 自分から目をそらし、読む価値があると思う人たちへと指し示すこと。それが戻ってきているのを見るのはうれしい。同じ視線を奪い合うのではなく、互いを薦め合うとき、web はもっと面白くなる。

バックアップは未来の自分への恋文

Tue, 14 Apr 2026 09:00:00 +0900

バックアップのことを考える人は、それがあればすべてを救えたはずの瞬間が来るまでは、誰もいない。そのときにはもう手遅れで、その喪失は、味わったことのない人には説明しがたいほど全面的だ。

バックアップとは、どこか別の場所に置いた複製にすぎない。華やかさはなく、後回しにしやすい。だがそれは、来年の自分への静かな約束でもある──今日やっている仕事が、それでもなお存在し続けるという約束だ。

私のサイトはまるごと素朴なファイルなので、バックアップはフォルダをコピーするだけのことだ。もっとも単純な仕組みが、もっとも安全な仕組みでもあったというわけだ。

バズらないということ

Sun, 05 Apr 2026 09:00:00 +0900

かつて私は、ある記事をどれだけ広がったかで測っていた。大きな数字は、その文章が良かった証のように感じられた。だが、そうではなかった。それはたいてい、その文章が声高だった証にすぎなかった。

いまでは私は、最初の一行を見て立ち去った一万人より、最後まで読んでくれた十人に届くほうがいい。小さな数字のほうが、正直なのだ。

バズらないことは、ほとんど誰の心にも留まらないものについて書く自由を私に与えてくれた。そうして書いたものこそ、私がいちばん誇りに思う記事であり、数人が実際に覚えていてくれる記事になる。

Markdown で十分だ

Fri, 27 Mar 2026 09:00:00 +0900

何年ものあいだ、私はより良い執筆ツールを追いかけてきた。より豊かなエディタ、より多くのボタン、より巧みなページの整え方。そのどれも、文章をいっこうに良くしてはくれなかった。

私が実際に必要としていたのは、見出しと、いくらかの強調と、ときおりのリスト、そして外へリンクを張る手立てだった。Markdown はそのすべてを、キーから手を離さずに打てるひと握りの素朴な記号で与えてくれる。

制約こそが贈り物だ。段落の見た目についての選択肢が少なければ、その分の注意を段落の中身へ注げる。Markdown で十分であり、たいていの場合、十分こそがちょうどいい量なのだ。

所有すべきは関係であって、読者ではない

Wed, 18 Mar 2026 09:00:00 +0900

プラットフォームはあなたの読者を、まるであなたが所有する何かであるかのように語る。だが、そうではない。フォロワーはプラットフォームの上に暮らしており、あなたのどの記事が彼らに届くかは、プラットフォームが決めている。

あなたが所有できるのは、その経路そのものだ。フィードとドメインは私のものだ。誰かが購読するとき、次の記事を見せるに値するかどうかを判断して、私たちのあいだに立つ者は誰もいない。

私はここで読者を集めているのではない。一枚の扉を開けたままにしているだけだ。くぐりたい者は、自らの条件でくぐればいいし、好きなときに去ればいい。それこそが、web において持つに値する唯一の関係だ。

web の静かな片隅

Mon, 09 Mar 2026 09:00:00 +0900

すべてが舞台である必要はない。ただの部屋であるような場所もある──小さくて、灯りがともり、人の住んだ気配のある部屋が。このサイトはそのひとつだ。

ここに投稿するのは、演じるためではない。私のものである片隅で、声に出して考えるために投稿する。私をスクロールさせ続けようと照明が変わることもなく、見知らぬ誰かの怒りが招かれもせずにやってくることもない場所で。

大きな web はこれからもずっと騒がしいだろう。それを直そうとも、争おうとも思わない。ただ、戻ってこられる自分だけの静かな片隅がほしい。そして通りすがる誰のためにも、扉の鍵は開けたままにしておきたい。

文章のためのバージョン管理

Thu, 26 Feb 2026 09:00:00 +0900

プログラマーは仕事のすべてのバージョンを残し、その歴史のどの瞬間にも戻ることができる。書き手はめったにそうしない。そのために私たちは何かを失っている ── 一作が実際にどのようにして生まれてきたか、その記録を。

私の記事は素のテキストファイルなので、コードが保たれるのと同じやり方で残している。一つひとつの編集が、保存された小さな一歩だ。三つ前の草稿の段落を振り返ることもできるし、いったん切ったあとで惜しくなった一行を取り戻すこともできる。

それはまた、何ものも本当に消え去ることはない、ということでもある。古いバージョンがコマンド一つ先にあるなら、まずい書き直しは悲劇ではない。書くことの歴史が、書くことそのものの一部になる。

無料の代償

Sat, 14 Feb 2026 09:00:00 +0900

無料のプラットフォームは、お金を稼ぐ必要が出てくるまでは気前がよい。そのとき、代償がひそかにやってくる。支払わなければリーチは絞られる。投稿は広告に包まれる。規約は足元で移ろい、自分が注いだ仕事は、誰か他人の収支のために働きはじめる。

あなたは決して顧客ではなかった。あなたこそが、売られていたものだ。

私はむしろ、ドメインとホスティングのために、小さく素直な対価を払い、自分が何に払っているのかを正確に知っていたい。請求は正直で、仕事は自分のものであり続ける。無料には必ず代償がある。問いはただ一つ、それが自分に見えているかどうかだ。

ふたたび RSS で読む

Sat, 31 Jan 2026 09:00:00 +0900

今年、私はふたたびフィードで読むようになった。それが web の感触を変えた。リーダーは、私が選んだサイトのものすべてを、順番どおりに、ほかには何も混ぜずに見せてくれる。終わりまで来れば、それで終わりだ。

無限スクロールはない。フォローしたこともないアカウントからのおすすめ投稿もない。何を見てよいかをひそかに選り分けることもない。

それはより穏やかな読み方であり、書き手にとってもより公平な読み方だ。私が購読するどのサイトも、大きかろうと小さかろうと、同じやり方で私のもとへ届く。フィードリーダーは古い技術だ。そこへ戻ってきたのは、忘れるべきでなかった何かを思い出すような感覚だった。

小さく始める

Sun, 18 Jan 2026 09:00:00 +0900

サイトを決して持たないための一番たやすい方法は、それについての完璧な計画ができるまで待つことだ。デザイン、テーマ、更新の頻度、読者層。すべてを練り終えるころには、その瞬間はもう過ぎ去っている。

このサイトを、私は小さく始めた。数本の記事、素っ気ないレイアウト、何になるかという大それた構想もなしに。あとから育ってもいいし、控えめなままでもいい。どちらでもかまわない。

大切なのは、それが存在すること、それが自分のものであること、そして言いたいことができたときにいつでも書き足せることだ。小さく始めるのも、始めることに変わりはない。あとはただ、また姿を見せるだけだ。

お問い合わせ

Thu, 01 Jan 2026 09:00:00 +0900

このようなサイトの著者に連絡する静かな方法はメールです： hello@example.com。フォームも、アカウントも、順番待ちも要りません ── 昔ながらのやり方で、メッセージが受信箱に届きます。

静的サイトにはフォーム送信を受け取るサーバーがありません。それは欠点ではなく利点です。侵入される対象もなく、入力内容を黙って集める仕組みもありません。もしフォームが必要なら ── 予約や、長めの問い合わせなら ── スモールウェブの答えは、それを処理してくれるサービス（Formspree、Tally、Google フォームなど）を埋め込むことです。ページは静的なまま、受け取りはフォーム提供側が担います。

このサイトについて

Thu, 01 Jan 2026 09:00:00 +0900

これは crofty で作ったデモサイトです。下に出てくる著者は例 ── このブログを持つであろう人物の代役です。

ここにあるものはすべて、素の Markdown を静的サイトに変換したもので、所有者が管理するドメインに置かれています。間にプラットフォームはなく、どこかへ黙って通信することもなく、いつでも普通の Hugo へ持ち出せます。記事はフォルダの中のファイルにすぎず、このページもその一つです。

もしあなたが自分の小さなサイトを始めるか迷ってここを読んでいるなら ── 許可は要りませんし、多くも要りません。テキストの入ったフォルダと、それを置く場所があれば十分です。

プライバシーと奥付

Thu, 01 Jan 2026 09:00:00 +0900

ここに書くことはほとんどありません。それがむしろこのサイトの姿勢です。Cookie は設定せず、アクセス解析も動かさず、読み手を追跡する第三者スクリプトも読み込みません。どこかへ黙って通信することもありません。ホストはファイルを配信するために静的ホストが記録するぶんだけを記録し、それ以上は何もしません。

奥付。 Markdown で書き、Hugo の上の crofty でビルドし、著者が所有するドメインに静的ファイルとして公開しています。テーマは凍結されていますが eject 可能で、中身はテキストの入ったフォルダにすぎません。物販をするサイトや、ここより多くを集めるサイトなら、特定商取引法に基づく表記やより詳しいプライバシーポリシーもここに置くことになります。

リンク集

Mon, 01 Jan 0001 00:00:00 +0000

よく読むサイト。これは昔ながらの blogroll ── あなたの時間に値する場所への、一方向のリストです。公開ページにリンクするのに許諾は要らず、誰かを「友達」と称してもいません。ただ web の良い片隅というだけです。