課外活動4

今日は,作ったウェブサイトを公開します.

公開には,GitHub Pagesを利用します.

基本的なgit操作

私はこのウェブサイトでGitについて勉強しました.非常にわかりやすいので,おすすめです.

backlog.com

これの入門編を一通り読んでください.

頻繁に打つコマンドとして以下のものがあります.

  • git status
    • ワークツリーとインデックスの状態を確認する
  • git add .
    • すべてのファイルをインデックスに登録する
  • git commit -m "コミットメッセージ"
    • コミットする
  • git log
  • git push

GitHub を使う

リポジトリ作成

GitHub へログインします.

https://github.com/

リポジトリを作ります.

右上の+ボタン,New repository をクリックします.リポジトリ名を入力し,Create repository をクリックします.

f:id:Polyomino:20190126160352p:plain

リポジトリを作ることができました.

clone

緑のボタンを押してリポジトリのアドレスを確認します.このとき,Clone with SSH となっていることを確認してください.

もし,ssh という選択肢がないのであれば, Connecting to GitHub with SSH - User Documentation で確認しながら公開鍵を登録してください.

f:id:Polyomino:20190126160258p:plain

実際にクローン(ダウンロード)してきます. クローンして期待ディレクトリに移動して,以下のコマンドを打ちます.

僕の場合,このようになります.

git clone git@github.com:iPolyomino/szm.git

Git Bash もしくはPowerShellで, git clone リポジトリ としてください.

クローン完了後,ls コマンドでそのリポジトリがクローンされていることを確認することができます.

commit & push

まず,cd でクローンしてきたディレクトリに入ってください.そして,クローンしてきたディレクトszm に初日に作った hello-world.html を追加します.(コピー&ペーストでOK)

git の状態を確認します.

git status

すると,以下のような結果が帰ってきます.

On branch master
Your branch is up-to-date with 'origin/master'.
Untracked files:
  (use "git add <file>..." to include in what will be committed)

    hello-world.html

nothing added to commit but untracked files present (use "git add" to track)

hello-world.html がgit の追跡対象となっていないことがわかります.なので,追跡対象に追加します.

git add hello-world.html

追加でたか確認します.git status を打ってください.

On branch master
Your branch is up-to-date with 'origin/master'.
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

    new file:   hello-world.html

追加できているようです.

インデクスに追加されたので,コミットの準備ができました.commit します.

git commit -m "add hello-world"

コミットできました.

git status で確認します.

On branch master
Your branch is ahead of 'origin/master' by 1 commit.
  (use "git push" to publish your local commits)
nothing to commit, working tree clean

最後にリモートにpush (アップロード)します.

git push

自分のリポジトリGitHub)を確認すると,ファイルが上がっていることを確認することができます.

f:id:Polyomino:20190126170039p:plain

GitHub Pages に公開する.

GitHub を開いて,Settingsタブに移動します.

f:id:Polyomino:20190126170206p:plain

下の方にある GitHub Pages の Source を master branch にしてsaveボタンを押します.

f:id:Polyomino:20190126170352p:plain

しばらくすると,Your site is published at https://ipolyomino.github.io/szm/ というようなメッセージが出ます.

今回,hello-world.html という名前で公開しているので,このURLの最後にhello-world.html を追加します.

https://ipolyomino.github.io/szm/hello-world.html

というように,https:// <ユーザー名> .github.io/ <リポジトリ名> / <ファイル名> とすることによってアクセスすることができるようになります.

まとめ

Git コマンドを使う

GitHub はGitのホスティングサービス

GitHub Pages でウェブサイトを公開することができる.