GitHub Pages へのデプロイ（ゼロから公開までにゃん〜）

0. 何を準備する必要があるか（リスト）

GitHubアカウント（自分で登録してくださいね）
ローカルに Git がインストール済み
ローカルに Node.js がインストール済み（依存関係のインストールとNuxtのビルドに使用）

1. GitHub で新しいリポジトリを作成する

GitHubにログイン
右上の New repository
リポジトリ情報の入力：

リポジトリ名：名前は自由に設定してね、何でもいいよ（多分

Publicを選んで、公開するにゃん

作成が完了すると、リポジトリのアドレスが得られます（後でGitをバインドする際に使用します）。

2. ローカル Git を GitHub に「バインド」する（SSH 方式をお勧めしますにゃん～）

2.1 SSHキーの生成（ローカル）

ターミナルを開いて実行：

ssh-keygen -t ed25519 -C "your_email@example.com"

エンターキーを押し続けるだけでOKですよ。問題に遭遇したら、GitHubの公式説明も同じ手順で、より詳細に書かれています👉クリックしてね

2.2 GitHubに公開鍵を追加する

ローカルマシンの公開鍵ファイルを開きます（通常は ~/.ssh/id_ed25519.pub）
内容をコピーします（ssh-ed25519 で始まる長いテキストです）
GitHubアカウント設定で SSHキーを追加（公開鍵を貼り付け）

これはGitHub公式の「SSHキーの追加」手順です。GitHubの説明は私が書くよりずっと良いので👉ぜひクリックしてくださいにゃ

2.3 SSH接続のテスト

ssh -T git@github.com

最初に指紋の確認を求められますので、yesと入力してください。ようこそメッセージが表示されたら成功ですよ～

3. テーマコードをあなたのリポジトリにプッシュする

以下は、すでにテーマディレクトリ（例：Kecare-theme/）があると仮定し、それを先ほど作成したリポジトリにプッシュする方法です。

3.1 テーマディレクトリで Git を初期化する（まだリポジトリでない場合）

cd <你的主题目录>
git init
git add -A
git commit -m "init: theme"

3.2 リモートリポジトリの追加とプッシュ

以下の <user> と <repo> をあなたの GitHub ユーザー名とリポジトリ名に置き換えてください：

git branch -M main
git remote add origin git@github.com:<user>/<repo>.git
git push -u origin main

ここまでで、あなたのテーマコードはすでにGitHubリポジトリの main ブランチに表示されているはずですにゃ～

4. Nuxt（サンプルテーマ）

[!WARNING] ご注意ください：異なるテーマのスキャフォールディングと技術スタック（言語/フレームワーク/ビルド方法）は全く異なる場合があるため、デプロイ方法も異なる可能性があります。このドキュメントはサンプルテーマを例として説明しています——サンプルテーマは Nuxt を使用して構築されているため、文中の Nuxt ビルドとデプロイ手順は「本テーマ専用」です。実際のデプロイ前には、テーマ作者が提供するデプロイ説明と要件を優先的にご確認ください。

GitHub Pages は静的サイトのみをサポートしており、Nuxt はアプリケーションを静的 HTML ファイルに事前レンダリングします。

4.1 ベースURL

カスタムドメインを使用していない場合、ビルドステップで NUXT_APP_BASE_URL をリポジトリ名に設定する必要があります。例： https://<user>.github.io/<repository>/

NUXT_APP_BASE_URL=/<リポジトリ>/

Nuxt公式が明確にこの方法を要求していますにゃ、詳細は👉こちらをクリックにゃ

ただ、Nuxt.config.tsでbaseUrlを設定すればいいと思います。

export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  app: {
    baseURL: 'https://<user>.github.io/<repository>/',
    head: {
    },
  },
});

5. テーマディレクトリに静的アセットを構築する

テーマディレクトリで実行していることを確認してください

npm install

次に構築：

npx nuxt build --preset github_pages

ビルドが完了すると、NuxtのGitHub Pagesプリセットは静的ファイルを次の場所に生成します：

.output/public

これはNuxt公式が提供する出力パスです（後ほどこのディレクトリを公開します）。

6. ビルド成果物を `gh-pages` ブランチに公開する

テーマディレクトリで実行：

npx gh-pages -d .output/public

それは .output/public を gh-pages ブランチにプッシュします（存在しない場合は自動的に作成されます）、初心者にとても適していますね～

7. GitHub リポジトリで Pages を有効にする

リポジトリに移動 → Settings

Pages を探す
リリース元（Source / Build and deployment）で選択：

ブランチ：gh-pages
フォルダ：/ (root)

保存

これもGithub公式の手順です👉やっぱり私をクリックしてねにゃ

保存後、しばらく待つと、GitHub があなたの Pages アドレスを表示します。例えば：

https://<user>.github.io/<repo>/

その後アクセスすればいいにゃん

よくある質問

Q：自動デプロイ（毎回手動でビルド＋公開しなくてもいいように）は可能ですか？

A: はい、できます。Nuxt公式はGitHub Actionsのサンプルワークフローを提供しており、.output/publicを自動的にアップロードしてPagesにデプロイできます。👉こちらですにゃ