今更聞けないGitHubでWebサイト公開方法【画像付き】

こんにちは。シュンです!
今回はGitHubを使ったWebサイトの公開方法を紹介します。

GitHubとは?

ソフトウェア開発のソースコード管理出来るサービスです。
開発したコードをネット上で閲覧でき、開発者にとっては無くてはならないツールです。

GitHub:https://github.com/

公開手順

Github登録

まずはGitHubにアクセスしてアカウント登録を行いましょう。
メールアドレス、パスワード、アカウント名の登録ぐらいなので時間は取りません。
無料のプランで登録しましょう。

アカウントを持ってる人はそのままログインしてください。

リポジトリ作成

リポジトリとはソースコードを貯蔵する倉庫のようなものです。
まずリポジトリを作成します。GitHubページの右上にある『+』をクリックしましょう。

クリックするとプルダウンが出てくるので「New repsitory」をクリック。
Image from Gyazo

「Repository name」と書かれた欄にリポジトリの名前を書きましょう。
記入後画面下緑色のボタンの「Create Repository」をクリック。

GitHubを利用するにあたり、前知識の説明が必要ですが今回は省かせていただきます。

README

これでリポジトリができました。
次にGitHubで表示されたこちらの青文字の「README」をクリック。
Image from Gyazo

READMEとはプロジェクトの説明を書くファイルのことです。
今回は書かずに画面下までスクロールして緑色の「Commit new file」をクリックしましょう。

ファイルアップロード

これでリポジトリの中にREADMEのファイルが出来ました。
では次にファイルのアップロードを行いましょう!

GitHubの画面の「Create new file」をクリック。

Image from Gyazo

クリックした次の画面でファイル名を入力します。
「index.html」と入力しましょう。

Image from Gyazo

次に「Edit new file」に表示したいコードをエディターから丸々コピーしてGitHubの画面に貼り付けます。

以降Webページを修正したい際はこちらのページから行います。

Image from Gyazo

これと同様にCSS他別ファイルを同じ手順でアップロードしてください。
アップロードされたファイルは一覧に表示されます。

ページ設定

次にページ公開の為の設定をします。
「Setting」をクリック。

Image from Gyazo

「settings」の画面に行ったら下の方にスクロールしてください。
そうすると「GitHub Pages」というところがあります。
こちらに青文字でリンクがあるのでクリックすると公開したWebページが確認出来ます。
Image from Gyazo

Webページ表示

先ほどのリンクからページが表示されました。(載せるまでもないページですが)
Webページ公開はこれにて完了です。

Image from Gyazo

まとめ

いかがでしたでしょうか?
公開だけならさほど時間もかからず5分ぐらいあればできるので皆さんもやってみてください。

最後まで見ていただきありがとうございました!また次回もよろしくお願いします。

参考文献https://prog-8.com/docs/github-pages

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です