✓実機のスマホで確認したい
✓簡単なやり方で確認したい
✓GitHubの使い方を知りたい
こういった方に向けて、書いていきます。
ブログ主は、HTML/CSSの学習をしていたときに「自作サイトをスマホで確認ってどうやるの…？？」って感じでした。
ですが、「GitHub」というサービスを活用すると、スマホで簡単に確認することができます。
「GitHub（＝ギットハブ）」とは何か？
簡単に言うと、「プログラミングコードを共有できる」サイト（Webサービス）です。
もちろん「無料」で使用できます。
例えば
だとすると
みたいな感じですね。
「共有」ができるので、知り合いや友達とかにも気軽にサイトを見せることができます。
つまり、「共有用のURL」が発行されるので、それを「スマホから開く」ことで、実機のスマホで確認できるというわけですね。
さっそく、あなたの作ったWebサイトを「GitHub」で公開してみましょう。
GitHubの登録
まずは、GitHubの登録を行いましょう。
「github.com」にアクセスします。
以下①～⑥の通りに登録を進めてください。
①登録用のメールアドレスを入力する
②パスワード、ユーザー名を決める
③認証パズルを解く
④認証コードを入力する
⑤ユーザー名、パスワードを入力する
⑥登録完了
①登録用のメールアドレスを入力する
②パスワード、ユーザー名を決める
15文字以上、または数字と小文字を含む8文字以上にする必要があります。
【ユーザー名】
英数字または単一のハイフンのみを含めることができます。
ハイフンで始まったり終わったりすることはできません。
③認証パズルを解く
④認証コードを入力する
⑤ユーザー名、パスワードを入力する
⑥登録完了
ブックマークをしておきましょう。
Webサイトを公開する
ここからは慣れが必要ですが、慣れてしまえば3分くらいで出来るようになります。
以下①～⑪の通りに登録を進めてください。
①「Create repository」をクリック
②リポジトリ名を決める
③「Create repository」をクリック
④「uploading an existing file」をクリック
⑤ファイルをアップロードする
⑥「Commit changes」をクリック
⑦「Settings」をクリック
⑧「Pages」をクリック
⑨「Branch」をmainにする
⑩「Save」をクリック
⑪URLをクリック
①「Create repository」をクリック
②リポジトリ名を決める
公開するWebサイトURLの一部
（ドメイン名だと思ってもらえば大丈夫です）
③下までスクロールして「Create repository」をクリック
④「uploading an existing file」をクリック
⑤ファイルをアップロードする
各ファイル（html、css、imgファイル等）を範囲指定して入れてください。
大枠のフォルダ（上記「練習サイト」）のまま突っ込むとうまくいきません。
⑥下までスクロールして「Commit changes」をクリック
上記画像のページで各ファイルがアップロードされているか確認してくださいね。
⑦「Settings」をクリック
⑧左の項目「Pages」をクリック
⑨「Branch」を main にする
⑩「Save」をクリック
これで準備完了です。
あとは、公開されるまでに2～3分掛かるので、休憩して待ちましょう。
休憩が終わったら、ページを再読み込みしてください。
⑪URLをクリック
自作したWebサイトは開けましたか？
もし、エラーが出たり、何らかの理由で開けなかった場合は、この記事の下にあるコメント欄に質問をいただければ、ブログ主の分かる範囲で回答します。
実機のスマホで確認する
Webサイトを公開できたら、そのURLをスマホに送るだけです。
一番簡単な方法は、「gmail」に下書きするやり方です。
gmailから
「メールを作成」
↓
「サイトURLを打ち込む」
↓
「下書きに保存」 されます。
あとは、スマホの方からgmailアプリを開いて、下書きを確認してみてください。
サイトURLを打ち込んだメールがあると思います。
レンタルサーバーの活用
ここまで「GitHub」の使い方とメリットをご紹介してきました。
「GitHubがあればレンタルサーバー要らなくない？」と思われる方もいると思いますが、今後もプログラミングの勉強を続けるのであれば、サーバー知識は必須です。
レンタルサーバーも使ってみることを強くおすすめします。
例えばですが、「WordPress（ワードプレス）」って聞いたことはありますか？
その「ワードプレス」を使うにもレンタルサーバーは必要ですし、プログラミングに限らずブログ記事を書くにしても、ワードプレスは必要になります。
もちろん、簡単なことではなく、サーバーに上げるには「ドメイン」も必要になってきたり、分からないことが出てくるかと思います。
でも、GitHubの使い方を覚えられたのなら、サーバーも絶対に使いこなせるので安心してください。
Google検索や、YouTubeとかにも解説しているものがたくさんあります。
こちらの記事に辿り着いたように、「分からないところ」を一つずつ検索して、解決して潰していきましょう。
レンタルサーバーですが、「エックスサーバー」をおすすめします。
国内シェアNo.1のレンタルサーバーなので、情報もゴロゴロ転がってます。
また、エックスサーバーは「無料お試し期間」が設けられており、申し込み日から10日間、サーバーを自由に使うことができます。
まずは、あなたがGitHubで公開したWebサイトを、エックスサーバーに上げる練習をしてみましょう。
一度できてしまえば、2回目以降は問題なくできるようになると思います。。
最初は覚えることが多くて大変かもしれませんが、頑張ってください。
エックスサーバーの無料お試しについては、こちらからご確認ください↓
コメント