前提

今年8月末にゼロからHTMLに取り組み始めた、正真正銘の初心者（！）です。きっかけは、黒澤さん（）によるウェビナー「YoshiTech 会津わろ法則」。黒澤さんの教えをもとに、学習を通して得たこと・学んだことをQiitaにアウトプットする取り組みを行っています。

今回のテーマ「自分でコードを書いたページを公開しました！」

というわけで今回なんですけども、さっそくこちらのページを見ていただけますか？

「最高齢ラッパー」として一部好事家から愛され続ける坂上弘（さかうえひろし）先生の「交通地獄」という名曲がありまして、その紹介ページを練習用に作ってみました。

坂上先生の超絶パフォーマンスについては、上記ページにもYouTubeへのリンクを張ってますので是非ご覧いただきたいのですが・・・

それはさておき（？）、初心者ながら思い切ってGitHubに登録し、なんとかGitHub Pagesへの公開までこぎつけることができました！

このページ自体は、Udemyの講座[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門のHTML/CSS編での課題をひな型として、自分なりのおふざけ（笑）も交えて作ってみたものです。

なお、ページ作成上の学習テーマとしては、フロート機能の習得を目指しました。また、2枚の画像をフェードイン・フェードアウトさせるアニメーションを、CSSを用いて作成するという冒険もしてみました。

（それにしても、公開したページを改めてスマホ経由で見てみると、レイアウトに改善の余地が大アリですね・・・新たな課題が出てきた！）

そもそも私は「GitHubのGの字も知らない」（ていうか読み方が「ジットハブ」か「ギットハブ」かいまだにピンときていない）レベルの初心者なんですが、それでも探り探りページの公開までたどり着けました。

そこで、自分用の振り返りも兼ねて、（初心者なりの）登録から公開までの手順をご紹介したいと思います。
（作業に当たっては「【初心者向け】GitHub Pagesを使ってHPを爆速で公開する」を参考にさせていただきました。ありがとうございます！）

まずは公式サイトでアカウントを作ります！（あたりまえ体操！）

アカウントを作ったら、次はそのまま公式サイト上で「リポジトリ」を作ります！

（と言いながら、「リポジトリ」とはいったい何なのか、実はいまだによくわかってません。。。公式サイトの指示通りにやっていたら、なんとなく流れで作れちゃいました）

さて、このあたりから初心者には難しくなってきます。

どうやら次は「リポジトリのクローン」という作業が必要らしいのですが、これがよくわからない・・・

GitBash？を使う方法も紹介されていたのですが、超絶初心者の私は「バッシュ？バスケットシューズ？あの娘ぼくがロングシュート決めたらどんな顔するだろう？」というような有様だったので、こちらは断念。

その代わり、今回私が利用したのは「GitHub Desktop」でした。

Windowsユーザーなので、こちらのページからWindows版をダウンロード＆インストール。

クローン？コミット？パブリッシュ？いやはや、自分で言っておきながらコトバの意味が分かっていません（汗）

にもかかわらず、偶然にも手順をわかりやすく説明したページが見つかったので、なんとかなりました！

そのページはこちらです。

英語のページですが、真ん中あたりにある「Using GitHub Desktop to PUSH to your local content to GitHub.」という項目に、画像付きの丁寧な説明があります。

英語が苦手でも、掲載されている画像を順番に見ていけば、作業の流れはなんとなく分かります。

公式サイトでレポジトリを作った後の画面に出てくる「Set up in Desktop」のボタンをクリックする
するとGitHub Desktopが開くので、そのまま「Clone」のボタンをクリックする
自動でPC上に（デフォルトではドキュメントフォルダ内）GitHubレポジトリのフォルダが作成される
いつもお世話になっているWindowsのエクスプローラを使って、GitHubレポジトリのフォルダの中に、公開したいページのファイル群（htmlファイル・CSSファイル・画像ファイルなど）をコピペする（※ページ公開後にリンク切れが起きないように、htmlファイル等のフォルダ構成はそのままにしておく）
GitHub Desktopに戻って、さきほどコピペしたファイルがちゃんと表示されているのを確認したら、添付メッセージ（入力必須となっています）を書いて、「Commit to master」のボタンをクリックする
最後に、GitHub Desktop上の「Publish branch」というボタンをクリックする

以上の手順をたどれば、作業はあらかた完了です！

ここまできたら、あとは自作ページがWeb上に公開されているのを確認するのみです。

ブラウザで「https://（ユーザー名）.github.io/（htmlファイル名）.html」にアクセスすれば、見事自分のページが表示される段取りになっています。

ただ、ここで若干もどかしいのが、「実際にWeb上へ反映されるまでは少し時間がかかる」という点です。

なお、GitHub Pagesへのアップロードが上手くいっているかどうかは、公式サイト上で確認をすることができます。

なお私の場合は、アップロードしたデータ量が極小だったのか、わりとすぐに公開してもらえました！

このように、GitHub自体はよくわからない私のような初心者でも、GitHub Pagesを用いた自作ページの公開は十分に可能です。

いや、むしろ初心者であればあるほど、自分で作ったページをWeb上で見ることの面白さは、他では代えがたいものがあるのではないでしょうか？

もしGitHub Pagesが気になっている初心者の方がいらっしゃったら、思い立ったが吉日と申します。エキサイティングな経験になること請け合いです！

最後まで読んでいただき、ありがとうございました！

前回・前々回の記事を、なんと黒澤さん（）がほめてくださっていました！（ツイッターではリアクションできず、申し訳ありません・・・）

とてもありがたいことです。
学習にいっそう身が入るというものです。

この勢いで、次回は「CSSのフロート機能を学習する際に考えたこと・気づいたこと」について、アウトプットしようと思います！