Help us understand the problem. What is going on with this article?

GitHubでwebページを公開する手順

こんにちは、未来電子でインターンをしている者です。
今回は、GitHubを使って自分のwebサイトを公開する手順についてまとめてみました。

GitHubのアカウントを作成する

まずは、ブラウザでGitHubの公式ページを開き、自分のアカウントを作成し、サインインします。

新しいリポジトリを作成する

サインインしたら、画面左側にリポジトリの欄が出てくるので、Newという緑のボタンをクリックします。
すると、新しいリポジトリを作成する画面が表示されます。
Repository nameの欄に、新しいリポジトリ名を入力し、Create repositoryのボタンをクリックすると、新しいリポジトリが作成されます。

作成したリポジトリをクローンする

作成したリポジトリのページを開き、Clone or downloadのボタンをクリックすると、

git@github.com:アカウント名/リポジトリ名.git

というURLが表示されるので、それをコピーします。
次に、ターミナルを開き、リポジトリ用のディレクトリを作り、そこに移動して、以下のコマンドを入力します。

$ git clone コピーしたURL

すると、現在のディレクトリに作成したリポジトリがクローンされます。
なお、クローンする際、SSH接続する必要があります。
SSH接続の仕方は、以下を参照して下さい。

https://qiita.com/shizuma/items/2b2f873a0034839e47ce

作成したサイトのファイルをリポジトリにコピーし、コミットする

リポジトリをクローンしたら、リポジトリに移動し、そこに自分が作成したサイトのファイルを(HTMLファイルだけでなく、CSSファイル、JSファイル、画像ファイルなども含めて)全てコピーします。
このときの注意点として、HTMLファイルの名前は、"index.html"とする必要があります。
コピーした後、以下のコマンドをターミナルで入力し、ローカルのリポジトリでの変化をコミットします。

$ git add .
$ git commit -m "メッセージ"

メッセージの部分は好きな文を入れて下さい。
最後に、以下のコマンドで、ローカルのリポジトリをリモートのリポジトリにプッシュします。

$ git push origin master

すると、ローカルのリポジトリでのコミットがリモートに反映されます。
実際にブラウザでリポジトリのページを開くと、コピーしたファイルとコミットが反映されていることがわかります。

ソースをマスターブランチにする

リポジトリのページでSettingsのタブをクリックし、開いたページの下の方にスクロールすると、GitHub Pagesの項目があります。
その項目の、SourceがNoneになっているので、それをmaster branchに切り替えます。
そうすると、GitHub Pagesの項目のところに、

https://アカウント名.github.io/リポジトリ名/

というURLが表示されます。
このURLが、あなたのサイトのURLです。
これで、webページを公開完了です!
公開には時間がかかることもありますので、リンク先が表示されない場合は、しばらく時間を置いてから開き直してみて下さい。
それでも表示できない場合は、以下のことを確認してみて下さい。
-スペルなどのミスがないか
-HTMLファイルの名前が"index.html"になっているかどうか

私も最初はリンク先を表示できませんでしたが、HTMLファイル名を"index.html"にするとうまくいきました。

ページの更新をするには

ここまでで、webページを公開する手順を説明してきましたが、webページは一度公開すれば終わりではありません。
何か変わったことがあったときは、ページを更新する必要があります。
ページを更新するには、まず、リポジトリのページのCodeタブをクリックし、編集したいファイルの名前をクリックします。
すると、ファイルの中身が表示されるので、右上の鉛筆マークをクリックすると、ファイルを編集できます。
ファイルの編集が終わったら、下のCommit changesのボタンをクリックします。
同様の手順を変更がある全てのファイルに対して行うと、更新完了です。

まとめ

今回は、GitHubでwebページを公開する手順をまとめました。
GitHubのことよくわからないけどとりあえずサイトを公開したいという方は、参考にしていただければと思います。
なお、私も初心者ですので、記事の内容に間違いがあるかもしれません。
もし間違いがありましたら、修正しますので、ご指摘のほどよろしくお願いいたします。

参考URL:https://qiita.com/sota_mikami/items/c6038cf13fd84b519a61

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away