Giter Club home page Giter Club logo

c4s_website's Introduction

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

c4s_website's People

Contributors

taisukef avatar himanisingh528 avatar poroann 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.