Obsidianで書いたノートが、そのままホームページになる仕組みをつくってみました。
Obsidianで書いたノートが、そのままホームページになるひな形「Jagwebbuilder」を公開しました。メニューもページもお知らせもノートなので、直すときはObsidianを書き換えるだけ。Cloudflareに無料で公開でき、作業のほとんどはCodexやClaude Codeに文章を貼るだけで進みます。準備からドメインの設定まで進められる手引きも用意しました。
WEB
ホームページって、作るときより作ったあとのほうが大変だなぁと、ずっと思っていました。
営業時間が変わった、メニューが増えた、写真を差し替えたい。そのたびに管理画面にログインして、どこを直せばいいか探して…。結局めんどうで放置、というのをよく見ます（自分もやります）。
一方で、メモは毎日Obsidianに書いている。だったらObsidianのノートが、そのままホームページになればいいのでは？ということで、作ってみました。
Obsidianが管理画面のかわりになる
メニューも、各ページの文章も、お知らせ（ブログ）も、ぜんぶObsidianのノートです。直したくなったらノートを書き換えるだけ。ノート同士のリンクも、貼り付けた画像も、Obsidianでの書き方のまま通ります。
メニューは「menu」というノートに箇条書きで並んでいて、行を消せばメニューから消え、足せば増えます。字下げすれば子メニュー。最初から、よくあるホームページの構成（ホーム／お品書き／こだわり／店舗案内／よくあるご質問／お知らせ／お問い合わせ…）が一通り入っているので、足すときと消すときだけ触ればOKです。見本は「Jagカレーショップ」という架空のカレー屋さんにしてあります。
月額の費用がかからない
Cloudflareの無料枠に公開します。かかるのは、独自ドメインを使う場合のドメイン代だけ。ドメインなしでも「○○.pages.dev」という住所でそのまま公開できます。
作るのは、ほとんどAIがやってくれる
GitHubで公開していますが、正直gitってどう使えばいいのか？わからない人も多いと思いますので、CodexやClaude Codeにコピペで使えるようにしてあります。
この手引きでMacかWindowsか、Claude CodeかCodexかを選ぶと、AIに貼る文章がその場で書き換わるので、上から順に貼っていってもらえればOKです。AIが屋号や載せたい内容を聞いてくれて、答えていくとホームページができていきます。
自分の手でやるのは、Cloudflareのアカウントを作るところと、ログインの「許可」ボタンを押すところくらいです。ここはパスワードが絡むので、AIにはやらせない作りにしてあります。
地味にこだわったところ
書きかけのお知らせは公開されません。ノートの先頭に「publish: true」と書いたものだけがサイトに出ます。AIに下書きを書かせても、出すかどうかは自分で決められます。
スマホの写真の位置情報を消します。スマホで撮った写真には、撮った場所がこっそり入っています。自宅で撮った商品写真をそのまま載せると…というやつです。「素材」フォルダに写真を入れてコマンドを1つ通すと、サイト用に小さくして、位置情報も消してくれます。
準備中は検索に載りません。知り合いに見てもらって、直してから本番にできます。
ドメインのつなぎ方（そのまま使う／Cloudflareで買う／持っているドメインを使う）も手引きに書きました。持っているドメインでメールを使っている場合は、手順をまちがえるとメールが止まるので、AIに何を聞けばいいかの文面も用意してあります。
できないこと
お問い合わせフォームとネットショップは、いまはありません（連絡先はメールと電話の掲載です）。そのうち足すかもしれません。
コードはこちら（MITライセンスです）。