novel-site — 零コストのプライベート小説サイト

Web

概要

novel-site は「零成本私人小说站」をコンセプトに、Cloudflare の無料サービス群(Pages / D1 / R2 / Functions)だけで動く個人向けの小説閲覧サイトのテンプレートです。フロントエンドは純粋な HTML/CSS/JS で実装され、フレームワークに依存しないためデプロイが非常にシンプル。スマホ・タブレット・デスクトップに対応したレスポンシブデザイン、複数のテーマ、読書設定パネル、ブックマークや閲覧統計などのユーザー体験を充実させつつ、サーバー費用ゼロで全栈(フルスタック)構成を実現することを目的としています。(300字程度)

GitHub

リポジトリの統計情報

  • スター数: 22
  • フォーク数: 3
  • ウォッチャー数: 22
  • コミット数: 17
  • ファイル数: 14
  • メインの言語: HTML

主な特徴

  • Cloudflare 無料枠だけで動作する全栈構成(Pages + D1 + R2 + Functions)
  • 純粋な HTML/CSS/JS、フレームワーク不要で容易にデプロイ
  • レスポンシブ対応・5 種類のテーマ・細かな読書設定
  • ブックマーク、閲覧統計、キーボード操作など読書に便利な機能群

技術的なポイント

novel-site は「静的フロントエンド + サーバーレス/ストレージ」の組合せでコストをゼロに抑える設計思想が一貫しています。具体的には Cloudflare Pages で静的ファイル(HTML/CSS/JS)を配信し、R2 を小説コンテンツや画像などのオブジェクトストレージとして利用、D1(Cloudflare の SQLite 互換 DB)にメタデータやブックマーク、閲覧ログなどを格納する想定です。Functions(Cloudflare Workers)を API 層に使えば、R2 からのコンテンツ配信や D1 への読み書きを安全に行えます。フロントエンドはフレームワークに依存しないため、軽量で初回読み込みが速く、Pages の CDN によりグローバル配信も容易です。

設計上の利点は「運用・費用面の簡潔さ」と「可搬性」です。Cloudflare の無料枠でほぼ完結するためランニングコストが不要で、静的ファイル主体なので GitHub/Pages を使った CI/CD と相性が良く、更新も Git プッシュで済みます。一方、注意点としては大規模データやフルテキスト検索には追加検討が必要な点、D1/R2 の無料枠や API レート制限に依存するためトラフィック増加時の設計(キャッシュ戦略や分割運用)が必要になる点が挙げられます。管理画面(admin.html)や Functions を組み合わせると、書籍のアップロードやメンテナンスをブラウザから行える仕組みを作れます。セキュリティ面では、公開コンテンツと管理 API を明確に分離し、Pages 側は読み取り専用、Functions による認証付き操作を用いるのが実務的です。(約700〜1000字の技術解説)

プロジェクトの構成

主要なファイルとディレクトリ:

  • .gitignore: file
  • 404.html: file
  • LICENSE: file
  • README.md: file
  • admin.html: file

…他 9 ファイル

補足(想定される役割)

  • index.html / 章ページ: ユーザー向けの閲覧 UI。レスポンシブかつテーマ切替・設定パネルを実装。
  • admin.html: 管理者用の簡易 UI。作品や章の追加・削除、メタデータ編集などを行うための入り口。
  • static/ または assets/: CSS や画像、フォントなどの静的リソース(本リポジトリの構造による)。
  • Functions(Cloudflare Workers)のスクリプト: R2 から小説本文を取得、D1 にブックマークや統計を記録する API。
  • README.md: セットアップ手順や Cloudflare 側の設定(Pages デプロイ、D1 テーブル作成、R2 バケット連携、Workers のルーティング)を説明。

これらを組み合わせることで、Git 上でソース管理 → Cloudflare Pages にデプロイ → R2/D1/Functions と連携して動作する「零コスト」フローが実現します。

まとめ

Cloudflare の無料枠だけで個人用の小説サイトを手軽に構築できる実用的なテンプレートです。(約50字)

リポジトリ情報:

READMEの抜粋:

📚 Novel Site — 零成本私人小说站

Cloudflare Pages + D1 + R2 + Functions 全栈方案,全程不花一分钱

一个完全运行在 Cloudflare 免费套餐上的私人小说阅读站。纯 HTML/CSS/JS,无框架依赖,部署简单,适合个人使用。

📖 详细教程零成本!用 Cloudflare 四件套搭建你的私人小说站 🌐 在线演示novel-site-6ba.pages.dev

✨ 功能特性

阅读体验

  • 📱 响应式设计,手机/平板/电脑自适应
  • 🎨 5 种主题(亮色/暗色/护眼绿/羊皮纸/淡蓝)
  • ⚙️ 阅读设置面板:字体族/字号/行距/页面宽度可调
  • 📖 底部工具栏:上一章/目录/设置/书签/下一章
  • 🔖 书签功能:任意章节加书签,书籍详情页查看所有书签
  • 📊 阅读统计:自动记录阅读时长、字数、天数
  • ⌨️ 键盘快捷键:左右箭…