筑波大学宇宙技術プロジェクト STEP

筑波大学宇宙技術プロジェクト STEP の公式 Web サイトです。

ロケットと模擬人工衛星 CanSat の活動、製作した機体、ニュースを掲載しています。

技術構成

• Astro：静的サイトの生成
• Tailwind CSS：スタイルの構築
• Bun：依存関係の管理とスクリプトの実行
• microCMS：ニュースの管理
• Cloudflare Workers：プレビュー環境

必要な環境

• Bun
• microCMS の API エンドポイント
• microCMS の API キー

ニュースを含むページを開発・ビルドするには、microCMS の認証情報が必要です。

セットアップ

依存関係をインストールします。

bun install

プロジェクトルートの .env に microCMS の認証情報を設定します。

MICROCMS_ENDPOINT=https://example.microcms.io/api/v1
MICROCMS_API_KEY=your-api-key

.env は Git の管理対象外です。

開発

開発サーバーを起動します。

bun run dev

起動後に http://localhost:4321 を開きます。

コマンド

コマンド	用途
bun run dev	開発サーバーを起動する
bun run build	通常の本番ビルドを dist/ に生成する
bun run build:prod	/~step/ 配下で公開する本番ビルドを生成する
bun run preview	生成済みの本番ビルドをローカルで確認する
bun run lint	ESLint を実行する
bun run format	Prettier でコードを整形する

本番ビルドを確認する場合は、次の順に実行します。

bun run build
bun run preview

ディレクトリ構成

.
├── public/                 # そのまま配信する静的ファイル
├── src/
│   ├── assets/             # ページで使う画像
│   ├── components/         # 共通コンポーネント
│   ├── content/about/      # About ページのデータ
│   ├── content/sponsors/   # スポンサーのデータとロゴ
│   ├── layouts/            # 共通レイアウト
│   ├── lib/microcms.ts     # microCMS との通信
│   └── pages/              # ページと URL の定義
├── astro.config.mjs        # Astro の設定
├── package.json            # スクリプトと依存関係
└── wrangler.jsonc          # Cloudflare Workers の設定

コンテンツの更新

About ページの代表挨拶とメンバー情報は src/content/about/data.yaml で管理します。

スポンサーは src/content/sponsors/data.yaml で管理します。ロゴ画像を src/content/sponsors/logos/ に置き、data.yaml の sponsors: に追記すると、Sponsors ページ（/sponsors）に一覧が追加されます。一覧の下に出す文章は同じファイルの message で設定します。

sponsors:
  - name: 会社・団体名
    logo: ./logos/example.png # 必須。logos/ に置いた画像への相対パス
    logo_background: light # 任意。light（既定・白地）/ dark（黒地）/ none（下地なし）
    url: https://example.com/ # 任意。指定するとカード全体がリンクになる
    description: 支援内容や企業紹介。 # 任意
    published_at: 2026-09-27T21:37:00+09:00 # 任意。この日時以降に表示される

published_at を指定すると、その日時を過ぎるまでカードが表示されません。末尾の +09:00 が日本時間の指定なので、これを付けたまま日本時間で書きます。判定は閲覧者のブラウザの時刻で行うため、指定日時までに Deploy を済ませておけば、当日に作業しなくても時刻を過ぎた時点で表示に切り替わります。ただし非表示のあいだも社名やロゴは HTML に含まれるため、完全な秘匿はできません。

sponsors が空のあいだは一覧が、message が空のあいだは文章が、それぞれ表示されません。1 件も載せない状態に戻すときは sponsors: [] と書きます。[] を残したまま下に追記すると YAML が壊れてビルドが落ちるため、1 件目を書くときは [] を消してください。

ロケットと CanSat の紹介文は、それぞれ src/pages/rocket.astro と src/pages/cansat.astro に定義しています。

名刺の QR コードなどから開くリンク集は src/pages/links.astro（/links）です。ヘッダーのメニューには載せていません。

ニュースは microCMS の news API からビルド時に取得します。

取得したニュース画像は public/cms-images/ にキャッシュされますが、このディレクトリは Git の管理対象外です。

デプロイ

GitHub Actions でプレビュー環境と本番環境へデプロイします。

• ブランチへ push すると、Cloudflare Workers のプレビュー環境を生成する
• Deploy ワークフローを手動実行すると、本番用のビルドを生成して STB サーバーへ転送する
• microCMS から repository_dispatch を送ると、ニュース更新後の本番デプロイを実行できる

GitHub Actions には次の認証情報を設定します。

名前	種別	用途
MICROCMS_ENDPOINT	Secret	microCMS の API エンドポイント
MICROCMS_API_KEY	Secret	microCMS の API キー
CLOUDFLARE_API_TOKEN	Secret	プレビュー環境のデプロイ
CLOUDFLARE_ACCOUNT_ID	Variable	Cloudflare アカウントの識別子
STB_SSH_PRIVATE_KEY	Secret	本番サーバーへの SFTP 接続

認証情報をソースコードや .env 以外の公開ファイルに保存しないでください。