GitHub Pagesを使って簡単にウェブサイトを公開しよう
山崎講師GitHub Pagesとは？
GitHub Pagesは、GitHubが提供する無料のウェブホスティングサービスです。通常、ウェブサイトを公開するためにはFTPソフトを使用してサーバーにファイルをアップロードする必要があります。しかし、GitHub Pagesを使えば、GitHubにファイルをプッシュするだけで簡単にウェブサイトを公開できます。
GitHub Pagesの制約
GitHub Pagesは、Javaなどの動的言語を実行することはできません。
GitHub Pagesの使い方
1. GitHubにログイン
まずはGitHubにログインし、自分のユーザー名を確認します。ユーザー名は、右上のアイコンをクリックするとアイコンの横に表示されている部分で確認できます。
2. 新しいリポジトリを作成
1．GitHubのダッシュボード右上から「New repository」ボタンをクリックし、新しいリポジトリを作成します。リポジトリ名は以下の形式にする必要があります。
{ユーザー名}.github.io
例：tomosta.github.io
2．リポジトリの公開設定は、「パブリック」にする必要があります（プロプランではプライベートリポジトリも利用可能）。
3．Create repositoryボタンをクリックします。
3. リポジトリをクローン
リポジトリを作成したら、ローカル環境にクローンします。GitHubのリポジトリページで「Code」ボタンをクリックし、「Use HTTPS」のURLをコピーします。その後、Gitクライアント（Git Bashなど）で以下のコマンドを実行します。
git clone {コピーしたURL}
4. index.html を作成
次に、リポジトリ内に index.html を作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My GitHub Page</title>
</head>
<body>
<h1>Welcome to My GitHub Page</h1>
</body>
</html>
このファイルを保存し、以下のコマンドでコミットとプッシュを行います。
git add .
git commit -m "トップページを作成"
git push origin main
5. GitHub Pagesを有効化
リポジトリの「Settings」タブを開き、「Pages」セクションへ移動します。「Branch」セクションで main を選択し、「Save」をクリックすると、GitHub Pagesが有効になります。
6. サイトの確認
しばらくすると、以下のURLでサイトが公開されます。
もし404エラーが表示された場合は、少し時間を置いてから再度アクセスしてください。
テンプレートやデザインの適用
Bootstrapなどのテンプレートを使用すると、より見栄えの良いサイトを作成できます。例えば、Start Bootstrap からテンプレートをダウンロードし、展開したファイルをリポジトリにアップロードしてプッシュすれば、簡単にデザインを適用できます。
GitHub Pagesのメリット
- 無料で利用可能（プロプランもあり）
- Gitと連携して簡単に更新できる
- 複数人での共同管理が容易
- 履歴管理やリバート（変更の取り消し）が簡単
間違えた変更の取り消し
間違えてファイルを削除してしまった場合、Gitのリバート機能を使えば元に戻すことができます。
git revert HEAD
その後、
git push origin main
と実行すれば、誤った変更を取り消すことができます。
まとめ
GitHub Pagesを使えば、静的なウェブサイトを無料で簡単に公開できます。エンジニアだけでなく、ポートフォリオサイトや技術ブログを作りたい方にもおすすめです。まずはシンプルな index.html を作成し、GitHubにプッシュしてみましょう。
今後もGitHubの機能について紹介していきますので、ご興味のある方はぜひチェックしてみてください！
投稿者プロフィール
