webサイトを公開してみよう！

HTML/CSS、javascriptの旅を終えて、満足感もさることながら、自分のサイトを公開したい気持ちが湧いてきます。

#### サイトを公開するにはどうすれば良いの？

ここでは２通りほど、紹介いたします。。、

1.GitHub Pagesというサービスを利用する
2.レンタルサーバーを借りてファイルをアップロードする



それぞれの特徴を軽く紹介するで！
>Git Hub Pages

・webサイトを無料で公開できる！
・git hubのアカウントがあればいつでも利用できる!

・phpやRuby、pythonなどのサーバーサイド言語を扱った（ショッピングサイロ）などは公開できない。

要約すると、簡単に手軽にサイトを公開したい時に使える便利なツールです。


> レンタルサーバー

・webサイトの種類に関わらず公開できる
・複雑な仕組みを理解しながら利用できる

・ややハードが高い
・費用がかかる


転職や副業、フリーランスのポートフォリオ用に作成するときに利用をお勧め!
レンタルサーバーを使っている方が、より知識を持っているとアピールできます！


#### 公開する前に・・・

以下を確認しましょう
・webサイトが正常に動作しているかどうか
・titleタグが入っているかどうか
・metaタグにdescriptionが記載されいてるかどうか
・画像にalt属性が記述されているかどうか
・PCサイズ、スマホサイズにうまくリサイズされるかどうか



## GitHub Pagesを利用しよう！

GitHub Pagesはwebサイトを無料で公開できるホスティングサービスのこと。

ホスティングサービスとは。自前のサーバーを持っていない人向けにサーバーを貸し出すサービスのこと。

では、流れ説明していく。


##### GitHub Pagesを利用する流れ

1 GitHubにリポジトリ作成
2 リポジトリにwebサイトのソースコード配置
3 masterブランチを公開設定にする


#### 1 GitHubにリポジトリ作成

今回は、「pages_sample」という名前で作成しました。

![スクリーンショット 2022-06-29 10.57.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/32f39e7b-db9f-e6e1-7a8c-bc6244526a27.png)


#### 2 リポジトリにwebサイトのソースコード配置
ここが、少し難易度が高いかも知れへんで〜

> VSCodeでファイルを開く

visual studio code で公開したいwebサイトのファイルを開く。


> 左バーの枝部分をクリック（リポジトリ初期化）

リポジトリを初期化するために、枝部分をクリックする

![スクリーンショット 2022-06-29 11.06.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/2f70b2b3-5798-1b16-4277-ed3229137561.png)

初期化をすると、ファイルが一気に表示される。

linux で行う、gitの「<b>git init</b>」の処理

> ステージに追加する

次に、変更の横にある「＋」をおす。
![スクリーンショット 2022-06-29 11.09.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/843a5bf6-d39c-0594-23ed-ab5098c5d263.png)

「変更」が「ステージされている変更」に変わっていれば完了！
こうすることで全てのファイルがステージに追加されました。

linux で行う、gitの「<b>git add</b>」の処理

> コミットする

メッセージボックスにコメントをつけて、ソース管理の横にある「✔︎」ボタンを押す。
コメントは自由に（first commitとか）

linux で行う、gitの「<b>git commit "first commit"</b>」の処理

![スクリーンショット 2022-06-29 11.21.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/999cb7c4-68ff-92a7-fe02-14cc36f852c7.png)


> エラーが表示されたら


このとき、以下のように
gitのuser.name とuser.emailを構成していること確認してください、というメッセージが表示されたら、、、

![スクリーンショット 2022-06-29 11.29.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/a8570dab-9250-1e40-2cbe-9464ad41eac4.png)

これは、gitのユーザー登録がまだできていないことになります。
なので、自分のgithubのアカウントを登録させましょう！

'''
git config --global user.name 'xxxxxx'
git config --global user.email 'xxxxxx@gmail.com'
'''

自分が、git hub で登録したユーザ名とメアドを登録させましょう！

登録されているかを確認

```
git config -l
```
以上のコードで、確認できます！

