コース目次 / 第3章

成果物 — GitHubに置いて、公開する

GitHubにリポジトリを作って push し、GitHub Pages で公開URLを手に入れます。

第3章 / 全5章目安約60分この章のゴール: 自分のサイトに公開URLが付き、プロフィールに自己紹介が出る

お使いのパソコン

手順が切り替わります

この章で、あなたの作ったものに住所が付きます。

今日のゴール

https://あなたのユーザー名.github.io/haruto-site/ を、スマホでも友だちのパソコンでも開ける状態にすること。

コース1では Netlify Drop で公開しました。今日手に入れるのは2つめの公開手段です。Netlify Drop が「フォルダを投げ込む」方式だったのに対して、こちらは履歴ごと送って、送るたびに更新される方式です。

1. READMEを書く

先に、箱を開けた人が最初に読む紙を作ります。haruto-site フォルダの中に README.md を作ってください。

README.md

# はるとの旅ノート

カメラを持って歩いた町の記録です。行ってよかった場所を少しずつ書きためています。

- 公開先: https://USERNAME.github.io/haruto-site/
- 作った人: はると

## 中身

| ファイル | 何をするか |
|---|---|
| `index.html` | ページの中身。ここに旅のメモを足していく |
| `style.css` | 見た目 |
| `.gitignore` | Git に記録させないファイルの一覧 |

USERNAME は、あとで自分のユーザー名に書き換えます。いまはそのままで構いません(公開URLがまだ確定していないので、この章の最後に直します)。

書けたら、記録します。第2章と同じ2つのコマンドです。

VS Codeのターミナルターミナル

git add .git commit -m "READMEを足した"

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

これで記録が2つになりました。

2. GitHubに空の箱を作る

ブラウザでGitHubを開き、右上の + から New repository を選びます。

項目	何を入れるか
Repository name	`haruto-site`(手元のフォルダ名と同じにします)
Description	空でよい
Public / Private	Public(公開しないと GitHub Pages が使えません)
Add a README file	チェックしない
Add .gitignore / license	どちらも None のまま

いちばんの落とし穴がここです。Add a README file にチェックを入れると、GitHub側が勝手に1つ記録を作ってしまいます。すると手元の歴史と噛み合わなくなって、次の git push が拒否されます(rejected と出ます)。
空の箱を作るのが正解です。中身はこれから送ります。

緑の Create repository を押すと、まっさらな画面に英語のコマンドが並んだページが出ます。次で使うので、開いたままにしておいてください。

3. 送り先を教えて、送る

まず「どこへ送るか」を1回だけ登録します。

VS Codeのターミナルターミナル

git remote add origin https://github.com/USERNAME/haruto-site.gitgit remote -v

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

USERNAME は自分のユーザー名に置き換えてください。さっきのGitHubの画面に、この行がそのまま載っています(コピーボタンがあります)。

git remote -v を打つと、登録した送り先が2行(fetch と push)出ます。それが確認です。

いよいよ送ります。

VS Codeのターミナルターミナル

git push -u origin main

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

Mac をお使いの方

第1章で gh auth login を済ませてあるので、何も聞かれずに送られます。

Windows をお使いの方

初めての1回だけ、ブラウザが開きます。Git Credential Manager が「GitHubにログインしてください」と言っています。ブラウザで許可すれば、ターミナルの続きが自動で進みます。次からは開きません。

転送の進捗が数行流れたあと、最後にこの3行が出れば成功です。

こう出れば成功(最後の3行)

To https://github.com/USERNAME/haruto-site.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.

ブラウザでGitHubのページを再読み込みしてください。さっきまで空だった箱に、あなたのファイルとREADMEが並んでいます。

-u origin main の -u は「次からは送り先を省略していい」という印です。2回目からは git push だけで送れます。

4. 公開する

置いただけでは、まだサイトとして開けません。ページとして配ってもらう設定を1つします。

