Skip to content

Latest commit

 

History

History
92 lines (66 loc) · 5.64 KB

README.md

File metadata and controls

92 lines (66 loc) · 5.64 KB
Raw

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

ひとまず作ってみよう！

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

image

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

image

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

image

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

image

  1. 1分くらい待つ

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

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

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

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

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

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

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

リンクしよう

  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 をクリックする

image

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

image

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

画像をつけよう

  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>
  1. scriptタグの中身はJavaScriptというプログラミング言語、いろいろ計算してくれます！

サイトを育てましょう！

わからないこと？

こちらの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