More than 1 year has passed since last update.

プログラミング初心者がGitHub Pagesを使ってサイトを公開してみた

Posted at 2023-07-18

はじめに

今回はGitHub　Pagesを使って自分の作ったWebページの公開方法をわかりやすくまとめて記事にしようと思います。
私はGitHub Pagesの存在を今まで知りませんでした。今回の学習を通してGithub Pagesの公開方法を学習しました。そんな初心者でも簡単にサイトを公開する事ができる便利な機能を紹介していこうと思います！！

今回は、個人でVScodeでコーディングしたサイトをGithub Pagesを使って公開する方法を紹介します。
GitHubアカウントは既に登録済みを想定しています。

GitHub Pagesとは？？

GitHubから提供されている、静的サイトのホスティングサービスのことを言います。
静的サイトとは、ユーザー操作でページ内容が変わらないHTML.CSSなどでコーディングされたサイトのことです。
ユーザーの操作でページ内容が変化するサイトの公開はできません。
GitHubのアカウントを持っていれば無料で公開する事ができます。

GitHub Pagesの公開までの手順

リモートリポジトリを作成
リポジトリにファイルを追加
サイトを公開する

こんな感じの手順で進めて行きます。
そんなに手数は多くないです。
それでは、実際に説明しながら進めて行きたいと思います。

1. リモートリポジトリを作成

①　GitHubのリモートリポジトリを作成します。
Topページ右上の+ボタンから、New Repositoryを選択します。

② リポジトリ名を入力して、Publicでリポジトリを作成します。
※ 無料アカウントだとPublicアカウントしか公開できません。
リポジトリ名は基本的になんでも大丈夫ですが、ここで設定したリポジトリ名によってこの後に公開するWebページのURLが変わります。
「アカウント名.github.io」とした場合
公開URLは、https://アカウント名.github.ioとなります。
「それ以外の場合」
公開URLは、https://アカウント名.github.io/リポジトリ名となります。

今回はリポジトリ名をgithubpages_testとして作成して行きたいと思います。

リポジトリ名を入力して、Publicを選択してCreate repositoryを押して新しいリポジトリを作成する。

作成できたら次のような画面に切り替わります。

今回はVScodeで作成したコードを使っていきます。

ローカルリポジトリからプッシュしてファイルを追加する

ターミナルで

$ git init

$ git add .

$ git commit -m "githubpages_test"

$ git remote add origin git@github.com:kuuuuumiiiii/githubpages_test.git

$ git branch -M main

$ git push -u origin main

とコマンド操作してリモートリポジトリにローカルリポジトリのファイルをプッシュします。