Tokenbel Financial Data

Contact Refresh - Pure HTML + Tailwind 4.1 Project

🔗 ランディングページ — tokenbel.info | トークンアグリゲーター — dashboard.tokenbel.info

プロジェクト概要

このプロジェクトは、React + Vite + TypeScript の構成から、純粋な HTML + Tailwind CSS 4.1 の静的サイトへ正常に移行されました。

プロジェクト構成

/
├── public/                  # Static assets and additional HTML pages
│   ├── contacts.html        # Contact page
│   ├── favicon.ico          # Favicon
│   └── ...                  # Other static assets
├── index.html              # Main HTML file
├── vite.config.ts          # Vite configuration
├── tailwind.config.ts      # Tailwind CSS configuration
├── postcss.config.js       # PostCSS configuration
└── package.json            # Project dependencies

使用技術

• Vite - 高速なビルドツールおよび開発サーバー
• Tailwind CSS 4.1 - ユーティリティファーストの CSS フレームワーク（CDN 経由）
• Alpine.js - インタラクティブ機能を備えた軽量 JavaScript フレームワーク
• HTML5 - 純粋な HTML 構造

はじめに

前提条件

• Node.js（v18 以降）または Bun
• npm、yarn、pnpm、または bun

インストール

# Clone the repository
git clone <repository-url>
cd contact-refresh

# Install dependencies
bun install
# or
npm install
# or
yarn install
# or
pnpm install

開発

# Start development server
bun run dev
# or
npm run dev

# Server will start at http://localhost:8080

本番環境向けビルド

# Build for production
bun run build
# or
npm run build

# Preview production build
bun run preview
# or
npm run preview

プロジェクトの機能

✅ 純粋な HTML + Tailwind CSS - React への依存なし

✅ 高速なビルド時間 - Vite による最適化

✅ レスポンシブデザイン - モバイルファーストのアプローチ

✅ メンテナンスが容易 - シンプルなファイル構成

✅ 本番環境対応 - 最適化されたアセット

利用可能なページ

• ホームページ（index.html）- メインのランディングページ
• お問い合わせページ（public/contacts.html）- お問い合わせフォームと情報

カスタマイズ

ページの追加

1. public/ ディレクトリに新しい HTML ファイルを作成します
2. vite.config.ts の rollupOptions.input にページを追加します
3. スタイル設定には Tailwind CSS クラスを使用します

スタイル設定

このプロジェクトでは、CDN 経由で Tailwind CSS 4.1 を使用しています。次のことができます。

• HTML 内でユーティリティクラスを直接使用する
• <style> タグ内にカスタム CSS を追加する
• tailwind.config.ts で Tailwind の設定を拡張する

デプロイ

このプロジェクトは、次のような任意の静的ホスティングサービスにデプロイできます。

• Vercel
• Netlify
• GitHub Pages
• Cloudflare Pages
• AWS S3
• その他の静的ファイルホスティング

デプロイ例

# Build for production
bun run build

# Deploy the dist/ folder to your hosting provider

移行の概要

このプロジェクトは、次の構成から正常に移行されました。

• React 18 → 純粋な HTML
• TypeScript → JavaScript
• 複雑なビルドシステム → シンプルな Vite の構成
• 多数の依存関係 → 最小限の依存関係

サポート

問題や質問がある場合は、GitHub リポジトリで issue を作成してください。