HTMLプロジェクトのCI/CD – 自動ビルド＆デプロイの実践ガイド

2025年2月13日 最終更新日時 : 2025年2月13日 山崎講師山崎講師

こんにちは。ゆうせいです。
今回は HTML（静的Webサイト）のCI/CDを実践する方法 について解説します！

HTML/CSS/JavaScriptだけで構成された静的なWebサイトでも、CI/CDを活用することで、効率的な開発・デプロイが可能 になります。
例えば、以下のようなメリットがあります。

✅ 手作業でのアップロード不要（GitにPushするだけで自動デプロイ）
✅ コードのエラーやリンク切れを事前にチェック
✅ サイトのビルド＆圧縮を自動化し、高速表示を実現

それでは、実際のHTMLプロジェクトを題材に、CI/CDを設定する方法を紹介 します！

1. HTMLのサンプルプロジェクト

まず、シンプルなHTMLサイト を作成します。

① プロジェクトの構成

html-ci-cd/
│── src/
│   ├── index.html
│   ├── style.css
│   ├── script.js
│── .github/workflows/deploy.yml

② index.html のサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CI/CD HTMLサイト</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>HTMLのCI/CDを試す！</h1>
    <p>GitHub Actionsを使ってデプロイを自動化します。</p>
    <script src="script.js"></script>
</body>
</html>

③ style.css（シンプルなCSS）

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 50px;
}

h1 {
    color: blue;
}

④ script.js（簡単なJavaScript）

document.addEventListener("DOMContentLoaded", function() {
    console.log("CI/CDによるHTMLデプロイを実践中！");
});

2. GitHub Actionsを使ったCI/CDの設定

次に、GitHub Actionsを使って、自動デプロイを実装 します。

① GitHub Pagesを利用したデプロイ

静的Webサイトなら、GitHub Pagesを使うのが簡単です。
.github/workflows/deploy.yml を作成し、以下の内容を記述。

name: Deploy HTML Site

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: リポジトリをチェックアウト
        uses: actions/checkout@v3

      - name: HTMLファイルを`public`フォルダにコピー
        run: |
          mkdir public
          cp -r src/* public/

      - name: GitHub Pagesにデプロイ
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages
          folder: public

3. CI/CDの仕組み

✔ このワークフローの流れ

  1. mainブランチにPushすると、自動的に実行
  2. リポジトリの最新コードを取得
  3. src/ の中身を public/ にコピー
  4. GitHub Pages（gh-pages ブランチ）にデプロイ

これにより、GitHubにPushするだけで、自動的にWebサイトが公開 されます！

4. GitHub Pagesの設定

この設定を有効にするために、GitHubのリポジトリでGitHub Pagesを有効化 します。

  1. GitHubのリポジトリにアクセス
  2. 「Settings」 → 「Pages」に移動
  3. Branchを gh-pages に設定
  4. 「Save」ボタンをクリック

これで、https://your-username.github.io/your-repo/ のURLで自動公開されます！

5. CI/CDの動作確認

実際に、GitHubにPushして動作を確認しましょう。

git add .
git commit -m "Add CI/CD workflow for HTML"
git push origin main

すると、GitHubの**「Actions」タブ** でデプロイの進行状況が確認できます。
エラーがなければ、GitHub Pagesにサイトが自動的に公開されます！

6. CI/CDをさらに強化

① HTMLのバリデーション（エラーをチェック）

HTMLの構文チェックを自動化するには、htmlhint を活用できます。
以下の設定をGitHub Actionsに追加すれば、HTMLのエラーをPush前に検出 できます。

      - name: Install HTMLHint
        run: npm install -g htmlhint

      - name: Run HTMLHint
        run: htmlhint src/

② CSSとJavaScriptの最適化

CI/CDの一環として、CSSやJSを圧縮して最適化 することも可能です。
例えば、uglify-js や clean-css を使ってファイルを圧縮できます。

      - name: Minify CSS and JS
        run: |
          npm install -g uglify-js clean-css-cli
          cleancss -o public/style.min.css src/style.css
          uglifyjs src/script.js -o public/script.min.js

7. まとめ

CI/CDを活用すれば、HTMLサイトのデプロイを完全自動化 できます。
手作業のアップロードをなくし、ミスなく確実に最新のWebサイトを公開 できるようになります。

✔ GitHub ActionsでCI/CDを設定し、HTMLを自動デプロイ
✔ GitHub Pagesを活用して、無料でWebサイトをホスティング
✔ HTMLのバリデーションや最適化を組み込んで、品質向上

「手作業でのアップロードはもう不要！」
これからのWeb開発は、CI/CDで効率化しましょう！

セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
対象読者
新入社員
前の記事
「予防に勝る治療なし」 – ITプロジェクトにおけるリスクマネジメントの本質
2025年2月13日
次の記事
GitHub Pagesを使って簡単にウェブサイトを公開しよう
2025年2月13日