Help us understand the problem. What is going on with this article?

WEBデザイナーでもGitHubの無料デモサイトを公開できるようにしたい(Windows版)

More than 1 year has passed since last update.

デモ用無料ウェブサイトを使いたい

自分で作ったcssのデザインとかjQueryをウェブ上でメモしておいて、必要なときにさっと見たい。
んで動きも確認したい。
という欲求を満たすべく調べたらGitHubにそういうサービスがあると。GitHub Pagesというらしい。
でも、サーバーサイドとかプログラミング言語?とかちんぷんかんぷんな私は関連記事を拾ってきても解読できない。
でもやっぱり使いたい。
ということで調査しましたやり方。
根本的なとこは理解していないのであまり汎用的な内容ではないけれど、せっかくなのでメモがてら残しておきます。

1. 準備と参考記事

2. よく出てくるGit用語(?)

Gitを使う上で普通に使う単語らしい。個人的には初耳すぎたのでメモ。

  • リポジトリ:ファイルやディレクトリの状態を保存する場所。ファイルの追加や変更の履歴を記録する場所。
  • ローカルリポジトリとリモートリポジトリ:ローカル(PC上)のリポジトリとリモート(WEB上)のリポジトリ。
  • コミット:ファイルの追加や変更の履歴をリポジトリに保存すること
  • プッシュ:ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作

参考資料 今さら聞けない!GitHubの使い方【超初心者向け】

3. GitHubでリポジトリを作成する(リモートリポジトリの作成)

WEB上の記録場所を先に作っておこう!ということと理解した。

GitHubにサインインしたら、「new repository」をクリックする。
アセット 1.jpg

①リポジトリ名を決めたら②作成
アセット 2.jpg

4.デモ用 Web サイトをローカル環境で制作する

唯一理解できたところ(笑)

html
<!DOCTYPE html>
<html>
<body>
<p>TEST PAGE</p>
</body>
</html>

上のようにテキトーにメモ帳等でHTMLファイルを作り、フォルダに入れます(「test」という名のフォルダにしました)。今回はデスクトップに保存します。

5. ローカルに Git リポジトリを作成してコミットする(ローカルリポジトリ)

私はここら辺から言葉を理解するのに時間がかかりだしました・・・。ライザップしか出てこない。
要するにさっきのHTMLファイルをWEBにアップロードする前に、PC上のGitで一旦保存しときましょうという意味・・・かなぁ・・・(自信ない)

① Git Bashを起動する

ここでいよいよGit登場!
GitをDLした中に「Git Bash」というものがあります。
これを起動するとコンピューターに直接司令を送れる黒画面が出てきます。(ターミナルといいます)
※ターミナルに文字を入力するときは一行ずつなんだそうで。一行入力したらPCからの返答を待つ。(文字がいっぱい出てくる)
なんか・・・エンジニアっぽい(ちょっと楽しい)

最初のターミナル画面はこんな感じ

kapeing@kapeing-PC ~
$

今回、私はデスクトップに「test」フォルダを作り、その中にindex.htmlを入れました。
ライザップ コミットするためにターミナルでtestフォルダまで移動します。

$の後にcd Desktop/(チェンジディレクトリ デスクトップ)と入力します。

kapeing@kapeing-PC ~
$ cd Desktop/

エンターを押して待っていると、文字がうじゃうじゃ出てくるので最後の$の後に、今度はcd test/と入力します。

kapeing@kapeing-PC ~/Desktop
$ cd test/

これでtestフォルダまで移動できました!画面はこんな感じになっているはず。

kapeing@kapeing-PC ~/Desktop/test
$

※ちなみに

コミットしたいファイルが今開いてるフォルダ内にあるかどうかは、ターミナルに ls と入力すると確認できます。

kapeing@kapeing-PC ~/Desktop/test
$ ls
index.html

② ローカルリポジトリを新規作成する

ターミナルに git init と入力します。

kapeing@kapeing-PC ~/Desktop/test
$ git init

すると、文字のうじゃうじゃの語尾に(master)と付くようになります。
(testフォルダを覗くと「.git」というフォルダが出現してます!)
これをブランチと言うらしい。つまりmasterブランチ!

kapeing@kapeing-PC ~/Desktop/test (master)
$

ローカルリポジトリを新規作成できました!

③ ローカルリポジトリにコミットする

コミットしたい変更箇所をGitに教えます。(ステージングエリアに乗せるというらしいよ!なんのこっちゃ)
$のあとに git add . と入力します。

kapeing@kapeing-PC ~/Desktop/test (master)
$ git add .

これでコミットする準備が整いました!

それではいよいよコミットします。 git commit -m "Add a demo website" と入力します。

kapeing@kapeing-PC ~/Desktop/test (master)
$ git commit -m "Add a demo website"

コミットとはつまり、変更内容を記録すること。
なので -m のあとのダブルクォーテーションの中には変更した内容を入力するんだそうで。
ということは多分日本語でもなんでも何書いてもいいんだろうな。
試してないからわかんないけど。

6. リモートリポジトリにプッシュする

masterブランチを GitHub上のリモートリポジトリにプッシュします。

①プッシュ先のリモートリポジトリを指定する

$のあとに、git remote add origin 【GitHubで作成したリモートリポジトリのURL】 と入力する。

kapeing@kapeing-PC ~/Desktop/test (master)
$ git remote add origin https://github.com/kapeing/test-page

②プッシュする

$のあとに git push origin master と入力する。

kapeing@kapeing-PC ~/Desktop/test (master)
$ git push origin master

するとGitHubからログイン要求がくる!別窓とかで来る!
これでプッシュ完了。

最初に作成したリモートリポジトリのページを更新したら画面が切り替わり、「index.html」が表示される。
これでテストページが使えるようになります!やったー!

7. デモサイトを見るには

以下のURLで見れます。
https://(GitHubのアカウント名).github.io/(リモートリポジトリ名)/

今回私が作ったページのURLはこちら。うーん、大変だった…。
https://kapeing.github.io/test-page/

ちなみにデモサイトが見れるようになるにはお時間少々いただくようです。
10分はかかるかなぁ。気長に待ってね!

kape
出身は九州の温泉県。基本的に自分が気になったことをメモとして記事に残します。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした