「FTP Deploy」ステップでエラー（Error: Timeout）が出ます。

サーバー情報（ホスト名）やユーザー名・パスワードが正しいか再確認してください。また、忍者ホームページ側で一時的にFTP接続が制限されていないかもチェックしましょう。

サイトが更新されるまでどれくらい時間がかかりますか？

GitHubにPushしてから、ビルドと転送が終わるまで通常1分〜2分程度です。GitHubの「Actions」タブで進捗をリアルタイムに確認できます。

独自ドメインを使いたい場合はどうすればいいですか？

忍者ホームページでも独自ドメインの設定は可能ですが、設定手順が異なります。まずは標準のサブドメインで公開を確認することをお勧めします。

「完全無料」Webサイト構築入門 (3) — GitHub Actionsによる自動デプロイ設定

クイックステップ：本章のゴール

「Webサイトの自動公開」を完了させる。

必要な情報: 忍者ホームページのFTP情報
主な作業: GitHub Secrets登録 → deploy.yml 作成 → git push
結果: 指定URL（mathdoc.ifdef.jpなど）でサイトが公開される

いよいよ本番である。GitHubにコードを保存（Push）した瞬間に、自動的にWebサイトがビルドされ、忍者ホームページへと公開される自動デプロイ （CI/CD）の仕組みを構築しよう。

1. 忍者ホームページでFTP情報を確認する

GitHub Actionsが忍者ホームページのサーバーにファイルを送るために、鍵となる「FTP情報」が必要である。

忍者ホームページの管理画面へ 忍者ホームページにログインし、作成したWebサイトの「管理画面」を開く。
FTP情報をメモする メニューの「FTP設定」などの項目から、以下の3点を控えておく。
- FTPホスト名 （例: ftp1.ninja-x.jp）
- FTPユーザー名（ID）
- FTPパスワード

2. GitHub Secretsに情報を登録する（安全な管理）

先ほどメモしたFTP情報を、GitHub側に「安全な変数」として登録する。

GitHubリポジトリの「Settings」を開く 作成したリポジトリ（my-math-site）のトップページから、右上の Settings タブをクリックする。
Actions Secretsへ移動 左メニューから Secrets and variables > Actions を選択する。
3つのシークレットを登録 「New repository secret」ボタンから、以下の3つを1つずつ登録する（名前は大文字で正確に）。
- FTP_SERVER: (FTPホスト名)
- FTP_USERNAME: (FTPユーザー名)
- FTP_PASSWORD: (FTPパスワード)

3. 自動デプロイ設定ファイル（Workflow）の作成

「何を、いつ、どうやって動かすか」という命令書を作成する。

ローカルでフォルダを作成 プロジェクトのルートに .github/workflows という名前でフォルダを作る。

設定ファイルを作成 その中に deploy.yml というファイルを作成し、以下のコードを貼り付ける。

name: Deploy to Ninja Homepage

on:
  push:
    branches:
      - main # mainブランチにPushされた時に起動

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Install dependencies
        run: npm install

      - name: Build Astro
        run: npm run build

      - name: FTP Deploy
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./dist/ # Astroがビルドしたファイルが入る場所
          server-dir: / # 忍者ホームページのルートディレクトリ

4. Astroの設定（サイトURLの登録）

Astroが正しいリンクを生成できるように、astro.config.mjs を更新する。入門(1)で取得したサイトのURLを記載する。本サイトで言えば、https://mathdoc.ifdef.jp/

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  site: 'https://example.xxx.jp/', // 最後に / をつけること.
  integrations: [
    starlight({
      title: 'My Site',
    }),
  ],
});

5. 運命のPush！世界への公開

すべての準備が整った。変更をGitHubに送信する。

git add .
git commit -m "add deployment workflow"
git push origin main

GitHubの「Actions」タブを確認 リポジトリの Actions タブを開くと、ワークフローが動き出しているはずである。
完了を待つ すべてのステップにチェックマークがついたら成功である！
自分のサイトにアクセス 忍者ホームページのURLを開いてみる。あなたが作ったサイトが世界中に公開されている！

おわりに

サーバー代もドメイン代も一切かからず、Astroの爆速なパフォーマンスとStarlightの美しいデザインを手に入れたあなたは、もう立派なモダンウェブサイトのオーナーである。ここから素晴らしいコンテンツを発信していこう。

FAQ：GitHub Actionsと自動デプロイのよくある質問

Q: 「FTP Deploy」ステップでエラー（Error: Timeout）が出る。

A: サーバー情報（ホスト名）やユーザー名・パスワードが正しいか再確認すること。また、忍者ホームページ側で一時的にFTP接続が制限されていないかもチェックするとよい。

Q: サイトが更新されるまでどれくらい時間がかかるか？

A: GitHubにPushしてから、ビルドと転送が終わるまで 通常1分〜2分程度 である。GitHubの「Actions」タブで進捗をリアルタイムに確認できる。

Q: 独自ドメインを使いたい場合はどうすればよいか？

A: 忍者ホームページでも独自ドメインの設定は可能だが、設定手順が異なる。まずは標準のサブドメインで公開を確認することをお勧めする。

番外編：忍者AdMaxで収益化を設定するせっかく作ったサイトにお小遣い稼ぎの仕組みを。忍者AdMaxの広告を貼る手順をチェックしましょう。

他の記事を探す