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」という名前で作成しました。

2 リポジトリにwebサイトのソースコード配置

ここが、少し難易度が高いかも知れへんで〜

VSCodeでファイルを開く

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

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

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

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

linux で行う、gitの「git init」の処理

ステージに追加する

次に、変更の横にある「＋」をおす。

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

linux で行う、gitの「git add」の処理

コミットする

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

linux で行う、gitの「git commit "first commit"」の処理

エラーが表示されたら

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

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

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

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

登録されているかを確認

git config -l

以上のコードで、確認できます！

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

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

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

以下のようにコマンドパレットを選択

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

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

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

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

GitHubの認証キーを取得

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

▼詳しい取得手順は公式ページにも記載されております。▼
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側のリポジトリを登録させる。
（リモートに上げる内容も登録し、上げられる先も登録完了）

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

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

GitHub側から確認しよう！

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

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

公開まで・・・

＜公開までの手順＞

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

・masterブランチを公開設定にする

settingを選択して、「Pages」に行き、Branch をmasterに選択。

saveをするとURLが表示されるので、コピー！

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

以下のようにURLに緑のチェックがついていたら無事公開されております！

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

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

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

🚧執筆中🚧

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

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