自分で作ったウェブサイトをインターネットに公開して、誰でも見られるようにしたい！
そんなときに便利なのが GitHub（ギットハブ） です。
GitHubは世界中のエンジニアが使っているプログラムを管理するためのツール。初心者でも無料でウェブサイトを公開できる人気サービスとなっています。
この記事では、GitHubアカウントを作成し、自分で作ったウェブサイトを公開（デプロイ）する流れを紹介します。
おもちバイブコーディングで作ったプロフィールリンクページをデプロイしちゃおう！
GitHubとは
GitHubはプログラムやファイルの共有サービス
GitHub（ギットハブ）は、世界中のエンジニアやデザイナーが使っているプログラムやファイルの共有サービス（プログラムの置き場所）です。
自分が作ったものを保存して、チームや仲間と一緒に作業できる仕組みを持っています。
プログラム管理のためのツールですが、初心者でも自分のウェブページを無料で公開できるのが大きな魅力です。
GitHubがサーバー代わりになる理由
ウェブページをインターネットに公開するには、ファイルを置くサーバーが必要です。
サーバーは『インターネット上の土地』のようなイメージで、ここにファイルを置くことで誰でもアクセスできるようになります。
たとえばエックスサーバーは有料の本格的なサーバーサービスですが、GitHubは無料で始められ、サーバーのような役割も果たしてくれるのが特徴。
むずかしい専門知識や特別なスキルがなくても利用できるので、『まずは無料で試したい』という方にぴったりです。
GitHubを使うメリット
GitHubを使うメリットは次のとおり。
- 無料で始められる
- 利用者が多く情報が豊富
- 独自ドメインも設定可能
費用をかけずに、プロも使う本格的な環境でウェブページが公開できます。
他の無料サービスとの比較
GitHubと同じような無料サービスも紹介しておきます。
- Netlify：操作が簡単
- Vercel：ページの表示が速い
- Firebase Hosting：アプリ開発に便利
どれも良いサービスですが、初心者には少しハードルが高いかも。
GitHubなら利用者数が多く、日本語の情報やチュートリアルが豊富なので、困ったときすぐ解決策が見つかります。
おもち初心にぴったりなサービスなんだね！
デプロイの仕組みを知っておこう
ウェブサイトを公開することを『デプロイ』といいます。
仕組みはとってもシンプル。
- パソコンでウェブページを作る
- GitHubにアップロードする
- GitHubが自動でインターネットに公開する
たった3ステップで、あなたの作ったサイトが世界中の人に見てもらえるようになります。
GitHubでアカウント作成する方法
まずはGitHubをひらき、アカウントを作成していきましょう。
サイトがひらいたら、画面右上にある『Sign up』をクリック。
必要な情報を入力していきます。
すでに使われているユーザー名は使用できません。
すべて入力できたら『アカウントを作成する』ボタンをクリック。
アカウントが登録できました。
登録したメールアドレス宛に、コードが送られてくるので、確認していきましょう。
メールをひらくと、メッセージ内にコードが表示されているので、そちらをコピー。
GitHubにもどって、コードを貼り付けます。
そうすると、ログイン画面が表示されるので、メールアドレスとパスワードを入力。
入力できたら『Sign in』ボタンをクリック。
GitHubにログインできました。
おもちこれでアカウント作成はOK！
GitHubでウェブサイトを公開（デプロイ）する方法
GitHubでアカウントが作れたら、自作したウェブサイトをインターネットに公開していきましょう。
GitHubでリポジトリを作成しよう
画面左上にある『Create repository』ボタンをクリック。
新しいリポジトリページを作成していきましょう。
Repository nameに、ウェブページの内容を表す英単語を入力。
おもち今回はプロフィールリンクページを公開したいので『links』にしたよ！
Repository nameに『〇〇 is available.』と表示されたらOK。エラーメッセージが表示されたら、英単語をべつのものに変えてください。
ページを下にスクロールして、Choose visibilityが『Public』になっていることを確認。
べつの項目が選択されている場合は、下向き矢印をクリックして『Public』を選択してください。
確認できたら、画面右下にある『Create repository』ボタンをクリック。
リポジトリが作成できました。
リポジトリにファイルをアップロードしよう
画面中央にある『uploading an existing file.』をクリック。
『choose your files』をクリックして、ウェブページに使うコードや画像のファイルを選択していきましょう。
linksフォルダーにある『hero』『icon』『index』の３つのファイルを選択。
選択できたら画面右下にある『開く』ボタンをクリック。
データファイルがアップロードできました。
アップロードが終わったら、ページを下までスクロールして、画面左下にある『Commit changes』ボタンをクリック。
しばし待ちます。
これでリポジトリにファイルをアップロードできました。
ウェブサイトを公開（デプロイ）しよう
画面右上にある『Settings』をクリック。
Settingsページがひらきました。
画面左側のメニューにある『Pages』をクリック。
Pagesページがひらきました。
Sourceが『Deploy from a branch』になっていることを確認。
べつの項目が選択されている場合は、下向き矢印をクリックして『Deploy from a branch』に変更してください。
Branchで『None』が選択されている場合は、下向き矢印をクリック。
『main』を選択してください。
つづけて『root』が選択されていることを確認。
べつの項目が選択されている場合は、下向き矢印をクリックして『root』を選択してください。
『main』と『root』が選択できたら『Save』ボタンをクリック。
『GitHub Pages source saved』と表示されたらOK。反映されるまで、このまま数分ほど待ちます。
画面をリロードすると、URLが表示されるので、そちらをクリック。
自分が作ったウェブページが表示されたらOKです。
ページのURLをSNSのプロフィール欄に貼れば、誰でもこのページにアクセスできます。
おもち自分専用のURLを設定することもできるよ！
GitHubでよくあるつまずきポイント
ウェブサイトをデプロイするときのよくある失敗はつぎのとおり。
- ページが表示されない メインファイルの名前が『index.html』になっているか確認
- ページが見れない リポジトリの設定が『 Public』 になっているか確認
- 反映されない 数分待つ／ブラウザの更新ボタンを何度か押してみる
トラブルが起きてもあわてずに、上記のポイントをひとつずつ確認していきましょう。
まとめ｜ウェブサイトをGitHubで無料公開してみよう
GitHubを使い、自分で作ったウェブサイトをインターネットに公開する流れを紹介しました。
- GitHubは無料でウェブサイトを公開できる
- 利用者が多く、情報が豊富で安心
この記事では手動で公開（デプロイ）しましたが、Codexを使うと、変更を保存するだけで自動で公開できます。作業の手間が減り、更新ミスも防げるのでおすすめです。
GitHubでウェブサイトがデプロイできたら、自分専用のURLに切り替えていきましょう。
