Research Hub のサイト構築メモ

ニュース、ビジネスの種、株式・マーケット情報を日次でまとめるためのサイト基盤として、まず Astro の静的サイトをローカルで立ち上げた。

方針

最初からCMSやDBを入れず、Markdown と画像ファイルをGitで管理する。日々の収集結果はファイルとして残し、GitHubにpushしたらCloudflare Pagesで静的サイトとして公開する。

サイト生成は Astro
ホスティングは Cloudflare Pages
記事は Markdown
画像は public/images/daily/ 配下に保存
デプロイはGit連携で自動化
将来的な記事生成や収集処理はGitHub Actionsなどで追加する

セットアップ手順

Node.js と npm が入っていれば、Astro は npm から初期化できる。今回は既存ディレクトリに最小構成で作成した。

npm create astro@latest -- . --template minimal --install --no-git --yes --skip-houston

ローカル確認は次のコマンドで行う。

npm run dev -- --host 127.0.0.1

ビルド確認はこれ。

npm run build

記事ファイルの置き方

記事は日付とslugを揃えて、次の形で置く。

src/content/daily/2026-05-04/html-tags.md
public/images/daily/2026-05-04/html-tags/cover.svg

Markdownのfrontmatterはこうする。

---
title: "その場で試せるHTMLタグメモ"
date: "2026-05-04"
slug: "html-tags"
summary: "details、dialog、meter、datalist など、知っていると便利なHTMLタグを記事内デモ付きで試す。"
heroImage: "/images/daily/2026-05-04/html-tags/cover.svg"
tags:
  - html
  - frontend
  - demo
---

この構成にすると、記事URLは /daily/2026-05-04/html-tags/ になる。1日に複数記事を書いても、日付ディレクトリの下でslugを分ければ管理しやすい。

実装したページ

トップページでは src/content/daily/**/*.md を読み込み、日付とslugの降順で一覧表示する。現在は1ページ10件でページングする。

記事詳細ページでは次を表示する。

ヘッダー画像
日付
読了目安
タイトル
概要
タグ
Markdown本文

タグページも用意しているので、たとえば html タグの記事だけを見る場合は /tags/html/ で一覧できる。

記事内デモ

HTMLタグの記事では、本文内に簡単なライブプレビューを置けるようにした。記事側に inline-demo とJSON形式のサンプルコードを書いておくと、記事詳細ページがiframeのプレビューと「コードを見る」を自動で生成する。

サンプルHTMLを本文側でそのまま解釈しないよう、デモのソースは script type="application/json" に格納している。

Cloudflare Pages へのデプロイ

Cloudflare Pages はGitHubリポジトリと連携すれば、pushのたびに自動でビルドしてくれる。

設定は次の内容でよい。

Framework preset: Astro
Production branch: main
Build command: npm run build
Build output directory: dist

Node.js のバージョンを固定したい場合は、Cloudflare Pages の環境変数に追加する。

NODE_VERSION=22

確認したこと

npm run build
npm run dev -- --host 127.0.0.1

ビルドは通っていて、ローカルでは http://127.0.0.1:4321/ で確認できる。Cloudflare Pages側は main にpushすれば自動デプロイされる構成にできる。

開発時の最終チェック

サイト側を触ったら、最後に次を見る。

npm run build が通る
トップページと記事詳細ページの横幅が揃っている
ページング後の記事一覧、タグ一覧、日別一覧でも横幅が大きくズレていない
PC表示で記事本文が中央に見え、目次が本文を押しのけていない
スマホ表示でタイトル、本文、コードブロック、記事内デモが横にはみ出していない
画像がカードや本文幅の中に収まっている
目次の現在位置表示が動いている

次に足したいもの

日次収集スクリプト
ニュース、ビジネスアイデア、マーケット情報の定型フォーマット
画像生成やチャート保存のルール
記事ネタのストック運用
HTMLタグやWeb APIのシリーズ記事