AGENDA

はじめに
準備
gitコマンド思い出し
ホームページ用レポジトリを作る
Docker環境からgit push
確認
６. ホームページの更新
宿題

0. はじめに

前回は「プログラム開発ってじぇんじぇんイメージ沸かないよぉ～って方向けの第一歩ハンズオン」としてDocker環境で色んな言語でHello World!を表示してみました。
[Dev102]#1 Hello World!

今回は開発のソースコード管理に良く使われる GitHubを触ってみます。
せっかくなので、単純なプログラムのソースコード管理ではなく、Github Pagesという機能を使って自分のホームページを作ってみましょう！

参考：https://pages.github.com/

なおgit/githubの説明は割愛しますので、各自以下などで確認お願いします。
今日からはじめるGitHub

1. 準備

(1) Githubアカウント

まだGithubアカウントを持っていない方は、以下などを参考にGithubアカウントを作成して下さい。
Githubのアカウント作成方法
 英語が苦手なフレンズに贈るGitHub事始め（GitHub公式チュートリアル翻訳）

まぁ、これらの記事見なくても以下から直感的に登録可能です
https://github.com

(2) Play with Dockerでインスタンス起動

以下前々回記事を参考にPlay with Dockerでインスタンスを起動してください。
[Dev101]#1 Play with Docker

起動はこちらから

2. gitコマンド思い出し

前回記事で行った "git clone"コマンドを思い出してみましょう。

[Dev101]#2 Hello World!

コマンド入力

pwd
ls
git clone http://github.com/Nagahisa/Dev101-02-HelloWorld.git
ls

コマンド入力

tree .

はい、前回はNagahisaさんが作った公開レポジトリ http://github.com/Nagahisa/Dev101-02-HelloWorld をコピー(git clone)して使いましたね。

#3. ホームページ用レポジトリを作る

今回は https://nagahisa.github.io のような個人ホームページを作りたいので、各自[yourname].github.ioというレポジトリを作ります([yourname]は自分のGithubアカウントに読み替えてください）。

別名レポジトリのWeb公開もほぼ同様手順で可能なのでその際は以下参照してください。
10分でできる！GitHub Pagesで静的サイトを公開する方法
※今回のホームページに使用するindex.htmlはこのサイトにあるサンプルを流用させていただきました！

(1)New Repository作成

自分のGitHubページ　https://github.com/[yourname] にアクセスしログイン右上の＋ボタンから"New repository"押します。

・以下情報で作成します。

Repository name: [yourname].github.io
Description: [yourname]'s Home Page

(2)作成後画面

Repositoryセットアップの方法が表示されます。
今回は２番目の「create a new repository on the command line」でトライしましょう。

通常のRepositoryは "README.md"というマークアップファイルを置いておくと Webでのレポジトリアクセス時にその内容を表示してくれます。
今回はHomePageに使うので "README.md"を "index.html"とします。

#４. Docker環境からgit push

上記GithubのWeb UI操作でRepositoryの枠ができたので、次はそのRepositoryで管理するデータを格納します。
Docker環境でローカルレポジトリーを作成して、その内容をPUSHします。

(1)git初期設定

git push使う前に初期設定が必要です。
自分のメアドとGitHubアカウント名を設定してください。
確認は "git config --list"で出来ます。

コマンド入力

git config --global user.email "[yourname]@example.com"
git config --global user.name "[yourname]"

(2)作業環境へ移動

作業環境をレポジトリ名で作ってそこに移動します（空の当該レポジトリをgit cloneしてもOKです）。

コマンド入力

mkdir [yourname].github.io
cd [yourname].github.io

(3)index.htmlを作成します。

簡単なindex.htmlを作成します（htmlファイルじゃないですが)。

コマンド入力

echo "# [yourname].github.io" >> index.html

(4)git init

ローカルのレポジトリをgit initコマンドで初期化します（.gitディレクトリが出来ます）。

コマンド入力

git init

(5)git add, git commit, git push

レポジトリに index.htmlファイルを追加し、commitします。

コマンド入力

git add index.html
git commit -m "first commit"

Remoteをgithubに設定しPushします。

コマンド入力

git remote add origin https://github.com/[yourname]/[yourname].github.io.git
git push -u origin master

#5. 確認

##(1)ホームページ用レポジトリの確認
https://github.com/[yourname]

枠だけ作ったGitHubレポジトリを確認してみます。
git commit -m で指定したコミットメッセージ"first commit"が確認できます。

##(２)ホームページの確認

以下のURLで作ったホームページを確認しましょう。
https://[yourname].github.io

#6. ホームページの更新

##(1)Docker環境でindex.html更新

Docker環境でindex.htmlファイルを更新します。
今回はPlay with DockerのEDITORを使って、index.htmlを以下で上書きします。
以下はNagahisaさん用サンプルですので、各自自分の情報にカスタマイズして利用してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>NagahisaのHome Page</title>
    <!--今回はサンプルのためMarxというシンプルでそれでいて小奇麗なCSSを使っています-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/marx/2.0.4/marx.css">
  </head>

  <body>
    <main>
      <h1>リンクです</h1>
      
      <a href="https://qiita.com/Nagahisa/" target="_blank"><button>Qiitaに行く</button></a>
      <a href="https://www.facebook.com/kenzo.nagahisa" target="_blank"><button>Facebookに行く</button></a>
      
   </main>
   <script>
     <!--JavaSciptの動作確認のため、console.logに出力しています-->
     console.log('JavaScriptも動きます');
   </script>
  </body>
</html>

Play with Dockerの"EDITOR"で index.htmlファイルを開く

上記で上書き

確認

(２)git add, git commit, git push

前章と同様に index.htmlを addして、commitして、pushします。

コマンド入力

git add index.html
git commit -m "second commit"
git push -u origin master

##(３)ホームページ用レポジトリの確認

https://[yourname].github.io
git commit -m で指定したコミットメッセージ"second commit"が確認できます。

"second commit"のURLリンクをクリックします。

最初の１行が削除され(ピンク編みかけ)、新しいindex.htmlが追加（緑編みかけ）されているのがわかります。

##(４)ホームページの確認

以下のURLで更新したホームページを確認しましょう。
https://[yourname].github.io

7. おまけ

(1)宿題

・index.htmlをDocker環境で更新して git pushでホームページ更新してみましょう。
・GithubからもWeb-UIで更新できます。試してみましょう。
・Blogも開設出来ます。Blog好きの方は是非やってみて下さい！
Hugo + GitHub Pages でブログのプロトタイプを構築してみた

(2)参考

GitHubはソースコード管理だけではなく、こんな用途にも使われています。
デンキヤギ株式会社就業規則

今年に入って無料ユーザでもPrivate Repositoryが無制限に作れるようになっていますので、個人のテキストファイル管理などにもチャレンジしてみてください！！
GitHub、無料ユーザーもプライベートリポジトリを使い放題に

Enjoy