👻

「お知らせ」だけ更新するサイトは変態構成だと無料で楽に動く。

に公開
Web
Discord
GitHub Pages
render
動的
tech

Discord ✕ GitHub PagesはCMSとして強い

お知らせだけ とか、一部だけをたまに更新したいっていう Web サイトのニーズって、意外と多いんですよね。
小規模の公式サイトとか個人サイトでも、普段はほぼ放置でいいけど、イベント告知やメンテ告知は“たまに”必要になる。これはどうにも避けられません。

もちろん、GitHub Pages みたいな静的ホスティングでも、HTML を毎回ちょっとずついじって更新するやり方はあります。
でもあれ、地味にミスりません？( 私は8割方ミスるんですけども)
例えば、『変な改行でレイアウトが崩れる』であったりとか。

あと、単純に作業工数が増えますよね。

そして、これを非技術者（依頼者・顧客とかとか）に任せるのはまず無理なんですよ。
技術者にとってミスが増えたりしても HTML は難しくはないじゃないですか。でも、非技術者からすれば「なんでこんな難しいものを……」って世界です。そういうもんです。

フロントは一度作って放置。更新は非技術者でも簡単に。

そこで私は思いました。

フロントエンドは一度作って放置でも動くものを。
更新は非技術者でも簡単にできて、即時性があって、ミスりにくいものにしたい。

この条件を全部満たしつつ、しかも無料でできる方法がないかと常日頃から頭の片隅で考えていました。

また、後述しますが私は「クライアント計算資源使用主義者」なのでなるべくクライアントで動作すればいいなとも思っていました。

そして思いついたのが、

GitHub Pages × Discord × Render の「変態構成」

GitHub Pages（静的）でサイト本体を公開
Discord に動的データを置く
Render が中継APIとなる
→ クライアント側でfetchしてページに反映

という構成です。

「変態構成」と言ってますが、実際はめちゃくちゃ合理的です。

なんで Discord を CMS にするのか？

MySQL系やPostgreSQL系で無料で使えるデータベースサービスはたくさんあります。でも私はDiscordをバックエンドに配置する手法をお勧めします。

Discord の良さは、とにかく

  • 誰でも使っている
  • 複雑な設定は不要
  • スマホで完結する
  • 「メッセージを投稿する」以外、特別な操作がいらない

という点なんです。

つまり：

  • HTMLを触れない人でも基本壊さない
  • PC がなくても編集できる
  • 投稿した瞬間サイトが更新される
  • しかも全部無料で完結する

こんな都合のいいものはなかなかありません。DiscordはCloudflare並に太っ腹です。

（Render の無料枠や Discord の API 仕様が急に変わらない限りは全然安定して使えます。）

やっていることはシンプル

  • Discord → データの保存（お知らせ文 / リストなど）
  • Render → Discord API を叩いて JSON を返す
  • GitHub Pages → ただの静的サイト。JS で Render の API を fetch して表示するだけ。

計算資源はクライアント側に寄せる

Render 側はほぼプロキシなので負荷が低い。
表示の整形などは全部クライアントでやるため、サーバーの負担がとても軽い。

「最近のクライアント性能なら、こっちに処理持たせたほうが賢い」と思っているので、この形は理想形になります。

実際のコード

Discord 側データ例

2025-11-19
サーバーメンテナンスのお知らせ
11月21日 2:00〜4:00
サービス停止します

2025-11-18
イベント告知
次回のミートアップは11月25日です
参加登録はこちらのフォームから

Render 側簡易コード例

import express from "express";
import { Client, GatewayIntentBits } from "discord.js";

const client = new Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMessages] });
const app = express();

let cachedData = [];

client.on("messageCreate", (message) => {
  if (message.channel.id === "DISCORD_CHANNEL_ID") {
    cachedData.push(message.content);
  }
});

app.get("/get", (req, res) => {
  const { ch } = req.query;
  res.json(cachedData);
});

client.login("YOUR_BOT_TOKEN");

app.listen(3000, () => console.log("Render Bot running"));

GitHub Pages 側コード例

async function loadContent() {
  const res = await fetch("https://your-render.onrender.com/get?ch=announce");
  const data = await res.json();

  const container = document.getElementById("news");
  container.innerHTML = "";

  data.forEach(item => {
    const [date, ...bodyLines] = item.split("\n");
    const body = bodyLines.join("<br>");
    container.innerHTML += `
      <section class="news-item">
        <h3>${date}</h3>
        <p>${body}</p>
      </section>
    `;
  });
}

window.addEventListener("DOMContentLoaded", loadContent);

Render の 15 分スリープ問題は自己アクセスで解決する

Render の無料プランは

  • リクエストが 15 分来ないとプロセスが落ちる
  • でも 外から HTTP 叩けば再起動される
  • そして 自分自身に一定間隔でアクセスすれば生き続ける

という仕様。

これを利用して、Node.js 側で自分自身を定期的に叩くことで落とさずに運用できます。

どういう人に向いているのか？

  • 小規模の Discord サーバー公式サイト
  • マイクラサーバーの告知ページ
  • 個人サイトの「お知らせ」欄
  • HTML を触りたくない依頼者に更新を任せたい技術者
  • 運用コストを極限まで下げたい人
  • 静的サイトだけど一部だけ動的にしたい人

最後に：構築はちょっと面倒。でも一度作れば無限に動く

最初の構築こそ3つのサービスを横断するので多少手間はありますが、
一度完成すれば、ほぼ永久に自動運用できます。

  1. Discord にメッセージを投稿するだけでサイトが更新される。
  2. Render は中継するだけで負荷はほとんどない。
  3. GitHub Pages は静的なので最強に安定してる。

私はこの運用方式を使って、とある雑談サーバーの公式サイトを制作しています。(後ほどリンクを貼ります)
実際、めちゃくちゃ便利です。
ぜひやってみてください。

読んでいただきありがとうございました。

Qiitaにも投稿したのでどうぞ。
https://qiita.com/Povo43/items/c736affe298d083611e7

Discussion