LoginSignup
4
4

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

Last updated at Posted at 2019-08-23

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

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

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

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

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

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

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

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

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

$ git clone コピーしたURL

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

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

リポジトリをクローンしたら、リポジトリに移動し、そこに自分が作成したサイトのファイルを(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のことよくわからないけどとりあえずサイトを公開したいという方は、参考にしていただければと思います。
なお、私も初心者ですので、記事の内容に間違いがあるかもしれません。
もし間違いがありましたら、修正しますので、ご指摘のほどよろしくお願いいたします。

参考:【初心者向け】Github pagesでwebページを公開する方法

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4