oikko のんびりAIプログラミングノート

🎩 今日の概要

こんにちは、ボスです！ステップ２までで、ブログの見た目もだいぶ整ってきたね。でも、記事を公開するたびに手元でコマンドを打って、生成されたファイルをGitHubにアップロードする…という作業、正直ちょっと面倒じゃないかい？

今回は、その面倒な作業を完全に自動化するよ。Gitで記事をプッシュするだけで、Webサイトが自動で更新される魔法の仕組み「GitHub Actions」について、さっちゃん先生に教えてもらおう！

🤖 さっちゃんとボスの会話ログ

ボス：🎩 さっちゃん、毎回手作業でデプロイするの、ちょっとドキドキするし、正直面倒なんだ。コマンドを間違えたり、ファイルをアップし忘れたりしそうで…。なんとかならないかな？

さっちゃん：✨ お任せください、ボス！そんな時にぴったりの『GitHub Actions』という機能がありますよ。これを使えば、記事をGitにプッシュするだけで、あとは全部自動でやってくれます！

ボス：🎩 なにそれすごい！魔法みたいだね。詳しく教えて！

さっちゃん：🤖 はい！まず、プロジェクトに「ワークフロー」という名の「指示書」を置いておくんです。mainブランチに新しい記事がプッシュされたら、その指示書に従ってGitHubが勝手に作業してくれます。こんな感じのファイルを作って、その中に指示を書いていきます。

# 📁 .github/workflows/build.yml

# ... (ワークフローの詳しい内容は後述)

ボス：🎩 なるほど！その指示書に「Pythonを準備して」「ビルドコマンドを実行して」「公開して」と書いておけばいいんだね！

さっちゃん：🤖 その通りです！では、具体的な手順を見ていきましょう！

▶️ 手順1：ワークフローファイルを作成しよう

さっちゃん：🤖 まずは、自動化の指示書となる「ワークフローファイル」を作成します。プロジェクトのルートに .github/workflows/ というディレクトリを作成し、その中に build.yml という名前でファイルを作って、以下の内容を貼り付けてください。

# .github/workflows/build.yml

name: Deploy to GitHub Pages

# mainブランチにpushされたときに、このワークフローを実行する
on:
  push:
    branches:
      - main

# 実行するジョブを定義
jobs:
  build-and-deploy:
    # 実行環境として最新のUbuntuを指定
    runs-on: ubuntu-latest

    # ジョブのステップを定義
    steps:
      # 1. リポジトリのコードをチェックアウトする
      - name: Checkout
        uses: actions/checkout@v4

      # 2. Pythonの環境をセットアップする
      - name: Set up Python
        uses: actions/setup-python@v5
        with:
          python-version: '3.8' # プロジェクトで使っているPythonのバージョン

      # 3. 必要なPythonパッケージをインストールする
      - name: Install dependencies
        run: |
          python -m pip install --upgrade pip
          pip install -r requirements.txt

      # 4. ビルドスクリプトを実行してサイトを生成する
      - name: Build the site
        run: python scripts/build.py

      # 5. 生成されたサイトをGitHub Pagesにデプロイする
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./output  # build.pyが出力するディレクトリ名
          cname: blog.oikko.com # カスタムドメインを指定

💻 手順2：GitHubリポジトリを設定しよう

さっちゃん：🤖 ワークフローファイルができたら、あと一息です！次に、GitHubリポジトリ側で、Actionsが作ったファイルをWebサイトとして公開する設定を行います。

リポジトリの「Settings」タブを開きます。
左側のメニューから「Pages」を選択します。
「Build and deployment」の「Source」で、「Deploy from a branch」を選びます。
「Branch」のドロップダウンメニューからgh-pagesブランチを選択し、「Save」をクリックします。（もしgh-pagesがまだ存在しなくても、一度ワークフローが実行されれば自動的に作成されるので、その後に設定すればOKです）

✅ 手順3：動作を確認しよう

さっちゃん：🤖 これで設定はすべて完了です！mainブランチに、何か新しい記事ファイルを追加してプッシュしてみてください。リポジトリの「Actions」タブを見ると、ワークフローが自動で実行されているのが確認できるはずですよ。処理が成功すれば、数分後にはサイトが更新されています。

ボス：🎩 すごい！これでもう、面倒な手作業とはおさらばだね！ありがとう、さっちゃん！

さっちゃん：🤖 どういたしまして！これからは記事執筆に集中できますね！

✨ まとめ

今回はGitHub Actionsを使って、ブログの公開を自動化する仕組みをさっちゃんに教えてもらったね！

.github/workflows/build.yml を作成して、ビルドとデプロイの指示を書いた。
GitHubのPages設定で、gh-pagesブランチを公開するようにした。
これで、mainブランチにプッシュするだけで、サイトが自動更新されるようになった。

手作業がなくなって、本当に楽になったよ。