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

ひとまず作ってみよう！

hoge

hoge2

test3

test4

1. GitHubアカウントを作る Sign up for GitHub （スライドでの解説、アカウント名はウェブサイト名の一部にもなるのでいい名前を付けましょう。登録後GitHubからのメールを確認して、Verify！）
2. このリポジトリを右上にあるForkを押して自分のリポジトリとしてコピーする （リポジトリ＝貯蔵庫、Git上で扱う1つのプロジェクトのファイル一式を指す）
3. 自分のリポジトリの設定(Settings、Code、Issuesの並び、「...」で隠れていることもある)を開く
4. GitHub Pages の項目までスクロールし、Sourceを[master brunch]に変更する
5. もう一度 GitHub Pages の項目までスクロールして、書いてあるリンクを新しいウィンドウで開いておく
6. すぐには表示されないので、待っている間にカスタマイズ！自分のリポジトリの index.html を開く
7. 右上の鉛筆マークで編集モードにする（ブラウザの翻訳機能はOFFにしておきましょう）
8. <h1>たいとる</h1>とあるところを好きなタイトルに変える
9. 画面下の「commit changes」を押す
10. さっき開いたウィンドウをリロードしてみる
11. 数分すると、編集したタイトルに変わる！
12. 以降、編集、コミット、ちょっと待って、反映でウェブサイトづくりができる

画像をつけよう

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