GitHub Actions

🚀 はじめに この記事で理解できること CI/CD（シーアイ・シーディー）とは何か 自動デプロイの仕組みが“なんとなくイメージできる” なぜ便利なのか・使わないとどうなるのか Hugo や Cloudflare Pages のような静的サイトでも使える理由 こんな人向け 中学生〜大人まで、IT知識がほとんどない初心者 「CI/CDってよく聞くけど、結局どういうこと？」を知りたい 自分のブログやアプリを自動で更新できる仕組みに興味がある 初心者でも安心な理由 専門用語はできるだけ身近なたとえで説明 このページだけで全体像がつかめる構成 難しいコードは使わず、イメージ中心で理解できる ✅ 概要解説 CI/CDとは何か CI/CD は、ソフトウェア開発の世界でよく使われる言葉で、 CI（Continuous Integration）＝継続的インテグレーション CD（Continuous Delivery / Deployment）＝継続的デリバリー／デプロイ の略です。 一言でいうと、「コードを変更したら、自動でテストして、自動で公開してくれる仕組み」 です。 たとえるなら、“自動で料理をチェックして配膳してくれるキッチン” のようなもの。 料理（コード）をキッチンに置く（Gitにプッシュ） 自動で味見（テスト） 問題なければ自動でお皿に盛り付けて提供（デプロイ） という流れです。 何のためにあるのか CI/CD の目的は 「ミスを減らし、作業を速くし、安心して更新できるようにする」 こと。 人間の手作業を減らす（ミスが減る） 更新が速くなる（数秒〜数分で公開） 同じ手順で毎回動く（安定） チームでも個人でも使える（Gitと相性が良い） 特に静的サイト（Hugo など）では、記事を書いて GitHub に push するだけで自動公開できるため、ブログ運営がとても楽になります。 CI/CDがないとどうなる？ もし CI/CD がないと、更新のたびに… ローカルでビルド サーバーにログイン ファイルをアップロード 設定を調整 動作確認 といった手作業の連続になります。 これらは、 ミスしやすい 時間がかかる 作業が面倒で更新が止まりがち という問題を生みます。 CI/CD はこれらを自動化してくれる“優秀なアシスタント” のような存在です。 ...

🚀 はじめに：この記事でできること GitHub Actions ホストランナー（GitHub管理ランナー） 上でジョブを実行しながら、自前のWireGuard VPNサーバー（国内）を出口としてインターネットへ接続する方法を解説します。 root権限・一時実行環境・Secrets制約といったActions特有の前提を踏まえ、操作 → 目的 → 結果 → 注意/補足 の流れで安全に構築します。 想定ユースケース 国内IPからのみアクセス可能なAPI/サイトの検証 クローリング・E2Eテストでの地域制約回避（合法・規約順守前提） CIからの外部通信を自前ネットワークに集約 🧭 前提：構成上の制約と選択肢 ホストランナーは短命・共有・一時的という前提があります。ここを理解することが成功の鍵です。 操作 ランナーの権限制約と接続方式を確認する 目的 「できること／できないこと」を把握し、ハマりどころを回避する 前提 GitHub Actions ホストランナー（ubuntu-latest 等） 既に 国内に設置したWireGuard VPNサーバー が稼働している sudo が使える（GitHubホストランナーでは可） 外向き UDP 51820 がランナーから到達可能（通常は可） 結果（この時点でできること） ホストランナーでも ユーザースペースでVPNを張れる ことを理解できる 注意（重要） ホストランナーは systemd常駐や自動起動は不可。 VPNは ジョブ内で起動→終了 する設計が必須。 複数ジョブ/マトリクスでは同時起動不可（競合防止）。 🧩 準備：Secrets と VPN クライアント設計 この章では、ホストランナーに状態を残さない ための安全な設計を行います。 1-1. GitHub Actions Secrets の準備 操作 VPN接続に必要な情報を Secrets に登録する 目的 設定値・鍵をリポジトリに残さず、安全に参照する 前提 ...

🚀 はじめに：この記事で学べること 本記事では、Hugo + GitHub Pages でブログを運用している初心者の方向けに、 GitHub Actions を使って自動デプロイする仕組みを、できるだけ分かりやすく解説します。 GitHub Actions が何をしているのか Hugo のビルドがどのように自動化されるのか gh-pages ブランチへ自動デプロイされる仕組み 実際に使えるワークフローのテンプレート 補足 「自動デプロイ」は、記事を更新するたびに手動で hugo → git push → gh-pages へ反映…という作業をなくすための仕組みです。 🧱 Step 1：GitHub Actions の基本を理解する GitHub Actions は、GitHub が提供する 自動実行の仕組み（CI/CD） です。 🔧 何が自動化されるのか？ Hugo のインストール サイトのビルド（hugo コマンド） public/ の生成 gh-pages ブランチへのデプロイ これらを YAMLファイル（ワークフロー） に書いておくことで、GitHub が自動で実行してくれます。 📁 Step 2：ワークフローの配置場所を知る GitHub Actions の設定ファイルは、リポジトリ内の以下に置きます。 .github/workflows/deploy.yml 注意 ディレクトリ名 .github/workflows/ を間違えると、GitHub Actions が認識しません。 ⚙️ Step 3：Hugo 自動デプロイ用ワークフローの例 以下は、Hugo サイトを GitHub Pages に自動デプロイする最小構成の例です。 ...

このガイドのゴール：Hugo + PaperMod を使ったブログを GitHub Pages に公開し、以降は記事を push するだけで自動更新できる状態にする。 ✅ 前提条件（必要な環境） Git と Hugo（Extended版） をインストール済み GitHubアカウントを保有 コマンドラインが使える（macOS/Linux/WSL いずれもOK） Extended版が必要な理由：PaperModなど一部テーマはSCSSのコンパイルにExtended版を使います。 🛠️ Hugoサイトの新規作成 hugo new site blog --format yaml # 新規Hugoサイト（設定ファイルをYAMLで作成） cd blog git init # Gitリポジトリを初期化 🎨 PaperModテーマの導入 最も簡単なのは Git Submodule でテーマを取り込む方法です。 git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod hugo.yaml にテーマを指定します： theme: ["PaperMod"] 注意：GitHub Actions でビルドする際は actions/checkout の submodules: true を必ず設定してください（後述）。 代替案：Hugo Modulesでテーマを管理する方法もあります（hugo mod init → module.importsにPaperModを指定）。慣れるまではSubmoduleが分かりやすいです。 📝 Hugoの基本設定（hugo.yaml） 最低限の設定例を示します。後から拡張できます。 baseURL: "https://username.github.io/blog/" # 後で必ず自分の公開URLに合わせて変更 languageCode: "ja-jp" title: "My Hugo Blog" theme: ["PaperMod"] paginate: 10 outputs: home: ["HTML", "RSS", "JSON"] params: defaultTheme: "auto" # ダーク/ライト切替 ShowShareButtons: true ShowReadingTime: true ShowCodeCopyButtons: true showtoc: true # 記事内目次 images: ["images/og-image.png"] # OGP用 author: "HNEST" menu: main: - identifier: archives name: Archives url: /archives/ weight: 10 - identifier: tags name: Tags url: /tags/ weight: 20 ✍ 初回記事の作成とローカル確認 記事を作成します： ...