【GitHubの使い方入門】GitHub Pagesを使って世界中にサイトを公開しよう！アウトプットこそ学びだ！
Vložit
- čas přidán 20. 01. 2020
- 文系プログラミング未経験 → Yahoo! JAPANエンジニア → 起業家
🚀 今日のひとこと
GitHubは初心者のうちは正直難しいです。
入門段階から全部を覚えようとすると挫折するので、
まずはGitHub Pagesを使ってサイトを公開する方法を学びましょう！
アウトプットすることでモチベーションが上がります。
GitHubの使い方はこれからもコツコツ動画で教えていきます！
🔥この動画だけは見よ！
プログラミング言語のオススメはJavaScript！
初心者にも易しい難易度で将来性も抜群！入門向き！
• プログラミング言語のオススメはJava...
【プログラミング講座】
HTML、CSS，JavaScriptの関係性を解説！
エンジニア初心者や入門者にオススメ！
• 【プログラミング講座】HTML、CSS，Ja...
👨💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: / shimabu_it
Instagram: / shimabu_it
🏷️ タグ
#プログラミング講座 #プログラミング入門 #GitHub - Jak na to + styl
まだ文字小さいですかね〜・・・今後もいろいろ改善していきたいので改善ポイントあれば教えてください！
またプログラミングはアウトプットが大事です。最初は恥ずかしいかもしれませんが、最終的に自分のポートフォリオにもなりますので、どんどんアウトプットしていきましょう！！
この動画の通りやりましたが、unityゲームをプレイ出来ませんでした。unityでは無理なんでしょうか？ブラウザにはunityのロゴが表示されるだけで何も読み込まれません
7:01~ master branch というものが「main」という名前に10月あたりで変更されてますので、mainをえらべばOK
ありがとうございます！助かりました！
神コメを伸ばせ！
ありがとうございます。ちょっとわからなくて困ってました
ITとは関係の無い仕事をしていますが、プログラミングに興味があって覚えていきたいので感謝です！
無料でここまでわかりやすく教えてくれるのはありがたい。
GitHubを使ってみようと1時間くらい記事を読みながらチャレンジしていたのですが、全然思うように使えませんでした。
この動画のおかげでできなかったことができるようになりました。ありがとうございます！
無事にアップロードできました。
非常にわかりやすかったです。
ありがとうございます。
こういう動画とても助かります。
アップロードできました。わかりやすい解説をありがとうございます。
しまぶーさんの説明本当に分かりやすかったです、github使い慣れたいと思ってたので助かりました。
GitHubの活用方法、とてもわかりやすかったです😊
ありがとうございます！
めっちゃ勉強しないとできないと思っていたポートフォリオサイトを実現することができました！！！
現在githubで困ってたところ、ホントに助かりました。gitは色んな方向から色んなやり方があってわけがわかりません笑
またgitの動画をお願いします！
github登録はしていましたが、いまいちよく分かっていなかったです。
端的に説明してもらえたので活用できそうです。感謝：）
この回自分にとって神回となりました。
調べてもいまいちわからず（調べ方が下手？）投げてたのが解決してしまいました。
これでWEBサイト公開できるというのは知らなかったです。
GitHub Pagesはサクッと公開できるので便利ですよね！PHPとかRubyとかを使った動的なサイトはできませんが、フロントエンド系のものだったらGitHub Pagesは向いています！
他にも似たようなサービスではNetlifyとかZEIT Nowとかがあって、そちらもいつか紹介したいなーと思っています😊
webサイト公開できました。ありがとうございます。
いやー、歯切れも良いしわかりやすかったですよ~。
説明がわかりやすく、話し方が聞き取りやすかったので、さっそくチャンネル登録させていただきました✨☺️
今後も動画楽しみにしてます♬
ありがとうございます！
今後も有益な動画をたくさん出していきます！✨
これはありがたい...
本当にわかりやすくて有難いです。
情報ありがとうございます😸
公開したいーー！
こんな風に公開するんだなぁ🤔
すごくわかり易かったです! Github使い始めなので、ありがたいです。
今、READMEづくりに苦戦しているので、ぜひ動画作ってもらいたいです。特にinstallation とset upをどう説明するのか教えてもらえたらありがたいです
いつもわかりやすい説明参考にさせてもらってます！画像や動画が添付されていないページの公開の仕方は分かりました！画像とか動画が含まれている場合はどこに保存するとしっかり公開したweb上に反映されるのか知りたいです！
いつも参考にしてます。
ターミナルの解説もお願いします！！
ターミナル解説はめちゃくちゃ教えることが多すぎて骨が折れそうですね。最低限のことは伝えたいなとは思っています！
ちなみにiTerm派です！Macの標準ターミナルよりオススメです！
いつもわかりやすい動画ありがとうございます。
4:44あたりのファイルを上げる部分で、ファイルのアップロードが出来ませんでした。
作成したアプリを何度動かしてもだめです。
何が原因でしょうか？
初めまして！非常に参考になる動画ありがとうございます！
公開するにあたって"Edit"というボタンがなかったのですが、似たようなフォームが"About"というところにありましたので、こちらにリンクを張り付けて編集しました。
この手順で問題ないでしょうか。
どのみちリンクは見れるので正直どうでもいいかと思いますが、同じようなこと思った方がいたら。。。と思い質問させていただきました！
続編を早くお願いします。
はじめまして。
わかりやすい動画ありがとうございます。
gitがなかなか使えず苦労している一人です。
この動画でようやく作成したものを公開することが出来きました。
参考動画として、自分のブログにリンクを貼ってもよろしいでしょうか？
Github英語ばっかでよくわからないのでもっと関連動画上げて欲しいです！
リクエストありがとうございますー！GitHubはかなり難しいのでなかなか骨が折れますが、後々本気で講座を作る予定です。必ず講座にはしたいと思っているので、もう少しお待ちいただければと思います🙇♂️
とてもわかりやすい動画をありがとうございます！
一つ質問なのですが、動画の通りやったところ、CSSが読み込まれません。自分なりにいろいろ調べたのですが、解決できませんでした。
解決策あれば、ご教授頂けないでしょうか？
cssファイルは読み込めませんでしたが、HTMLファイルに直接styleタグで書き込む方法で解決できました！cssファイルが読み込まれないないのが何故かは分からずじまいですが…
リポジトリ名の右にPrivateと表示され、マスターブランチに設定できないのですが、対処方法を教えていただけませんか？privateからpublicに変更するために、Make this repository publicに、レポジトリ名を入力しても変更されなくて困ってます。よろしくお願いします。
質問です。
リモートリポジトリにはアップできたのですが、imgが反映されないです。
その場合の対処はどのようにしたらいいでしょうか。
島ブーさんと同じやり方でやってみたのですが、ページが表示されません、、、
私がwindiwsユーザーが原因なのかはわかりませんが、しまぶーさんの画面ではmaster branch となっているのですが、私の画面にはbranch: masterと表示されたりなど、githubにかかれているものが微妙に違うところがあります。なにか解決法があればご回答よろしくお願いします
毎回、勉強させて頂いています。とても詳しく分りやすい説明ですごく助かっています。
動画では、GitHubにHTML、CSS、JSのファイルをアップされてますが、画像ファイルが複数ある場合も
同じようにアップしていいのでしょうか？
コメントありがとうございます！嬉しいです😊
はい！同じように画像ファイルを複数アップしても問題ないですよ！👍
@@shimabu_it
早速のご回答、ありがとうございます。
すみません、もうひとつ お願いします。
GitHubにアップする際に動画では同じ階層のファイルを３つアップされていますが、
違う階層のファイルをアップするにはどうしたらいいのでしょうか？
例えば、同じ階層にあるHTMLやCSSのファイルと別のフォルダーにある複数の画像ファイルを
一緒にアップする場合です。
7:06 master brunchが表示にならないのですが対処法などありますか？
Windowsを使っているのですかMacと違うのでしょうか…
容量が２５MB以上使っているvideoタグを使用しており、インストールできないのですが、何か方法はありますか？
22卒で、アプリ開発かweb開発の会社を考えています。ポートフォリオを見せるのに、GitHubだけで通用しますか？
すきよ＝
6:51 GitHub PagesってUpgradeプランになりました？(2021年1月時点)
すみません。このやり方でやると、"404"が出てきてしまうのですが、これは、どうしたらいいんですか？
404 のエラーがでてしまうのですが、同じ現象が起きたかたで、解決した人がいたら教えてください！
とてもわかりやすかったです。
画像のほうが反映されません。
どうしたらよいでしょうか。
ありがとうございます！
おそらくパスがあっていないのが原因だと思いますが、
こちらGitHubのリンクの方をいただくことってできますか？
@@shimabu_it
申し訳ごさいません！
解決しました！
@@user-nx5tv1yv9y おお、解決されたようで良かったです！自己解決が最も学びになりますからね！ナイスです👍👍
cssが適用されませんどうしたらいいでしょうか...
index.htmlでしか作成はできないのでしょうか？それ以外だと作成できません・・・
分かりやすいご説明ありがとうございます。いつも動画拝見させていただいてます。
この動画を見ながら、作成したwebサイトをはじめてgithubにアップしたのですが、master branchを選択すると何やらよく分からないエラーが出てしまいます。直後に届いたメールには、
The page build failed for the `master` branch with the following error:
Unable to build page. Please try again later.
と記載されています。一体何が原因なのでしょうか。ちなみに、作成したファイルにエラーがあるのかと思い、確認してみたのですが、特に見つかりませんでした。
解決できました。
画像データの拡張子の部分でjpgをJPGと入力していたのが原因だったようです。ローカルでは普通に表示されていたので気づきませんでした…。
うおー返信が遅れてしまって申し訳ございません。
早々に自己解決されたようで良かったです。特に分かりにくそうなエラーですが、よく気づかれましたね。そういう問題解決力がプログラミングでは活きるので、今後エラー出てもバンバン解決していきましょう😊
画像が反映されないのですが、原因は何かわかりますか？
先日しまぶーさんの動画を見て今週からプログラミングを始めた者です！
Git Hub Pages のsourceにmaster branchがなく、mainとnoneの選択肢しかありません…。
どのようにしたらmaster branchが出てくるのでしょうか…？
僕も出てきません。。しまぶーさん教えて下さい🙇♂️
たいへん遅くなり申し訳ございません！
最近GitHubのデフォルトブランチがmasterからmainに変更されました。なのでそのままmainで進めちゃってOKです。詳しくはTwitter上でもやり取りしているので下記を参考にしていただけると！
twitter.com/masaheroblog/status/1312866994195034114
しまぶーのIT大学 お忙しい所ご返事ありがとうございます‼︎
確認します！！
@@isseyinstablog8514 お互い頑張りましょう！！
変更した時の変更内容の書き方がわかりません〜
右上の緑のボタンnewが無いです。クロムでもエッジでも見つからなかった。
vs codeを使っているのですが404エラーが出たり画像が表示されなかったりしてしまって
同じやり方でやっているのですが何か思い当たる解決方法ありますか？
色々調べているのですが全然だめで心がおれそうです...
解決出来ていたら申し訳ございません。
コメント欄をもう少し下にスクロールすると解決方法載っていますよっ！私はそれで解決しました！
Yahooとかの大手ってめちゃんこ頭良い大学を出てないといくらプログラミング得意でも厳しい感じですか？
一切そんなことはありませんよ。私の同期に、偏差値30〜40の大学卒、高専出身、専門学校出身の方がいます。むしろ学歴に関しては他社と比べてもゆるい方だと思います。
最後に公開するときのgithub PagesがUIの変更でみつからなかったのですがどのようにアップロードしたらよいのか教えていただきたいです。。！！；；
動画ありがとうございます。
質問なのですが、現在のGitHubの設定画面に、GitHub Pagesというのがありません…
自分の作ったサイトのURLをどのようにしたら取得できますか？
教えていただければ幸いです。m(_ _)m
今は結構UIが変わっているかもですね🥲
少し分かりづらいかと思われますが、公式ドキュメントや、もしくは検索して出てきた最新の記事などを参考に進めていただけますと幸いです🙏
docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site
@@shimabu_it ありがとうございます！やってみます！
先生の説明されていた画面とは違うので、戸惑っていました…
わかりやすい動画を作って頂きありがとうございます。
これからも参考にさせて頂きます！！
あれ、マインブランチが出てこない
誰かわかる方いらっしゃるでしょうか...
CSSとhtmlと画像入れて、しまぶーさんの動画の通りにやってもエラー404のせいで表示ができないです、、
自分も表示ができなかったのでいろいろ試した結果、表示ができました。
試したのは２つで
①最初の階層に全てのデータが入ったファイルを入れてしまっていた。
→これを「index.html」が最初の階層に来るようにアップを変えました
②一度上げた後に再度「index.html」のファイルをアップ
→①で解決しない時はなぜかmasterbranchに変更後に「index.html」のファイルをアップすると解決しました。
※masterbranchに変更後にアップをすると「 Commit directly to the master branch.」という選択肢が増えているのでそれ選んでアップすると表示ができました。
どこかの記事をみたというよりは完全に独自でやっただけなのでできなかったらすいません（笑）
どいまる 自分の場合はindex.mdにしたら治りました！！
@@kaeru_no_channel そんな方法もあるんですね！試してみます、ありがとうございます！
リポジトリを公開しないとgithub pagesの設定画面は出てこないですか？ 身バレは大丈夫ですか？
こちらmastar branchが表示されないのですが、原因はわかりますか？
今はGitHubの仕様が変わってmainになっているかもです！
master→mainとお考えください！
ありがとうございます！メイン→ルートで大丈夫ですかね？また友人にこのLPをお渡ししたいのですが、GitHubのこの作ったページをお渡ししても大丈夫だと思いますか？zipファイルでお渡ししようと思ったら、解凍できませんでした。
ええ、公開できないです。。生成されたURLを踏んでも404と出ます。。
リモートリポジトリに追加したファイルを削除する方法はありますか？（ファイルそのものじゃなくてリモートリポジトリにアップロードしたファイルを削除したい。）
ファイルを削除して再度コミット＆プッシュすると削除できるはずです！
@@shimabu_it ありがとうございます。
phpなどのサーバサイドの処理を使ったサイトは公開できない感じですかね、、、？
できないです！GitHub Pagesのヘルプには下記文言があります！
> GitHub Pages does not support server-side languages such as PHP, Ruby, or Python.
訳: GitHub Pagesは、PHP、Ruby、Pythonなどのサーバー側言語をサポートしていません。
GitHub Pages ヘルプ
help.github.com/en/github/working-with-github-pages/about-github-pages
@@shimabu_it Bootstrapはどうなんでしょうか？
@@user-nc2pp3or4i BootstrapはGitHub Pages内で使うことができますよ！CSSやJavaScriptを使うのには問題ありません！
デプロイ 6:41
6:52 のGitHub Pagesが見当たらないです。
今はSettingタブ→左サイドバーの「Pages」を押すとGitHub Pages がでてくるみたいです！
Cssが適用されない
ファイルをドラックしてアップロードしても404エラーになってしまうのはなぜ？？？
おや・・・何度やってもそうなりますか・・・？
私も原因がつかめないのですが、対応していないファイルをアップロードしているとかでしょうか。
動画とまったく同じようなファイルをアップロードしていますか？
@@shimabu_it 返信ありがとうございます🙇♂️雑な質問でしたので申し訳ないです。
しまぶーさんとの一番の違いはmaster branchを選択し取得した
リポジトリ名/で終わるリンクを同じように踏んでもうまく表示されないということです。
ke3.github.io/practice_2/
色々試した結果、リポジトリ名/text まで指定すると(text.htmlのtext)初めて正常に表示されました...。
なので一応は解決したのですが、しまぶーさんのようにtextまで指定せず表示させるにはどうしたら良いのかご教示頂きたいです。
cssが反映されないです...
うわー遅れちゃってごめんなさい😂おそらくCSSのパスが原因（ちゃんとlinkタグで読み込めていない）か、typo（ファイル名の打ち間違え）かと思うのですが、、、既に解決されましたか？？
しまぶーのIT大学 返信ありがとうございます！linkタグの修正と言われたのでネットで調べてできました。ありがとうございます！
おお、すごいです！ググっての解決が1番力になるので、その調子です😂解決できたようで良かったです✨
未だにSubversionとTortoiseSVNでレガシーしてます。いい加減、gitとgithubに移行せねば...
マスターブランチが何故か選択できなかった。。。
あら、masterブランチ自体が存在しないか確認していただいていいですか？下記でブランチ一覧を見ることができます！
github.com/自分のアカウント名/自分のリポジトリ名/branches
@@shimabu_it
Master という文字はありましたが、branchは無さそうです
github.com/自分のアカウント名/自分のリポジトリ名/branches
こちらに載っているものはすべてブランチなので、Masterというものがあればそれがブランチです。ちなみに最初の頭文字って大文字でしたか？おそらく小文字のｍasterと書いているものがあるかと思いますが、それがあれば、masterブランチがあるということになります。またそこに黒背景白文字でDefaultと書いてあるかどうかもチェックをお願いします。
上記があれば、おそらく動画通り、Settings→GitHub Pagesから「master branch」が選択できるはずなのですが...😥
@@shimabu_it
返信を下さりありがとうございます。
小文字のmasterはありますが、default はありません。(ページ内検索でもありません)
github.com/自分のアカウント名/自分のリポジトリ名/settings/branches
なるほどなるほど、そしたら今度は↑のページをご確認いただきたいのです。「The default branch is set to ○○○」とあるはずですが、この○○○の部分はmasterになっていますか？