githubでHP作ってみよ 2019/02/16 by CODE for IKOMA

でHP作ってみよ
のづたくや

今日の対象者
 ギット(Git) ? ギットハブ(Github)? 聞いた事もないやー
 デザイン分野でも使えるって聞いたけど触った事ないやー
 エンジニアは教える係に強制任命。途中で交代予定
今日は流行りのgit/githubの雰囲気さえわかってもらえればいいよ。
最初の第一歩！
こむずかしい余計なことはやらないよ。
ゴールまで一直線！

今日のゴール
サンプルとしてこんなシンプルなHPを作ってみよう
30分目標
だよ。
https://code4ikoma.github.io/static_page_test1/index.html
こむずかしい余計なことはやらないよ。
ゴールまで一直線！

全体の流れ
■Githubというサーバー準備
①githubアカウント作成
②github上にHP用フォルダ作成(リポジトリ)
■sourcetreeというPCソフト準備
③sourcetreeソフトをPCにインストール
④sourcetree用アカウント作成
■sourcetreeでHPデータ入力＆ githubへアップロード
⑤サンプルhtmlをコミット、プッシュ
■HP公開
⑥githubにて公開設定ボタン押下
これだけ～

■github利用準備
①githubアカウントを作ろう
https://github.com/
※メールアドレス認証がありますので今ここで使えるメアド登録要
②github上にHP用フォルダ作成
右上の＋ボタン押下
→[New repository]選択
→Repository nameの欄にフォルダ名入力例：hp_test1
→SSHボタン押下して横の文字列をコピー
→テキストファイルに書き出しておこう
Github上のフォルダの事
をリポジトリと言うよ。
難しいね

■sourcetree利用準備
③sourcetreeというPCソフトをダウンロード
「sourcetree インストール」で検索！
→ https://ja.atlassian.com/software/sourcetree
※メールアドレス認証がありますので今ここで使えるメアド登録要
④sourcetree起動＆アカウント作成
1)下の[Create one for free]でアカウント作成
2)右の[Bitbucket]を選択（[Bitbucket Serverは有料プランしか使えないらしい）
3)1で作成したアカウント入力→「アクセスを許可する」
4)gitのみインストール
5)SSHキーを読み込みますか？→持ってないので「いいえ」
SourceTreeSetup-3.0.15.exe

■sourcetreeにHPデータ入力 #1
⑤アップロードしたいhtmlファイルを準備
例）https://github.com/code4ikoma/static_page_test1
右真ん中緑色の「clone or download」ボタン押下
→「Download zip」→zip解凍して適当なところに置く
SourceTreeにてHPデータ入力
1)sourcetreeにて「+Create」
2)CreateRepository画面で上記zip解凍フォルダ指定
3)git指定
かんたん

⑤アップロードファイル選択＆処理
左下の作業ツリーのファイル欄にファイルが表示された
→「全てインデックスに追加」ボタン押下
→上の「Indexにステージしたファイル」にファイルが移った
→下の欄にコメント入れる
→右下の「コミット」ボタン押下
→準備完了！後はgithubサーバーにアップロードするのみ！
言葉が難しいけど、
呪文と思えば大丈夫！
次はサーバーにアップ
ロードするための設定を
しよう。ちょっと難しい
よ
＜参考＞
https://eng-entrance.com/sourcetree-use

⑤アップロードするサーバー設定
[ツール]→[SSHキーの作成／インポート]
→[Generate]→空欄のところを適当にマウス動かす
→[Save public key] →[id_rsa.pub]という名前で保存
(※ C:¥Users¥名前¥.sshに保存するのが一般的。必須では無い)
→[Save private key] →[id_rsa.ppk]という名前で保存
→[Public key for pasting…]を手動でコピーして
テキストファイルにメモっておく（理由不明。。。）
→×ボタンで画面close
→[ツール]→[オプション]→[全般]タブ
→SSHクライアントの設定のSSHキーに上記id_rsa.ppkを指定
→OK
https://qiita.com/githu
b129/items/b23a24a
aa359a0f8eba7

⑤ SSH pagent起動してid_rsa.ppk登録
Windowsのタスクバーに特定のアイコンダブルクリックして
id_rsa.ppk登録
※参照見ないと多分わからない
https://www.granfairs.com/blog/cto/set-ssh-to-backlog

⑤アップロードされるサーバー側設定
ブラウザにてgithub トップページ開く
https://github.com
→右上のアカウントマーク→[Settings]→[SSH and GPG key
（https://github.com/settings/ssh でも良い）
→SSH keysの欄の右の緑の[New SSH key]
→前前ページの[Public key for pasting…]をペースト
b129/items/b23a24a
aa359a0f8eba7

⑤sourcetreeにリモートリポジトリ設定
「リポジトリ」→「リポジトリ設定」
→「リモート」→「追加」
→githubの６頁前のSSHのURLを張り付け
例：git@github.com:名前/hp_test1.git
b129/items/b23a24a
aa359a0f8eba7

⑤sourcetreeで「プッシュ」ボタン押下
→「サーバ”github.com”のキーはキャッシュに。。。
（略）サーバーのキーを受け入れてやり直しますか？」表示
→「はい」
あとちょっと！
<参考> 説明ちょっと難しい。。。
https://qiita.com/github129/items/b23a24aaa359a0f8eba7

■HP公開
⑥githubでページ公開
https://github.com/名前/hp_test1
[CODE]タブを見るとサーバーにhtmlが登録されている！！！
[Setting]タブの下の方 [GitHub Pages]へ行き、
Source欄を[None」→[master branch]選択→[Save]
→”Your site is ready to published to URL”
→このURLにアクセス
→見えた！！！！
これで終わり！
<参考>
https://www.tam-tam.co.jp/tipsnote/html_css/post11245.html

■おわり
言葉が難しいね。
何回も言ったけど呪文と思って、目を
つぶってやればできるよ。
あとは、p8とp13を行うだけでHP
を変更できるのでやってみよう。
変更したページを今日のイベントペー
ジに投稿よろしく！！
https://www.facebook.com/even
ts/2010017965968195/?activ
e_tab=discussion
30分でできたかな？
複数人で一緒に作業すると
楽しいよ

githubでHP作ってみよ 2019/02/16 by CODE for IKOMA

More Related Content

What's hot (12)

Similar to githubでHP作ってみよ 2019/02/16 by CODE for IKOMA (20)

More from Takuya Nozu (7)

Recently uploaded (10)

githubでHP作ってみよ 2019/02/16 by CODE for IKOMA