React Advent Calendar 2025

React + Github Pages で爆速Webサイト公開

Last updated at 2025-12-09Posted at 2025-12-09

Reactで作ったサイトを爆速で世界に公開するため、Github Pagesで公開するテンプレートを作成しました。地味に面倒なサイト公開の手順を明確化することで、Reactでの開発に集中することを目的とします。

爆速でサイト公開したい方は、目次より「リポジトリ作成」以降をご覧ください。

なぜGithub Pagesなのか

サーバー構築や契約、ドメイン取得の手続きが一切不要で、Githubアカウントさえあればすぐにサイト公開ができます。しかも無料です。「ふと思いついた技術検証」「ちょっと試したいデザインパターン」など、小さなアイデアをすぐ実現することができます。

GitHub Pagesが提供するのは静的ファイルホスティングのみ。サーバーOSのアップデート、セキュリティパッチ、データベースのバックアップといった面倒な運用・保守作業が一切発生しません。開発者は、Reactのコード（ユーザーインターフェースやビジネスロジック）という本質的な部分だけに集中できます。思考と実装の間にほとんど時間差を生まないため、開発者はその熱量のまま、アイデアの核となるUI/UXの構築に没頭できます。

サイトをすぐ公開することで、最速でフィードバックを得ることができます。URLを共有するだけで、常に最新の「動くデモ」を提供できます。言葉で説明するのと、デモがあるのでは説得力がケタ違いです。MVP (Minimum Viable Product) をすぐに公開し、実ユーザーやチームから即座にフィードバックを得られます。もし失敗しても、失うのは数時間の開発コストのみです。

なおGitHub Pagesは静的ファイルのホスティングに特化しており、サーバーサイドの処理は実行できません。しかし、本格的な運用をしたくなった場合は、多くのホスティングサービスがGithub連携に対応しています。簡単に移行し、サービス運営に繋げられます。

また、無料でGithub Pagesを利用しようとするとPublicリポジトリのみです。つまりソースコード公開が必要になるのでご注意ください。Qiitaに公開する前提なら問題ありません。

という訳で、手順を紹介します。

構成

Bun
Vite
React
typescript

bunは爆速の開発ツールキットです。

Bun is a fast, incrementally adoptable all-in-one JavaScript, TypeScript & JSX toolkit.

Viteはヴィートと読みます。爆速です。

Vite は、次世代の Web アプリケーションを支える
超高速フロントエンドビルドツールです。

爆速なツールを組み合わせて爆速に開発します。

リポジトリ作成

Githubで適当なリポジトリを作成します。

お好みで設定してください。READMEと.gitignoreはこのあと生成されるので不要です。

リポジトリのGithub Pagesを有効化します。リポジトリの右上Settingsを選択します。

Pagesを選択。

Build and deploymentでSourceをGitHub Actionsを選択します。

ワークフローを追加します。create your ownをクリックします。

下記内容をコピペします。
mainブランチに変更があったとき、Github Pagesにデプロイされる設定です。

deploy.yml

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
    # Runs on pushes targeting the default branch
    push:
        branches: ["main"]

    # Allows you to run this workflow manually from the Actions tab
    workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
    contents: read
    pages: write
    id-token: write

# Allow one concurrent deployment
concurrency:
    group: "pages"
    cancel-in-progress: true

jobs:
    # Single deploy job since we're just deploying
    deploy:
        environment:
            name: github-pages
            url: ${{ steps.deployment.outputs.page_url }}
        runs-on: ubuntu-latest
        steps:
            - name: Checkout
              uses: actions/checkout@v5
            - name: Set up Bun
              uses: oven-sh/setup-bun@v2
            - name: Install dependencies
              run: bun install
            - name: Build
              run: bun run build
            - name: Setup Pages
              uses: actions/configure-pages@v5
            - name: Upload artifact
              uses: actions/upload-pages-artifact@v4
              with:
                  # Upload dist folder
                  path: "./dist"
            - name: Deploy to GitHub Pages
              id: deployment
              uses: actions/deploy-pages@v4

ワークフローのファイル名にdeploy.ymlと入力し、Commit changes...ボタンを押します。

変更をmainブランチにコミットします。

正しく設定できていると、Github Actionが実行されます。しかし、まだ何もないので失敗します。
リポジトリの準備ができたので、開発環境にクローンします。

reactのプロジェクト作成

reactのプロジェクトを生成します。

現在のディレクトリにreactのプロジェクト作成します。

bun create vite . --template react-ts

