SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Downloaden Sie, um offline zu lesen
で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指定
かんたん
■sourcetreeにHPデータ入力 #2
⑤アップロードファイル選択&処理
左下の作業ツリーのファイル欄にファイルが表示された
→「全てインデックスに追加」ボタン押下
→上の「Indexにステージしたファイル」にファイルが移った
→下の欄にコメント入れる
→右下の「コミット」ボタン押下
→準備完了!後はgithubサーバーにアップロードするのみ!
言葉が難しいけど、
呪文と思えば大丈夫!
次はサーバーにアップ
ロードするための設定を
しよう。ちょっと難しい
よ
<参考>
https://eng-entrance.com/sourcetree-use
■sourcetreeにHPデータ入力 #3
⑤アップロードするサーバー設定
[ツール]→[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
■sourcetreeにHPデータ入力 #4
⑤ SSH pagent起動してid_rsa.ppk登録
Windowsのタスクバーに特定のアイコンダブルクリックして
id_rsa.ppk登録
※参照 見ないと多分わからない
https://www.granfairs.com/blog/cto/set-ssh-to-backlog
言葉が難しいけど、
呪文と思えば大丈夫!
■sourcetreeにHPデータ入力 #5
⑤アップロードされるサーバー側設定
ブラウザにてgithub トップページ開く
https://github.com
→右上のアカウントマーク→[Settings]→[SSH and GPG key
(https://github.com/settings/ssh でも良い)
→SSH keysの欄の右の緑の[New SSH key]
→前前ページの[Public key for pasting…]をペースト
言葉が難しいけど、
呪文と思えば大丈夫!
https://qiita.com/githu
b129/items/b23a24a
aa359a0f8eba7
■sourcetreeにHPデータ入力 #6
⑤sourcetreeにリモートリポジトリ設定
「リポジトリ」→「リポジトリ設定」
→「リモート」→「追加」
→githubの6頁前のSSHのURLを張り付け
例:git@github.com:名前/hp_test1.git
言葉が難しいけど、
呪文と思えば大丈夫!
https://qiita.com/githu
b129/items/b23a24a
aa359a0f8eba7
■sourcetreeにHPデータ入力 #7
⑤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分でできたかな?
複数人で一緒に作業すると
楽しいよ

Weitere ähnliche Inhalte

Was ist angesagt?

底辺webプログラマが今更git語ってみた
底辺webプログラマが今更git語ってみた底辺webプログラマが今更git語ってみた
底辺webプログラマが今更git語ってみたYudai Fujita
 
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyoPythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyoYumi uniq Ishizaki
 
プロ生ちゃんbotを作ろう!
プロ生ちゃんbotを作ろう!プロ生ちゃんbotを作ろう!
プロ生ちゃんbotを作ろう!treby
 
ARLT_20_あなたの知らないGitHub
ARLT_20_あなたの知らないGitHubARLT_20_あなたの知らないGitHub
ARLT_20_あなたの知らないGitHubarcircle tmu
 
randmap.enchant.js github公開
randmap.enchant.js github公開randmap.enchant.js github公開
randmap.enchant.js github公開shizuru123
 
2015/10/17 第10回G-Study発表資料-あの日見たgit_hubなstarを君達はまだ知らない。
2015/10/17 第10回G-Study発表資料-あの日見たgit_hubなstarを君達はまだ知らない。2015/10/17 第10回G-Study発表資料-あの日見たgit_hubなstarを君達はまだ知らない。
2015/10/17 第10回G-Study発表資料-あの日見たgit_hubなstarを君達はまだ知らない。Yuta Hayakawa
 
2ヶ月前にgitを始めた私からこれから始める皆さんへ
2ヶ月前にgitを始めた私からこれから始める皆さんへ2ヶ月前にgitを始めた私からこれから始める皆さんへ
2ヶ月前にgitを始めた私からこれから始める皆さんへAyana Yokota
 

Was ist angesagt? (12)

E zuka-teck2019-7-11 LT
E zuka-teck2019-7-11 LTE zuka-teck2019-7-11 LT
E zuka-teck2019-7-11 LT
 
Ultra piet
Ultra pietUltra piet
Ultra piet
 
空室検索 Map
空室検索 Map空室検索 Map
空室検索 Map
 
底辺webプログラマが今更git語ってみた
底辺webプログラマが今更git語ってみた底辺webプログラマが今更git語ってみた
底辺webプログラマが今更git語ってみた
 
ojag20120519
ojag20120519ojag20120519
ojag20120519
 
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyoPythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
 
Osakapy 20140313 lt
Osakapy 20140313 ltOsakapy 20140313 lt
Osakapy 20140313 lt
 
プロ生ちゃんbotを作ろう!
プロ生ちゃんbotを作ろう!プロ生ちゃんbotを作ろう!
プロ生ちゃんbotを作ろう!
 
ARLT_20_あなたの知らないGitHub
ARLT_20_あなたの知らないGitHubARLT_20_あなたの知らないGitHub
ARLT_20_あなたの知らないGitHub
 
randmap.enchant.js github公開
randmap.enchant.js github公開randmap.enchant.js github公開
randmap.enchant.js github公開
 
2015/10/17 第10回G-Study発表資料-あの日見たgit_hubなstarを君達はまだ知らない。
2015/10/17 第10回G-Study発表資料-あの日見たgit_hubなstarを君達はまだ知らない。2015/10/17 第10回G-Study発表資料-あの日見たgit_hubなstarを君達はまだ知らない。
2015/10/17 第10回G-Study発表資料-あの日見たgit_hubなstarを君達はまだ知らない。
 
2ヶ月前にgitを始めた私からこれから始める皆さんへ
2ヶ月前にgitを始めた私からこれから始める皆さんへ2ヶ月前にgitを始めた私からこれから始める皆さんへ
2ヶ月前にgitを始めた私からこれから始める皆さんへ
 

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

Github時代のgitのはなし
Github時代のgitのはなしGithub時代のgitのはなし
Github時代のgitのはなしYoichi Toyota
 
@s_ssk13さん向けGitHub入門
@s_ssk13さん向けGitHub入門@s_ssk13さん向けGitHub入門
@s_ssk13さん向けGitHub入門Takashi Imagire
 
オープンセミナー香川2012 LT
オープンセミナー香川2012 LTオープンセミナー香川2012 LT
オープンセミナー香川2012 LTKouta Imanaka
 
Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117Tetsuya Sato
 
僕がAndroid開発する時にちょっと便利だと思うtips
僕がAndroid開発する時にちょっと便利だと思うtips僕がAndroid開発する時にちょっと便利だと思うtips
僕がAndroid開発する時にちょっと便利だと思うtipsMasataka Kono
 
Python for Data Analysis第1回勉強会(+git入門)
Python for Data Analysis第1回勉強会(+git入門)Python for Data Analysis第1回勉強会(+git入門)
Python for Data Analysis第1回勉強会(+git入門)Makoto Kawano
 
gitを使って、レポジトリの一部抽出forkしてみました
gitを使って、レポジトリの一部抽出forkしてみましたgitを使って、レポジトリの一部抽出forkしてみました
gitを使って、レポジトリの一部抽出forkしてみましたTakako Miyagawa
 
Gitを使いこなしてみよう!
Gitを使いこなしてみよう!Gitを使いこなしてみよう!
Gitを使いこなしてみよう!Hiroshi Maekawa
 
WindowsでGitを使う際のベストプラクティス
WindowsでGitを使う際のベストプラクティスWindowsでGitを使う際のベストプラクティス
WindowsでGitを使う際のベストプラクティスRyo Sumasu
 
GitHub勉強会
GitHub勉強会GitHub勉強会
GitHub勉強会ArusuDev
 
デザイナー、フロントエンジニア向けgithub勉強会ワークショップ資料
デザイナー、フロントエンジニア向けgithub勉強会ワークショップ資料デザイナー、フロントエンジニア向けgithub勉強会ワークショップ資料
デザイナー、フロントエンジニア向けgithub勉強会ワークショップ資料ichikaway
 
今日から始めるGithub
今日から始めるGithub今日から始めるGithub
今日から始めるGithublion-man
 
201806 hugo で静的サイト作ってみた
201806 hugo で静的サイト作ってみた201806 hugo で静的サイト作ってみた
201806 hugo で静的サイト作ってみたjunichim
 
バージョン管理
バージョン管理バージョン管理
バージョン管理Misa Kondo
 
Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会
Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会
Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会Katz Ueno
 
初心者がGoでCLIツール作ってみて学んだこと
初心者がGoでCLIツール作ってみて学んだこと初心者がGoでCLIツール作ってみて学んだこと
初心者がGoでCLIツール作ってみて学んだことYuta Ohashi
 

Ähnlich wie githubでHP作ってみよ 2019/02/16 by CODE for IKOMA (20)

Yapc2012資料
Yapc2012資料Yapc2012資料
Yapc2012資料
 
Github時代のgitのはなし
Github時代のgitのはなしGithub時代のgitのはなし
Github時代のgitのはなし
 
@s_ssk13さん向けGitHub入門
@s_ssk13さん向けGitHub入門@s_ssk13さん向けGitHub入門
@s_ssk13さん向けGitHub入門
 
オープンセミナー香川2012 LT
オープンセミナー香川2012 LTオープンセミナー香川2012 LT
オープンセミナー香川2012 LT
 
Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117
 
僕がAndroid開発する時にちょっと便利だと思うtips
僕がAndroid開発する時にちょっと便利だと思うtips僕がAndroid開発する時にちょっと便利だと思うtips
僕がAndroid開発する時にちょっと便利だと思うtips
 
Python for Data Analysis第1回勉強会(+git入門)
Python for Data Analysis第1回勉強会(+git入門)Python for Data Analysis第1回勉強会(+git入門)
Python for Data Analysis第1回勉強会(+git入門)
 
gitを使って、レポジトリの一部抽出forkしてみました
gitを使って、レポジトリの一部抽出forkしてみましたgitを使って、レポジトリの一部抽出forkしてみました
gitを使って、レポジトリの一部抽出forkしてみました
 
Gitを使いこなしてみよう!
Gitを使いこなしてみよう!Gitを使いこなしてみよう!
Gitを使いこなしてみよう!
 
Github of project
Github of projectGithub of project
Github of project
 
Shizudev git hub宿題
Shizudev git hub宿題Shizudev git hub宿題
Shizudev git hub宿題
 
WindowsでGitを使う際のベストプラクティス
WindowsでGitを使う際のベストプラクティスWindowsでGitを使う際のベストプラクティス
WindowsでGitを使う際のベストプラクティス
 
GitHub勉強会
GitHub勉強会GitHub勉強会
GitHub勉強会
 
Git_GiHub講習会.pdf
Git_GiHub講習会.pdfGit_GiHub講習会.pdf
Git_GiHub講習会.pdf
 
デザイナー、フロントエンジニア向けgithub勉強会ワークショップ資料
デザイナー、フロントエンジニア向けgithub勉強会ワークショップ資料デザイナー、フロントエンジニア向けgithub勉強会ワークショップ資料
デザイナー、フロントエンジニア向けgithub勉強会ワークショップ資料
 
今日から始めるGithub
今日から始めるGithub今日から始めるGithub
今日から始めるGithub
 
201806 hugo で静的サイト作ってみた
201806 hugo で静的サイト作ってみた201806 hugo で静的サイト作ってみた
201806 hugo で静的サイト作ってみた
 
バージョン管理
バージョン管理バージョン管理
バージョン管理
 
Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会
Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会
Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会
 
初心者がGoでCLIツール作ってみて学んだこと
初心者がGoでCLIツール作ってみて学んだこと初心者がGoでCLIツール作ってみて学んだこと
初心者がGoでCLIツール作ってみて学んだこと
 

Mehr von Takuya Nozu

いきいきの輪2020
いきいきの輪2020いきいきの輪2020
いきいきの輪2020Takuya Nozu
 
デジタル回覧板 for こどもの居場所づくり
デジタル回覧板 for こどもの居場所づくりデジタル回覧板 for こどもの居場所づくり
デジタル回覧板 for こどもの居場所づくりTakuya Nozu
 
Presentation for garbage_Platform in Philippines.
Presentation for garbage_Platform in Philippines.Presentation for garbage_Platform in Philippines.
Presentation for garbage_Platform in Philippines.Takuya Nozu
 
学び舎Go 2017
学び舎Go 2017学び舎Go 2017
学び舎Go 2017Takuya Nozu
 
IKOMA Civic techaward2017 気づきeye
IKOMA Civic techaward2017 気づきeyeIKOMA Civic techaward2017 気づきeye
IKOMA Civic techaward2017 気づきeyeTakuya Nozu
 
2016年 地域密着型本お薦めアプリ「なによも」
2016年 地域密着型本お薦めアプリ「なによも」2016年 地域密着型本お薦めアプリ「なによも」
2016年 地域密着型本お薦めアプリ「なによも」Takuya Nozu
 
20160911 code4lib 図書館アプリなによもプレゼン
20160911 code4lib 図書館アプリなによもプレゼン20160911 code4lib 図書館アプリなによもプレゼン
20160911 code4lib 図書館アプリなによもプレゼンTakuya Nozu
 

Mehr von Takuya Nozu (7)

いきいきの輪2020
いきいきの輪2020いきいきの輪2020
いきいきの輪2020
 
デジタル回覧板 for こどもの居場所づくり
デジタル回覧板 for こどもの居場所づくりデジタル回覧板 for こどもの居場所づくり
デジタル回覧板 for こどもの居場所づくり
 
Presentation for garbage_Platform in Philippines.
Presentation for garbage_Platform in Philippines.Presentation for garbage_Platform in Philippines.
Presentation for garbage_Platform in Philippines.
 
学び舎Go 2017
学び舎Go 2017学び舎Go 2017
学び舎Go 2017
 
IKOMA Civic techaward2017 気づきeye
IKOMA Civic techaward2017 気づきeyeIKOMA Civic techaward2017 気づきeye
IKOMA Civic techaward2017 気づきeye
 
2016年 地域密着型本お薦めアプリ「なによも」
2016年 地域密着型本お薦めアプリ「なによも」2016年 地域密着型本お薦めアプリ「なによも」
2016年 地域密着型本お薦めアプリ「なによも」
 
20160911 code4lib 図書館アプリなによもプレゼン
20160911 code4lib 図書館アプリなによもプレゼン20160911 code4lib 図書館アプリなによもプレゼン
20160911 code4lib 図書館アプリなによもプレゼン
 

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