この記事でやりたいこと
- 難しそうに見えるGitHub PagesをつかったWebページの公開手順。最低限の手順で何をすればよいのか記載します。
想定する読者
- index.htmlを作ったことがある。
- GitHubのアカウントを持っている。もしくは自力でアカウントを作成できることができる。
事前に知っておくと役立つ知識
- 自分で作ったWebページをインターネット上に公開する際、リポジトリは「Public」(公開)にしないと無料では公開できない、ということを覚えておきましょう。
大まかな流れ
- GitHubにログインしてリポジトリを作成する。(「リポジトリ」が何かを知らなくても大丈夫です。)
- index.htmlファイルを作成する。
- デプロイする。(「デプロイ」とはGitHubにアップロードしたindex.htmlをインターネット上で公開できる状態にすることです。)
→完成！
1. GitHubにサインインしてリポジトリを作成する。
- GitHubにサインインする。
- 下図を参考に New Repository を選択する。
- 下図を参考に適当な名前(例: test)でリポジトリ名を入力します。また"Public"(公開)を選択します。
"test is available."と表示されない場合は"test"以外の他の名前に変更してください。
4. 画面下の方に Create repository という緑のボタンがあるのでクリックします。
5. クリック後の画面で Quick setup という項目があるので、creating a new file リンクを選択します。
2. index.htmlファイルを作成する。
- 下図を参考に"index.html"と入力し、自分が書いたHTML文書を入力します。
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>Document</title>
</head>
<body>
<h1>テスト</h1>
</body>
</html>
-
Commit changes.. ボタンをクリックします。
-
同様に Commit changes.. ボタンをクリックします。
index.html以外のファイルや画像ファイルを追加したい場合は、一度リポジトリ(test)をクリックし、下図を参考にそれぞれ Create new file、Upload files から追加します。
3. デプロイする。
-
遷移先画面で画面右上の Settings をクリックします。
-
下図を参考に Pages → main → Save をクリックします。
-
下図のように "Your GitHub Pages site is currently being built from the main branch."と表示されていることを確認します。
-
画面を更新し、Visit site をクリックします。
インターネットに公開されるまでには数分かかる場合があります。下記のような画面にならない場合は少し時間を空けた後、画面を更新します。
- 自分で作ったWebページがインタネット上に公開されました。
