Suche senden
Hochladen
githubでHP作ってみよ 2019/02/16 by CODE for IKOMA
•
0 gefällt mir
•
468 views
T
Takuya Nozu
Folgen
git/githubの始めの第一歩。 単にコマンド練習しても面白くないので静的ページのホームページを作ってみよう!
Weniger lesen
Mehr lesen
Bildung
Melden
Teilen
Melden
Teilen
1 von 15
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
GitとGitHubによる chordのバージョン管理 for バンドマン
GitとGitHubによる chordのバージョン管理 for バンドマン
Ryu Seino
MicroPythonで作る人工生命っぽい何か
MicroPythonで作る人工生命っぽい何か
Makoto Koike
[PyConJP2019]Pythonで切り開く新しい農業
[PyConJP2019]Pythonで切り開く新しい農業
Makoto Koike
Git for Begineers GitHub ハンズオン
Git for Begineers GitHub ハンズオン
Emma Haruka Iwao
git addの解説
git addの解説
Kamimura Taichi
Beginning comfortable documentation with jenkins and doxygen ( public )
Beginning comfortable documentation with jenkins and doxygen ( public )
Hidenori Matsuki
2015/07/11 第7回G-Study発表資料-ITエンジニアのためのDTM入門
2015/07/11 第7回G-Study発表資料-ITエンジニアのためのDTM入門
Yuta Hayakawa
私が複数人開発で感じている Git・GitHubのうまみ
私が複数人開発で感じている Git・GitHubのうまみ
Shihomi Katayama
Weitere ähnliche Inhalte
Was ist angesagt?
E zuka-teck2019-7-11 LT
E zuka-teck2019-7-11 LT
Yuisho Takafuji
Ultra piet
Ultra piet
京大 マイコンクラブ
空室検索 Map
空室検索 Map
Tsutomu Ogasawara
底辺webプログラマが今更git語ってみた
底辺webプログラマが今更git語ってみた
Yudai Fujita
ojag20120519
ojag20120519
YAMANE Toshiaki
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
Yumi uniq Ishizaki
Osakapy 20140313 lt
Osakapy 20140313 lt
Hattori Hideo
プロ生ちゃんbotを作ろう!
プロ生ちゃんbotを作ろう!
treby
ARLT_20_あなたの知らないGitHub
ARLT_20_あなたの知らないGitHub
arcircle tmu
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を君達はまだ知らない。
Yuta Hayakawa
2ヶ月前にgitを始めた私からこれから始める皆さんへ
2ヶ月前にgitを始めた私からこれから始める皆さんへ
Ayana Yokota
Was ist angesagt?
(12)
E zuka-teck2019-7-11 LT
E zuka-teck2019-7-11 LT
Ultra piet
Ultra piet
空室検索 Map
空室検索 Map
底辺webプログラマが今更git語ってみた
底辺webプログラマが今更git語ってみた
ojag20120519
ojag20120519
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
Pythonと出会ったデザイナーの話 #PyLadiesTokyo
Osakapy 20140313 lt
Osakapy 20140313 lt
プロ生ちゃんbotを作ろう!
プロ生ちゃんbotを作ろう!
ARLT_20_あなたの知らないGitHub
ARLT_20_あなたの知らない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を君達はまだ知らない。
2ヶ月前にgitを始めた私からこれから始める皆さんへ
2ヶ月前にgitを始めた私からこれから始める皆さんへ
Ähnlich wie githubでHP作ってみよ 2019/02/16 by CODE for IKOMA
Yapc2012資料
Yapc2012資料
matsuo kenji
Github時代のgitのはなし
Github時代のgitのはなし
Yoichi Toyota
@s_ssk13さん向けGitHub入門
@s_ssk13さん向けGitHub入門
Takashi Imagire
オープンセミナー香川2012 LT
オープンセミナー香川2012 LT
Kouta Imanaka
Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117
Tetsuya Sato
僕がAndroid開発する時にちょっと便利だと思うtips
僕がAndroid開発する時にちょっと便利だと思うtips
Masataka Kono
Python for Data Analysis第1回勉強会(+git入門)
Python for Data Analysis第1回勉強会(+git入門)
Makoto Kawano
gitを使って、レポジトリの一部抽出forkしてみました
gitを使って、レポジトリの一部抽出forkしてみました
Takako Miyagawa
Gitを使いこなしてみよう!
Gitを使いこなしてみよう!
Hiroshi Maekawa
Github of project
Github of project
Ito Kunihiko
Shizudev git hub宿題
Shizudev git hub宿題
Tadahiro Ishisaka
WindowsでGitを使う際のベストプラクティス
WindowsでGitを使う際のベストプラクティス
Ryo Sumasu
GitHub勉強会
GitHub勉強会
ArusuDev
Git_GiHub講習会.pdf
Git_GiHub講習会.pdf
Takara Ishimoto
デザイナー、フロントエンジニア向けgithub勉強会ワークショップ資料
デザイナー、フロントエンジニア向けgithub勉強会ワークショップ資料
ichikaway
今日から始めるGithub
今日から始めるGithub
lion-man
201806 hugo で静的サイト作ってみた
201806 hugo で静的サイト作ってみた
junichim
バージョン管理
バージョン管理
Misa Kondo
Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会
Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会
Katz Ueno
初心者がGoでCLIツール作ってみて学んだこと
初心者がGoでCLIツール作ってみて学んだこと
Yuta Ohashi
Ähnlich wie githubでHP作ってみよ 2019/02/16 by CODE for IKOMA
(20)
Yapc2012資料
Yapc2012資料
Github時代のgitのはなし
Github時代のgitのはなし
@s_ssk13さん向けGitHub入門
@s_ssk13さん向けGitHub入門
オープンセミナー香川2012 LT
オープンセミナー香川2012 LT
Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117
僕がAndroid開発する時にちょっと便利だと思うtips
僕がAndroid開発する時にちょっと便利だと思うtips
Python for Data Analysis第1回勉強会(+git入門)
Python for Data Analysis第1回勉強会(+git入門)
gitを使って、レポジトリの一部抽出forkしてみました
gitを使って、レポジトリの一部抽出forkしてみました
Gitを使いこなしてみよう!
Gitを使いこなしてみよう!
Github of project
Github of project
Shizudev git hub宿題
Shizudev git hub宿題
WindowsでGitを使う際のベストプラクティス
WindowsでGitを使う際のベストプラクティス
GitHub勉強会
GitHub勉強会
Git_GiHub講習会.pdf
Git_GiHub講習会.pdf
デザイナー、フロントエンジニア向けgithub勉強会ワークショップ資料
デザイナー、フロントエンジニア向けgithub勉強会ワークショップ資料
今日から始めるGithub
今日から始めるGithub
201806 hugo で静的サイト作ってみた
201806 hugo で静的サイト作ってみた
バージョン管理
バージョン管理
Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会
Git & GitHub を使いこなしてハッピーになろう! - WordBench 名古屋 & concrete5 名古屋 合同勉強会
初心者がGoでCLIツール作ってみて学んだこと
初心者がGoでCLIツール作ってみて学んだこと
Mehr von Takuya Nozu
いきいきの輪2020
いきいきの輪2020
Takuya Nozu
デジタル回覧板 for こどもの居場所づくり
デジタル回覧板 for こどもの居場所づくり
Takuya Nozu
Presentation for garbage_Platform in Philippines.
Presentation for garbage_Platform in Philippines.
Takuya Nozu
学び舎Go 2017
学び舎Go 2017
Takuya Nozu
IKOMA Civic techaward2017 気づきeye
IKOMA Civic techaward2017 気づきeye
Takuya Nozu
2016年 地域密着型本お薦めアプリ「なによも」
2016年 地域密着型本お薦めアプリ「なによも」
Takuya Nozu
20160911 code4lib 図書館アプリなによもプレゼン
20160911 code4lib 図書館アプリなによもプレゼン
Takuya Nozu
Mehr von Takuya Nozu
(7)
いきいきの輪2020
いきいきの輪2020
デジタル回覧板 for こどもの居場所づくり
デジタル回覧板 for こどもの居場所づくり
Presentation for garbage_Platform in Philippines.
Presentation for garbage_Platform in Philippines.
学び舎Go 2017
学び舎Go 2017
IKOMA Civic techaward2017 気づきeye
IKOMA Civic techaward2017 気づきeye
2016年 地域密着型本お薦めアプリ「なによも」
2016年 地域密着型本お薦めアプリ「なによも」
20160911 code4lib 図書館アプリなによもプレゼン
20160911 code4lib 図書館アプリなによもプレゼン
githubでHP作ってみよ 2019/02/16 by CODE for IKOMA
1.
でHP作ってみよ のづたくや
2.
今日の対象者 ギット(Git) ?
ギットハブ(Github)? 聞いた事もないやー デザイン分野でも使えるって聞いたけど触った事ないやー エンジニアは教える係に強制任命。途中で交代予定 今日は流行りのgit/githubの雰囲気さえわかってもらえればいいよ。 最初の第一歩! こむずかしい余計なことはやらないよ。 ゴールまで一直線!
3.
今日のゴール サンプルとしてこんなシンプルなHPを作ってみよう 30分目標 だよ。 https://code4ikoma.github.io/static_page_test1/index.html こむずかしい余計なことはやらないよ。 ゴールまで一直線!
4.
全体の流れ ■Githubというサーバー準備 ①githubアカウント作成 ②github上にHP用フォルダ作成(リポジトリ) ■sourcetreeというPCソフト準備 ③sourcetreeソフトをPCにインストール ④sourcetree用アカウント作成 ■sourcetreeでHPデータ入力 & githubへアップロード ⑤サンプルhtmlをコミット、プッシュ ■HP公開 ⑥githubにて公開設定ボタン押下 これだけ~
5.
■github利用準備 ①githubアカウントを作ろう https://github.com/ ※メールアドレス認証がありますので今ここで使えるメアド登録要 ②github上にHP用フォルダ作成 右上の +ボタン押下 →[New repository]選択 →Repository
nameの欄にフォルダ名入力 例:hp_test1 →SSHボタン押下して横の文字列をコピー →テキストファイルに書き出しておこう Github上のフォルダの事 をリポジトリと言うよ。 難しいね
6.
■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
7.
■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指定 かんたん
8.
■sourcetreeにHPデータ入力 #2 ⑤アップロードファイル選択&処理 左下の作業ツリーのファイル欄にファイルが表示された →「全てインデックスに追加」ボタン押下 →上の「Indexにステージしたファイル」にファイルが移った →下の欄にコメント入れる →右下の「コミット」ボタン押下 →準備完了!後はgithubサーバーにアップロードするのみ! 言葉が難しいけど、 呪文と思えば大丈夫! 次はサーバーにアップ ロードするための設定を しよう。ちょっと難しい よ <参考> https://eng-entrance.com/sourcetree-use
9.
■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
10.
■sourcetreeにHPデータ入力 #4 ⑤ SSH
pagent起動してid_rsa.ppk登録 Windowsのタスクバーに特定のアイコンダブルクリックして id_rsa.ppk登録 ※参照 見ないと多分わからない https://www.granfairs.com/blog/cto/set-ssh-to-backlog 言葉が難しいけど、 呪文と思えば大丈夫!
11.
■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
12.
■sourcetreeにHPデータ入力 #6 ⑤sourcetreeにリモートリポジトリ設定 「リポジトリ」→「リポジトリ設定」 →「リモート」→「追加」 →githubの6頁前のSSHのURLを張り付け 例:git@github.com:名前/hp_test1.git 言葉が難しいけど、 呪文と思えば大丈夫! https://qiita.com/githu b129/items/b23a24a aa359a0f8eba7
13.
■sourcetreeにHPデータ入力 #7 ⑤sourcetreeで「プッシュ」ボタン押下 →「サーバ”github.com”のキーはキャッシュに。。。 (略)サーバーのキーを受け入れてやり直しますか?」表示 →「はい」 あとちょっと! <参考> 説明ちょっと難しい。。。 https://qiita.com/github129/items/b23a24aaa359a0f8eba7
14.
■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
15.
■おわり 言葉が難しいね。 何回も言ったけど呪文と思って、目を つぶってやればできるよ。 あとは、p8とp13を行うだけでHP を変更できるのでやってみよう。 変更したページを今日のイベントペー ジに投稿よろしく!! https://www.facebook.com/even ts/2010017965968195/?activ e_tab=discussion 30分でできたかな? 複数人で一緒に作業すると 楽しいよ
Jetzt herunterladen