GitHub で Web サイトを公開してみた

はじめに

「手軽に web サイトを公開してみたい！！」
ということで GitHub で簡単に公開できるようなのでやってみます。

GitHub のアカウントを作る

github.co.jp
上記のサイトに訪れて、『GitHub に登録する』をクリックします。 f:id:naya_hira:20200406154150p:plain
ユーザー名、メールアドレス、パスワードを指定*1に従って入力します。
その後、プランの選択ができます。今回は、無料のFree を選択します。
f:id:naya_hira:20200406154842p:plain
次は、よくあるアンケートです。
上から、
職種選択(学生含む)→プログラミング経験→GitHubの使い道→あなたの興味は?
です。 f:id:naya_hira:20200406155354p:plain
f:id:naya_hira:20200406155415p:plain
最後に、 Complete setup のボタンをクリックして完了です。

リポジトリを作る！！

f:id:naya_hira:20200406160618p:plain
GitHub にログインした後、左上にある New ボタンをクリックします。
f:id:naya_hira:20200406161102p:plain
* Repository name : リポジトリのタイトル
* Description (optional) : リポジトリの説明(入力自由)
* Public : リポジトリを公開
* Private : リポジトリを許可されたユーザーのみ公開
* Initialize this repository with a README : README の自動作成

全てを入力したら、『Create repository 』をクリックします。

公開するサイトを作成する！！

まず、公開したいWeb サイトを作成します。 git bash から以下のコマンドを入力します。

echo "# Homepage" >> README.md
$ git init
$ git add README.md
$ git commit -m "first commit"
$ git remote add origin https://github.com/ユーザー名/作成したリポジトリ名.git
$ git push -u origin master
$ touch index.html

最後に作成した『index.html』を編集していきます。
今回は確認なので適当にしますが好きに書き換えて大丈夫です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>はじめてのWebページ</title>
</head>
<body>
    <h1>これが私のリポジトリだ！！！</h1>
</body>
</html>

次に、作成したファイルを GitHub にアップロード(Push)します。
Git Bash から以下のコマンドを入力します。

$ git add index.html  
$ git commit -m "コミットメッセージ"
$ git push

ブラウザから確認する

GitHub の作成したリポジトリに index.html があれば、
あとは設定を変更するだけです。
f:id:naya_hira:20200406165308p:plain
作成したリポジトリの設定から『GitHub Page』→『Source』を
None → Mater branch に変更します。 f:id:naya_hira:20200406165803p:plain
変更すると、『Your site is ready to be published at ~~ 』
という部分が追加されます。
その最後についている URL をクリックすることで
作成したWebページを閲覧できます。

さいごに

前に一度同じことをしようとして失敗しました。
たぶん最後の設定をしていまかったんどろうね（;´д｀）

*1:15文字以上、または数字と小文字を含む8文字以上など

naya_hira’s diary

三日坊主の備忘録