Current directory is not empty. Please choose how to proceed:
│  Ignore files and continue(ファイルがあるが無視して進める)
│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with bun and start now?
│  Yes
│
◇  Scaffolding project in xxx\vite-project...
│
◇  Installing dependencies with bun...
bun install v1.2.18 (0d4089ea)

+ @eslint/js@9.39.1
+ @types/react@19.2.7
+ @types/react-dom@19.2.3
+ @vitejs/plugin-react@5.1.2
+ eslint@9.39.1
+ eslint-plugin-react-hooks@7.0.1
+ eslint-plugin-react-refresh@0.4.24
+ globals@16.5.0
+ vite@7.2.7
+ react@19.2.1
+ react-dom@19.2.1

157 packages installed [2.13s]
│
◇  Starting dev server...
$ vite

  VITE v7.2.7  ready in 295 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Enter 4回でlocalhostにサイトが立ちます。爆速ですね。

GitHub Pages用の設定を追加

リポジトリのGitHub Pagesにサイトを公開するとき、URLがhttps://[ユーザー名].github.io/[リポジトリ名]/といったサブディレクトリ形式になるため、ベースパスの設定を追加します。

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
+ base: "/vite-project/",
})

これでコミットしてmainブランチにプッシュすれば、サイトが公開できます。

デザイン調整

このままプッシュしてもよいですが、あまりにもテンプレートすぎるので少し変更します。具体的にはtailwindcssとdaisyuiを入れ、ヒーローとフッターを作成します。

速く、シンプルで、使いやすい
Tailwind CSS開発

bunを使ってインストールします。

bun add -D tailwindcss @tailwindcss/vite daisyui@latest

vite.config.tsにtailwindcssを利用する設定を追加します。

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
+    plugins: [react(), tailwindcss()],
    base: "/vite-project/",
});

cssで読み込みます。また、bodyに、画面中央にコンテンツを並べる設定を記載します。

index.css

@import "tailwindcss";
@plugin "daisyui";

body {
    place-items: center;
    justify-content: center;

    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

index.htmlの内容を調整します。

日本語化
ogp対応
タイトル追加
コピーライト追加

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>vite-project</title>
        <meta name="description" content="サイトの説明" />

        <!-- Open Graph -->
        <meta property="og:title" content="タイトル" />
        <meta property="og:description" content="サイトの説明" />
        <meta property="og:type" content="website" />
        <meta
            property="og:url"
            content="https://sumisoc0db8c.github.io/vite-project/"
        />
        <!-- <meta property="og:image" content="画像のurl" /> -->
        <meta property="og:site_name" content="タイトル" />
        <meta property="og:locale" content="ja_JP" />

        <!-- Twitterカード -->
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="タイトル" />
        <meta name="twitter:description" content="サイトの説明" />
        <!-- <meta name="twitter:image" content="画像のurl" /> -->
    </head>
    <body>
        <div class="hero mt-10">
            <div class="hero-content text-center">
                <div class="max-w-md">
                    <h1 class="text-5xl font-bold">プロジェクトテンプレート</h1>
                    <p class="py-6">ここにすごいコンテンツを作る。</p>
                </div>
            </div>
        </div>
        <div id="root"></div>
        <footer
            class="footer sm:footer-horizontal footer-center bg-base-300 text-base-content p-4 mt-auto"
        >
            <aside>
                <p>Copyright © 2025 - All right reserved by sumiso_c0db8c</p>
            </aside>
        </footer>
        <script type="module" src="/src/main.tsx"></script>
    </body>
</html>

ogp用の画像まで用意すると爆速でなくなるのでコメントアウトしています。サイトを完成させるときに追加してください。

App.tsxはシンプルな状態にしておきます。将来的に機能を追加していく想定です。

App.tsx

import { useState } from "react";
import "./App.css";

function App() {
    const [count, setCount] = useState(0);

    return (
        <>
            <div className="card">
                <button
                    className="btn"
                    onClick={() => setCount((count) => count + 1)}
                >
                    count is {count}
                </button>
            </div>
        </>
    );
}

export default App;

全ページ共通のスタイルはindex.cssに集約するため、App.cssは空にします。App.tsxの開発に合わせて内容を追加してください。

App.css

動作確認してデザイン終了です。

コミットしてプッシュ

mainブランチに変更が反映されると、Github Actionが走り、Github Pagesが公開されます。

サイトが確認できれば完了です。これであとはReactでのアプリケーション開発に集中できます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up