- 確認できるメールアドレスを用意して、GitHubアカウントを作る Sign up for GitHub
- このリポジトリを右上にあるForkを押して自分のリポジトリとしてコピーする (リポジトリ=貯蔵庫、Git上で扱う1つのプロジェクトのファイル一式を指す)
- 自分のリポジトリの設定 Settings を開く (ブラウザ幅が短いと「...」で隠れている)
- 左のメニューから「Pages」をクリック、Brunchを[master brunch]に変更して、Saveを押す
-
1分くらい待つ
-
そのページをリロードすると、新たに表示される https://...github.io/website/ というリンクを新しいウィンドウで開く (自分のサイトで動いた!)
-
自分のリポジトリ、メニューの Code を押し index.html を開く
-
右上の鉛筆マークで編集モードにする (ブラウザの翻訳機能はOFFにしておきましょう)
-
<h1>たいとる</h1>と書いてあるところを好きなタイトルに変える
-
画面下の緑色のボタン「commit changes」を押す
-
1分くらいまって、さっき開いたウィンドウ https://...github.io/website/ をリロードすると、編集したタイトルに変わる! (自分のサイトできた!)
-
以降、編集、コミット、ちょっと待って反映、この繰り返しでウェブサイトづくりができる
- HTMLの本文のどこかに <a herf="http://github.com/">GitHub</a> と書いて「commit changes」
- GitHubへのリンクができる!
- Code を押して、index.html を開く
- HTMLの本文のどこかに <a herf="test.html">GitHub</a> と書いて「commit changes」
- Code を押して、Add file、Create new file をクリックする
- ファイル名でとりあえず test.html とつける (HTMLは .html で終わる英数字でファイル名を付ける)
- 本文にテストと書いて「commite changes」、1分くらい待つと反映
- いくらでもページを増やせる!
- pngかjpg画像を準備する
- 半角英数字を使った空白を含まないファイル名に変更する (日本語名やトラブルの元になる)
- [Upload files]を押す
- 画像ファイルをドロップして、コミットする
- index.html を編集する
- <img src="imgfile.jpg"> と、<h1>タイトル</h1> の前の行に書く (imgfile.jpg はアップロードしたファイル名に)
- コミットし、しばらく待って、リロードすると表示される!
- ページを開いた時、計算結果がダイアログで出るようにするHTMLを加える
<script type="module">
alert(1 + 1);
</script>
- scriptタグの中身はJavaScriptというプログラミング言語、いろいろ計算してくれます!
こちらのIssuesに分からないことをどうぞ!
https://github.com/code4sabae/website/issues
- GitHub Desktopをダウンロードする
- 自分のリポジトリの右側[clone or download]を押し、[Open in Desktop]を押す
- ダウンロードするフォルダをローカルパスとして指定し[Clone]する
- ダウンロードしたフォルダの中の index.html をブラウザで開くと表示される
- VSCodeなどのエディタを使って、index.html や index.css を編集し、サイトをつくる
- GitHub Desktop で、コミットする(更新用のメモは必須、”更新”など、一言でもOK!)
- [Fetch origin] を押し、サーバーにプッシュする
- しばらく待つと、反映される
[Settings]で、リポジトリ名を (自分のGitHubアカウント名).github.io に変更すると、そのアドレスでアクセスできます!短くてかっこいいですね!
github.io じゃなく、じぶんだけのドメイン(独自ドメイン)を設定したい方はこちら
https://github.com/code4sabae/website/blob/master/what_is_domain.md