LoginSignup
10
7

More than 1 year has passed since last update.

Githubを使ったHTMLプレビューができるようになるまで

Posted at

github_9.png

Githubアカウントを登録

 まずはアカウントを登録。これが無いとGithubで何もできません。
 こちらの方が投稿しているアカウント登録方法:【2019年1月現在】GitHubアカウント作成方法をご覧ください。

リポジトリを作る

 そもそもリポジトリって何ぞや? という方のためにこちらのリンクをどうぞ。
 今さら聞けない!GitHubの使い方【超初心者向け】
 物凄くざっくり説明すると、「作業スペース」みたいなものです。少しパソコンが分かる方なら、作業用フォルダを新たに作った、と喩えてもいいかもしれません。
 ここにファイルを幾つも追加していったり、さらにこの中にフォルダを作っていったりします。というわけで、早速作って行きましょう。

まずはプロフィール画面をクリック

 どこにいても右上に出てくる、この画像矢印先の+マークのアイコンをクリックしましょう。
github_1.png
 続いて出てきた「New repository」をクリック。
github_2.png
 この画面になったと思うので、「Repository name」に名前を入れましょう。日本語だと認識してもらえずに「-」という名前になってしまうので、英語名を推奨します。
github_3.png
 他は特に弄らず、そのまま「Create repository」!
github_4.png
こんな画面になったら、成功です!
Rigal1-test_name.png

HTMLファイルをアップロード

 作っただけではまだ見れませんので、アップロードしましょう! 「uploading an existing file」をクリックです。
github_5.png
 ここの中央に見たいHTMLファイルをドラッグアンドドロップで入れて、「Commit changes」をクリックしてください。
github_6.png
 今回はこんなテキトーなHTMLファイルを使ってみます。

test.html
<!DOCTYPE html>
<html lang = "ja">
    <head>
        <title>テストの文章だよ~</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>
            ここがh1だよ
        </h1>
        <p>
            ここは
            普通に改行できる
        </p>
    </body>
</html>

 アップロードが完了したら画面が切り替わりますが……これだけではまだ見れません。「Setting」から、「Pages」をクリック。
github_8.png
 「None」のところをクリックし、「main」に変更して、「Save」をクリックです。
github_7.png
 これで全ての準備が完了です!

いざ、プレビュー!

 リンク名は「https://(アカウント名).github.io/(作ったリポジトリの名前)/(見るHTMLファイルの名前)」です。
 例えば今回の私の場合はアカウント名は「Rigal1」、リポジトリの名前は「test_name」、見るHTMLファイルの名前は「test.html」ですので、「https://rigal1.github.io/test_name/test.html」となります。
テストの文章だよ~.png
 無事HTMLが見ることができました!

ファイルを追加したい場合

 「Code」の「Add file」から「Upload files」を選びましょう。最初にアップロードしたのと同じ画面が出てくるので、そこからファイルをアップロードしてください。
 github_9.png
 無事にできたら、さっき使ったリンクのファイル名だけ変えればそのファイルもプレビューできます!

終わりに

 GoogleドライブのHTMLプレビューは無くなりましたが、Githubでは少し手間がかかりますがこうしてプレビューができるようになったので、手軽にWebサイトを閲覧できるようになりました。
 HTMLファイルを気軽に共有して、サイトとして見たい方は是非参考にしてください!

10
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
7