GitHub Pages で、じぶんのウェブサイトをつくろう！

ひとまず作ってみよう！

1. 確認できるメールアドレスを用意して、GitHubアカウントを作る Sign up for GitHub

2. このリポジトリを右上にあるForkを押して自分のリポジトリとしてコピーする （リポジトリ＝貯蔵庫、Git上で扱う1つのプロジェクトのファイル一式を指す）

3. 自分のリポジトリの設定 Settings を開く (ブラウザ幅が短いと「...」で隠れている)

4. 左のメニューから「Pages」をクリック、Brunchを[master brunch]に変更して、Saveを押す

5. 1分くらい待つ

6. そのページをリロードすると、新たに表示される https://...github.io/website/ というリンクを新しいウィンドウで開く　（自分のサイトで動いた！）

7. 自分のリポジトリ、メニューの Code を押し index.html を開く

8. 右上の鉛筆マークで編集モードにする （ブラウザの翻訳機能はOFFにしておきましょう）

9. <h1>たいとる</h1>と書いてあるところを好きなタイトルに変える

10. 画面下の緑色のボタン「commit changes」を押す

11. 1分くらいまって、さっき開いたウィンドウ　https://...github.io/website/　をリロードすると、編集したタイトルに変わる！ （自分のサイトできた！）

12. 以降、編集、コミット、ちょっと待って反映、この繰り返しでウェブサイトづくりができる

リンクしよう

1. HTMLの本文のどこかに <a herf="http://github.com/"&gt;GitHub&lt;/a> と書いて「commit changes」
2. GitHubへのリンクができる！

複数ページを作って、リンクしよう

1. Code を押して、index.html を開く
2. HTMLの本文のどこかに <a herf="test.html">GitHub</a> と書いて「commit changes」
3. Code を押して、Add file、Create new file をクリックする

3. ファイル名でとりあえず test.html とつける （HTMLは .html で終わる英数字でファイル名を付ける）

4. 本文にテストと書いて「commite changes」、1分くらい待つと反映
5. いくらでもページを増やせる！

画像をつけよう

1. pngかjpg画像を準備する
2. 半角英数字を使った空白を含まないファイル名に変更する （日本語名やトラブルの元になる）
3. [Upload files]を押す
4. 画像ファイルをドロップして、コミットする
5. index.html を編集する
6. <img src="imgfile.jpg"> と、<h1>タイトル</h1> の前の行に書く (imgfile.jpg はアップロードしたファイル名に）
7. コミットし、しばらく待って、リロードすると表示される！

プログラムを加えよう

1. ページを開いた時、計算結果がダイアログで出るようにするHTMLを加える

<script type="module">
alert(1 + 1);
</script>

2. scriptタグの中身はJavaScriptというプログラミング言語、いろいろ計算してくれます！

サイトを育てましょう！

• HTMLはじめのいっぽ
• CSSはじめのいっぽ
• JSはじめのいっぽ

わからないこと？

こちらのIssuesに分からないことをどうぞ！
https://github.com/code4sabae/website/issues

GitHub Desktop を使って効率アップ!

1. GitHub Desktopをダウンロードする
2. 自分のリポジトリの右側[clone or download]を押し、[Open in Desktop]を押す
3. ダウンロードするフォルダをローカルパスとして指定し[Clone]する
4. ダウンロードしたフォルダの中の index.html をブラウザで開くと表示される
5. VSCodeなどのエディタを使って、index.html や index.css を編集し、サイトをつくる
6. GitHub Desktop で、コミットする（更新用のメモは必須、”更新”など、一言でもOK！）
7. [Fetch origin] を押し、サーバーにプッシュする
8. しばらく待つと、反映される

ドメイン名だけでアクセスできるようにしよう

[Settings]で、リポジトリ名を (自分のGitHubアカウント名).github.io に変更すると、そのアドレスでアクセスできます！短くてかっこいいですね！

github.io じゃなく、じぶんだけのドメイン（独自ドメイン）を設定したい方はこちら
https://github.com/code4sabae/website/blob/master/what_is_domain.md