はじめに
お久しぶりです。takimonです。
今回は、静的WEBサイトを無料で公開できるGithub Pagesについて紹介します。Github Pagesは、非常に便利なので、ぜひ活用してみてください。
前提知識と事前準備
- 基礎的なGitの前提知識
- Githubのアカウントの作成
1.GitHubでリポジトリを作成する
1. 右上の「+」ボタンをクリックし、「New repository」を選択します。
2. 「Repository name」に好きなレポジトリ名を入力します。ここでは例として「test」とします。
3. 「Public」を選択し、その他の設定はデフォルトのままにします。「Create repository」ボタンをクリックして、リポジトリを作成します。
2.ローカルにリポジトリをクローンする
1. 以下のスクリーンショットにある赤矢印のURLをコピーします。
2. コピーしたURLを使って、以下のコマンドを実行し、ローカル環境にリポジトリをクローン (複製) します。
git clone [コピーしたリポジトリのURL]
3.GitHub Pagesでサイトを公開する
1. クローンしたリポジトリの中に、以下の内容のindex.htmlファイルを作成します。このファイルが、ウェブサイトの最初のページになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Page</title>
</head>
<body>
<h1>Test</h1>
<p>testpage</p>
</body>
</html>
2.以下のコマンドを順番に実行して、作成したindex.htmlファイルをGitHubにプッシュ (アップロード) します。
cd test
git add index.html
git commit -m "Initial commit"
git push origin main
3.GitHubのウェブサイトで、リポジトリの状態が以下のようになっていることを確認してください。
4.リポジトリの画面から「Settings」をクリックします。
5. 「Settings」のサイドバーにある「Code and automation」セクションから「Pages」を選択します。
6. 「Branch」で「main」ブランチを選択し、「Save」ボタンをクリックします。
7. 数十秒後にページをリロードすると、以下のように表示されるので、「Visit Site」をクリックします。
8.作成したウェブサイトが表示されます。
おわりに
今回は、GitHub Pagesを使って静的ウェブサイトを公開する方法について説明しました。
ぜひ、ポートフォリオなどのウェブサイトを公開してみてください。
さらに詳しく知りたい場合は、GitHub Pagesのドキュメントを参照してください。
参考サイト