GitHub公開手順まとめ!WebアップロードからDesktopでの画像追加まで解説①

こんにちは。AI副業チャレンジ中の中年オヤジです。

 

前回まではポートフォリオのデザインやコードを作ってきました。
今回は、そのポートフォリオGitHubで公開する手順を詳しくまとめます。
実際にやってみると、初めての方は用語や操作で迷うと思います。
なので、できるだけ丁寧に書いておきます。


GitHubのインストール

なぜかアカウントが作ってありました。
おそらく、以前プログラミングの勉強をしたときに作ったのだと思います。
もしまだアカウントを持っていない方は、GitHub公式サイトで作成しましょう。

スクリーンショット




GitHubにログインする

これは簡単です。
アカウント情報を入力してログイン。


③「New Repository」をクリック

リポジトリ=プロジェクトのようなものです。
最初、どこにあるか探しましたが、画面右上の「+」マークから作成できます。

スクリーンショット




④ 名前を付けて「Create repository」を押す

「Repository name」に好きな名前を入力。
**Public(公開)を選択します。
最後に一番下の
緑のボタン「Create Repository」**を押します。
これで、アップロードするための「箱」ができました。

スクリーンショット




⑤ ページを移動してアップロード準備

作成したリポジトリのページに移動します。

スクリーンショット




⑥「Add file」→「Upload files」をクリック

ここでファイルをドラッグ&ドロップしてアップロードします。
HTMLやCSSは問題なくアップできますが、画像など容量の大きいファイルはNGでした。
この時点ではテキストファイルだけアップロード。
最後に下の「Commit changes」を押すのを忘れないように!

スクリーンショット

スクリーンショット





リポジトリを公開

上部メニューの「Settings」を押します。

スクリーンショット




⑧ 左メニューから「Pages」を選択

スクリーンショット




⑨「Source」で main ブランチを選択

ここが少しややこしいポイントでした。
説明では「Saveを押す」とありましたが、Saveが表示されないこともあります。
でも、黒枠の中にURLが表示されていればOKです。
このURLが公開ページのアドレスです。

スクリーンショット




「Deploy from a branch」と「GitHub Actions」って何?

簡単にまとめると:

  • Deploy from a branch → 初心者はこれでOK(アップしたHTMLをそのまま公開)

  • GitHub Actions → 自動でビルドする仕組み(ReactやVueで便利)

私は意味を完全に理解していませんが、初心者は**「Deploy from a branch」一択**で問題ありません。


ここまででWebからの公開は完了!
でも、ここで画像や大きなファイルがアップできない問題にぶつかります。
ここからが第2部、GitHub Desktopの出番です!


小説「AIとおやじ」 小さな反応

ある日、ブログにコメントがついた。 「読みやすくて、共感しました。私も40代で挑戦中です」

田中は、スマホを握りしめたまま、しばらく動けなかった。 誰かが、自分の言葉に耳を傾けてくれた。 それは、何よりも強い“肯定”だった。

「俺のやってること、無駄じゃなかったんだ」 「誰かに届いた。それだけで、十分だ」

その夜、田中は初めてAIにこう言った。

「ありがとう。君がいなかったら、俺は何も始めてなかった」

AIは、いつも通りの口調でこう返した。

「こちらこそ、田中さんの言葉が私を動かしています」