Giter Club home page Giter Club logo

website's Introduction

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

ひとまず作ってみよう!

  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. 右上の鉛筆マークで編集モードにする
  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. コミットし、しばらく待って、リロードすると表示される!

もう少し詳しく? → HTMLはじめのいっぽ
https://github.com/code4sabae/website/blob/master/what_is_html.md

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

サイトを育てましょう!

HTMLはじめのいっぽ
https://github.com/code4sabae/website/blob/master/what_is_html.md

CSSはじめのいっぽ
https://github.com/code4sabae/website/blob/master/what_is_css.md

JSはじめのいっぽ
https://github.com/code4sabae/website/blob/master/what_is_js.md

わからないこと?

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

website's People

Contributors

taisukef avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.