GitHubに簡単Webアプリをアップする方法：実例付きガイド

GitHubは、開発者にとって非常に便利なプラットフォームで、コードのバージョン管理、コラボレーション、そしてデプロイメントが簡単に行えます。この記事では、GitHub Pagesを使って簡単なWebアプリをアップする方法を詳しく説明します。さらに、具体的な実例として、簡単なHTML/CSS/JavaScriptのアプリをGitHub Pagesにデプロイする手順を示します。

1. GitHubアカウントの作成

まず、GitHubアカウントが必要です。まだアカウントを持っていない場合は、GitHubのサイトにアクセスして無料でアカウントを作成してください¹。

2. リポジトリーの作成

リポジトリーの作成:
- GitHubのダッシュボードにログインし、「New」ボタンをクリックして新しいリポジトリーを作成します²。
- リポジトリーの名前を入力します。この名前は、GitHub PagesのURLの一部になります。例えば、my-simple-appと名付けると、https://<your-username>.github.io/my-simple-app/というURLでアクセスできるようになります³。
- 「Public」を選択し、「Create repository」をクリックします²。

3. ローカル環境の準備

Gitのインストール:
- ローカル環境でGitがインストールされていることを確認します。Gitがインストールされていない場合は、Gitの公式サイトからダウンロードしてインストールしてください⁴。
リポジトリーのクローン:
- ターミナルを開き、以下のコマンドを実行してリポジトリーをクローンします。
shgit clone https://github.com/<your-username>/my-simple-app.gitここで、<your-username>はあなたのGitHubユーザー名に置き換えてください⁵。

4. Webアプリの作成

簡単なWebアプリを作成します。ここでは、HTML、CSS、JavaScriptを使った基本的なアプリを例に説明します。

プロジェクトディレクトリに移動:shcd my-simple-app
index.htmlの作成:index.htmlファイルを作成し、以下のコードを貼り付けます。html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Simple App</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello, World!</h1> <p>This is a simple web app deployed on GitHub Pages.</p> <button id="myButton">Click Me!</button> <script src="script.js"></script> </body> </html>
styles.cssの作成:styles.cssファイルを作成し、以下のコードを貼り付けます。cssbody { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
script.jsの作成:script.jsファイルを作成し、以下のコードを貼り付けます。javascriptdocument.getElementById('myButton').addEventListener('click', function() { alert('Button was clicked!'); });

5. コミットとプッシュ

変更の確認:shgit status
変更の追加:shgit add .
コミット:shgit commit -m "Initial commit: simple web app"
プッシュ:shgit push origin main

6. GitHub Pagesの設定

リポジトリーの設定:
- GitHubのリポジトリーページに移動し、「Settings」タブをクリックします⁶。
- 「Pages」セクションを探し、「Source」を「Deploy from a branch」に設定します⁷。
- 「Branch」としてmainを選択し、「Folder」として/(root)を選択します⁷。
- 「Save」をクリックします。
デプロイの確認:
- 設定が完了すると、GitHub PagesのURLが表示されます。このURLをクリックして、デプロイされたWebアプリを確認します⁸。

7. 実例：GitHub Pagesにデプロイされたアプリ

上記の手順に従ってデプロイしたWebアプリは、以下のような見た目となります。

タイトル: “Hello, World!”
説明文: “This is a simple web app deployed on GitHub Pages.”
ボタン: “Click Me!”ボタンをクリックすると、アラートが表示されます。

8. 裏技：カスタムドメインの設定

GitHub Pagesには、カスタムドメインを設定する機能もあります。以下の手順でカスタムドメインを設定できます⁹。

カスタムドメインの購入:
- ドメイン名を購入します。例：example.com。
DNS設定:
- ドメインレジストラのDNS設定ページにアクセスし、以下のレコードを追加します。
  - Aレコード: @を185.199.108.153、185.199.109.153、185.199.110.153、185.199.111.153にポイント。
  - CNAMEレコード: wwwを<your-username>.github.ioにポイント。
GitHub Pagesの設定:
- GitHubのリポジトリー設定ページで「Custom domain」フィールドにカスタムドメイン（例：example.com）を入力し、「Save」をクリックします⁹。

9. 裏技：CI/CDの設定

GitHub Actionsを使用して、コードのPush時に自動的にGitHub PagesにデプロイするCI/CDパイプラインを設定できます¹⁰。

GitHub Actionsの設定:
- リポジトリーの.github/workflowsディレクトリにdeploy.ymlファイルを作成します¹⁰。
- deploy.ymlファイルに以下の内容を追加します。
yamlname: Deploy to GitHub Pages on: push: branches: - main jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: '14' - name: Install dependencies run: npm install - name: Build run: npm run build - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./build
デプロイの確認:
- mainブランチにPushすると、GitHub Actionsが自動的に実行され、GitHub Pagesにデプロイされます¹⁰。

結論

GitHub Pagesを使って簡単なWebアプリをデプロイする方法は、非常に直感的で簡単です。上記の手順に従うことで、誰でも短時間でWebアプリをオンラインに公開することができます。さらに、カスタムドメインの設定やCI/CDパイプラインの構築により、プロフェッショナルなWebサイトを構築することも可能です。GitHub Pagesを活用して、あなたの次なるプロジェクトを試してみてください！