HTML/CSSの勉強のまとめとして制作した、架空のコスメサイト「Lumiere」。
今回は完成したサイトをGitHubにアップして、GitHub Pagesを使ってWeb上に公開してみました。
以前にも一度GitHubへのアップロードに挑戦したことがあるのですが正直なところ、
やり方はほとんど覚えていませんでした。
そのため、今回もChatGPTに教えてもらいながら進めていきました。
GitHubにアップしてみる
今回の目的は制作した「Lumiere」のファイルをGitHubにアップして、実際にWebサイトとして公開することです。
私はGitHubについて、まだまだ分からないことだらけ。
「ファイルをアップロードできているのか？」
「今どこを見れば、ちゃんとアップできていると分かるのか？」
「この画面には何が書いてあるんだろう？」
という状態でした。
GitHubには専門用語も多く、そもそも用語が分からないので、どこを見れば何が分かるのかすら分からないという感じでした。
そもそも「リポジトリ」って何？
今回、特に「これ何？」と思ったのがリポジトリという言葉です。
GitHubを使っていると何度も出てくる言葉なのですが、最初は意味がよく分かりませんでした。
GitHubを使うためには、まずこのような用語を少しずつ覚えていく必要がありそうです。
まだ「完全に理解した！」とは言えないので、これから実際に使いながら覚えていきたいと思います。
GitHub Desktopを使ってファイルをアップデート
今回はGitHub Desktopを使って、制作したサイトのファイルをアップデートしました。
以前にも一度やったことがあるはずなのですが、操作方法はほとんど覚えていませんでした。
そのため、今回も一つずつ確認しながら進めました。
やっていること自体は、
制作したファイルを用意する
↓
GitHub Desktopで変更を確認する
↓
変更を記録する
↓
GitHubへ送る
という流れです。
ただ、初めて触る人にとっては、用語や画面の意味が分からないので、それだけで少し難しく感じます。
GitHub Pagesでサイトを公開する
次に、GitHub Pagesを使ってサイトを公開しました。
ここまで進めると、制作したサイトにアクセスできる公開URLを作ることができます。
実際にURLを開いてみると……
ちゃんとLumiereが表示されました！
……とはいえ、
「なんかよく分からないけど公開できている。」
というのが正直な感想でした（笑）。
サイト自体はちゃんと表示されているのですが、
「なぜこれで公開できたのか？」
「今どこで公開されているのか？」
など、仕組みについてはまだまだ理解できていません。
GitHubで一番難しかったこと
今回、一番難しく感じたのは、操作そのものというよりも、
「今、自分が何をしているのか分からない」
ということでした。
HTMLやCSSなら、
「ここに文字を書く」
「ここに画像を入れる」
「このCSSを指定する」
など、コードを書いた結果が目に見えます。
一方でGitHubは、
「このボタンを押したけど、何が起きたの？」
という状態になりやすく、最初はかなり戸惑いました。
特に、用語が分からない状態だと、画面を見ても何を確認すればいいのか分かりません。
2回目の挑戦で分かったこと
今回が2回目のGitHubへの挑戦でしたが、前回と比べて大きな変化がありました。
それは、
一人でできる自信はまだないけれど、全体の流れは分かるようになった
ということです。
以前は「GitHubって何だかよく分からないし、難しそう……」という気持ちが強く、正直、GitHubをやること自体が少し億劫でした。
でも今回もう一度やってみて、
「何回か繰り返せば、できるようになりそう」
と思えるようになりました。
感覚としては、あと4〜5回くらい同じことを繰り返せば、公開URLを作るところまでは一人でもできそうな気がします。
実際にやってみて思ったこと
GitHubは、難しい機能を使いこなさなければいけないというより、
「この機能は何をするものなのか？」
を理解することが大切なのかなと思いました。
何も知らない状態で画面を見ると、専門用語も多く、少し難易度が高く感じます。
でも、
「リポジトリは何をするもの？」
「Commitって何？」
「Pushって何？」
「GitHub Pagesは何のために使う？」
というように、一つずつ意味を覚えていけば、少しずつ分かるようになりそうです。
まだまだ勉強中ですが、今回実際に触ってみたことで、以前よりも苦手意識は減りました。
まとめ
今回は、HTML/CSSで制作した架空サイト「Lumiere」をGitHubにアップし、GitHub Pagesを使ってWeb上に公開してみました。
まだ一人で最初から最後までできるわけではありません。
それでも、
「何をしているのか全く分からない」
という状態から、
「だいたいこの流れでサイトを公開するんだな」
というところまでは進めました。
実際にやってみて感じたのは、GitHubは何も知らない初心者には少し難しく感じるけれど、使う回数を重ねて、それぞれの機能の意味を覚えていけば、少しずつ慣れていけそうだということ。
これで、HTML/CSSの勉強を始めてから、
勉強する
↓
架空サイトを制作する
↓
GitHubにアップする
↓
Web上に公開する
ところまで、一通り経験することができました。
ここで一旦HTML/CSSの勉強に区切りをつけて、次はJavaScriptの勉強に進みたいと思います。
まだまだ分からないことだらけですが、実際に作って、分からないところを調べて、また作って……を繰り返しながら、少しずつできることを増やしていきたいです。