さぁ、これでコミットするとできましたでしょうか？


![スクリーンショット 2022-06-29 11.32.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/dfe641d9-12d9-f0a6-d57f-51d77997ef75.png)

> GitHubのリポジトリを登録する

次は、git上にweb上で作成したgit hubのリポジトリ（リモートリポジトリ）を登録する。


以下のようにコマンドパレットを選択
![スクリーンショット 2022-06-29 11.33.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/4ea6e788-e23f-6732-04dd-070ebcc192ee.png)

そこで、「gitaddremote」を入力する

すると、また入力欄が現れます。

![スクリーンショット 2022-06-29 11.39.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/3d8cda13-5100-3cbd-98a7-0fd4cfbecc74.png)

> githubのリポジトリのURLを取得する

先ほど作成した、リポジトリのURLをコピーしてメモ帳かどこかにコピーしておいてください。


![スクリーンショット 2022-06-29 11.40.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/081b8ee5-6011-567e-3a0d-803061c9c8bf.png)


> GitHubの認証キーを取得

さぁ、少し面倒になります。
ここで必要になってくるのは、
<b>「Personal access token」の認証キー</b>

▼詳しい取得手順は公式ページにも記載されております。▼
https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

さて、トークン取得できましたでしょうか？

メモ帳にコピーしたリポジトリのURLとトークンを組み合わせて、以下の空欄に入力させます。

＜組み合わせ方＞
「https://GitHubのユーザ名：コピーした認証キー@github.com/・・・（後はリポジトリのURL）」

組み合わせたものを入力欄に入れて「URLからリモートを追加する」を押す。

リポジトリ名は「origin」にしましょう・

> プッシュする

ここまでの流れ
・webサイトのファイルをステージに上げる
・コミットさせる
・github側のリポジトリを登録させる。
（リモートに上げる内容も登録し、上げられる先も登録完了）

<b>あとは、上げる（プッシュ）するのみ！</b>

警告メッセージが表示されなければ、成功！

![スクリーンショット 2022-06-29 12.04.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/f5da7938-3c8b-ff86-daa9-931cb4b2cb4f.png)

> GitHub側から確認しよう！

![スクリーンショット 2022-06-29 12.05.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/e95ca2a5-a5b3-0b8e-ca06-b3e79c56a273.png)

ファイルが表示されていればOK！

現状では、GitHubにソースコードを置くことができたので、あとは公開しましょう！

> 公開まで・・・

＜公開までの手順＞

・masterブランチを公開設定にする
・トップページのHTMLファイル名を「index.html」にする


・masterブランチを公開設定にする
![スクリーンショット 2022-06-29 12.09.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/b80e6d6f-47e5-494e-4d6c-f8d2f738a1e7.png)

settingを選択して、「Pages」に行き、Branch をmasterに選択。
![スクリーンショット 2022-06-29 12.10.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/40d85598-3003-cbfa-c6d8-cd00290e45c1.png)

saveをするとURLが表示されるので、コピー！
![スクリーンショット 2022-06-29 12.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/3135c681-f8ef-e4a6-0037-74ac7dc0a8c3.png)

あれ？!404エラーになってる？
大丈夫、、、反映には時間がかかるので少し待ってから試してみましょう！

![スクリーンショット 2022-06-29 12.14.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/24e7b943-2e57-171f-3546-ce801d07d9a9.png)

以下のようにURLに緑のチェックがついていたら無事公開されております！
![スクリーンショット 2022-06-29 12.13.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1314502/65e9fbda-18db-f969-a93a-f47a164b56bd.png)


このあとサイトを編集したい場合は、
・ローカルリポジトリでファイルを編集（VScodeで編集）
・ステージに上げる
・コミットする
・プッシュする
の繰り返しになります！


以上で、GitHub Pagesでの公開は終わり次はレンタルさサーバーを契約してみよう！

## レンタルサーバーを契約して公開しよう！

🚧執筆中🚧

記事を読んでくれてありがとう！！

ぜひ、LGTM、共有よろしくね！