R100サイトを作ろうと思った理由

「R100サイト」は、プロジェクトの技術検証・実験・開発ナレッジを体系的に整理・公開するための場としてスタートしました。
社内外のコラボレーターや、後続の開発者にも“なぜこう作ったのか”“どこで苦労したか”といったプロセスを共有し、再利用や参照がしやすい仕組みを作りたかったのが動機です。

また、単なる「成果物の羅列」ではなく、日々の技術実験や失敗、カスタマイズ例、セキュリティ強化策など、現場で実際に役立つノウハウをラボ形式で残すことを意識しています。

サイト全体像・設計方針

  • コンテンツの階層化
    R100の各種プロジェクト記録や、Lab（実験記録）、News（お知らせ）などを整理しやすく。各セクションの役割が明確で、探しやすいUIを目指しています。

  • シンプル＆高速なWeb構成
    Hugoの静的サイト＋PaperModテーマで高速表示と運用コスト削減。複雑なCMSやデータベースはあえて使わず、Markdownで柔軟に管理。

  • LLMとの親和性を意識した構造
    コンテンツをMarkdown形式で構成することで、LLMとの親和性が高まります。Markdownはシンプルな構文で見出しやリスト、コードブロックなどの構造を明確に表現でき、LLMが文書の構造や重要度を理解しやすくなります。これにより、LLMを活用したコンテンツの要約、修正、生成が容易になります。

  • 検証しやすい仕組み
    カスタマイズや認証・認可の技術検証が即反映でき、トライ＆エラーを気軽に記録・公開可能。

  • コスト効率を重視した技術選定
    R100サイトの構築にあたり、可能な限り無料プランを活用してコストを抑えることを重視しました。以下の技術スタックは、無料枠内での利用が可能です：

    • Netlify: 無料プランで月間100GBの帯域幅、300ビルド分、125,000回のサーバーレス関数呼び出しが含まれています。

    • Auth0: 無料プランで最大25,000人のアクティブユーザーまで対応可能です。

    • Cursor: 無料で利用可能なAI対応エディタで、コードやMarkdownの編集を効率化します。

    これらの無料プランを組み合わせることで、初期費用を抑えつつ、スケーラブルで拡張性のあるサイト構築が実現しました。

技術選定まとめ

本サイトの主な技術選定理由は以下です。

  • Hugo
    静的サイトジェネレーターとして高速・堅牢・メンテしやすい。プロジェクト管理とMarkdown編集の相性が抜群。

  • PaperModテーマ
    洗練された技術系ブログ向けテーマ。階層化やカスタマイズの自由度が高く、ナビゲーション・パンくずリスト等の追加も容易。

  • Netlify
    GitHubリポジトリと自動連携し、PushだけでCI/CD・公開が完結。独自ドメインや認証機能の拡張もスムーズ。

  • Cursor
    コードやMarkdown、設定ファイルを一元管理できるAI対応エディタ。AIアシストで編集効率が大幅にアップし、記事作成やカスタマイズも高速化。
    Git連携やプロジェクト切り替えもスムーズで、開発とコンテンツ更新のハイブリッド運用が実現できました。

  • Auth0 + Netlify Functions
    一部コンテンツへのアクセス制御やユーザー認証が必要な場合に備え、柔軟な認可・認証機構を設計。
    認証情報をもとにNetlify FunctionsでAPI保護や静的ファイルの制御も可能に。

今後の拡張イメージ

  • コメント・フィードバック機能の追加
  • 多言語対応
  • 検証記事やナレッジベースのさらなる充実
  • API連携や外部サービス統合による活用範囲拡大

次回は、実際の構築手順（Hugo＋PaperMod＋Netlify）について解説します。