リポジトリのページで、上のほうにある Settings を押します
左の細長いメニューを下にたどって、Pages を押します
Build and deployment の Source が Deploy from a branch になっていることを確かめます
その下の枝を選ぶ欄で main、その右の欄で / (root) を選びます
Save を押します

これだけです。

すぐには開きません。初回は数分かかります(1分のこともあれば5分を超えることもあります)。ページの上のほうに公開URLが出ますが、押しても最初は404になることがあります。壊れていません。お茶でも飲んで、少し待ってから再読み込みしてください。

公開URLはこの形です。

あなたのサイトの住所

https://USERNAME.github.io/haruto-site/

開けたら、スマホでも開いてみてください。これは本物のインターネット上の住所で、あなたのパソコンが消えていても生きています。

5. READMEの住所を本物にする

README.md の USERNAME を、自分のユーザー名に書き換えます。書き換えたら、いつもの3つです。

VS Codeのターミナルターミナル

$git add .$git commit -m "公開URLを書いた"$git push

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

git push だけで送れました。さっきの -u が効いています。

6. プロフィールに自己紹介を出す

もう1つ、GitHubには面白い仕掛けがあります。自分のユーザー名とまったく同じ名前のリポジトリを作ると、その中の README.md がプロフィールページの一番上に表示されます。

GitHubで New repository をもう一度開きます
Repository name に、あなたのユーザー名をそのまま入れます(例: ユーザー名が haruto なら haruto)
Public を選びます
今度は Add a README file にチェックを入れます(ここはブラウザだけで完結させるので、入れて構いません)
Create repository

名前が合っていると、GitHubが「✨ You found a secret! …」という緑色の案内を出してくれます。これが出たら正解です。

できた README.md を、ブラウザの鉛筆アイコンから編集します。

README.md(自分の言葉に置き換えてください)

## はると

カメラと旅行が好きです。Tsumiki でWebサイトの作り方を勉強しています。

- 旅ノート: https://USERNAME.github.io/haruto-site/
- いま勉強していること: HTML / CSS / Git

Commit changes を押して保存したら、https://github.com/あなたのユーザー名 を開いてください。試食章で見た、空っぽだったページに自己紹介が出ています。

ハマったら

push で「rejected」「fetch first」と出る

GitHub側に、手元に無い記録があります。ほとんどの場合、リポジトリを作るときに Add a README file にチェックを入れてしまったのが原因です。

いちばん確実なのは、GitHub側のリポジトリを一度消して、空で作り直すことです(Settings のいちばん下 → Delete this repository)。手元のフォルダには何も起きないので、作り直したあと git push -u origin main をもう一度打てば通ります。

公開URLが404のまま

3つ確かめてください。(1) リポジトリが Public になっているか(Settings の General のいちばん下で変えられます)。(2) Settings → Pages の Source が Deploy from a branch、枝が main、フォルダが / (root) になっているか。(3) フォルダの直下に index.html があるか(サブフォルダに入っていると見つけてもらえません)。

3つとも合っていれば、あとは待つだけです。最初の1回はほんとうに数分かかります。

送ったのに、サイトが古いまま

GitHub Pages は送られてから配り直すまでに少し時間がかかります。1〜2分待ってから、ブラウザを強制再読み込みしてください(Macは Shift を押しながら再読み込み、Windowsは Ctrl + F5)。ブラウザが古いページを覚えているだけ、ということがよくあります。

ZIPで戻したい

このページの下のZIPは、この章を終えた状態のフォルダです。解凍して、その中で作業を続けられます。自分で書き換えた部分は消えてしまうので、先に自分のファイルを別の場所へ待避してから使ってください。

こうなっていればOK

GitHubに空のリポジトリを作った
git push でファイルがGitHubに並んだ
GitHub Pages を有効にして、公開URLでページが開いた
プロフィールREADMEを作って、自分のページに自己紹介が出た

うまくいかないときは、この章の完成ファイル一式(ZIP)をダウンロードして続きから進めても大丈夫です。

卒業まであと1章です。

この章はまだ完了していません。