GitHub Desktopを使って、GitHubに簡単なホームページをコミットして公開する方法

こんにちは。タームの始まりは課題が少なくて楽です。これからまた増えていくと思うと憂鬱…ってなわけで今日は初GitHubを初めてみたのでコミットしてサイト公開までの手順をコマンド一切使わずにやっていこうと思います。

ってかGitHubって何

僕も初心者なのであんまりわかりませんがとりあえずはプログラミングソーシャルネットワークでみんなで作ったの見せ合ってお互いに編集して切磋琢磨していこうってノリなんだと思います。

ちなみにフロンドエンドの仕事をバンクーバーで探してる人たち、もしくは仕事見つかった人たちはGitHubアカウントに加えポートフォリオを作っているのでどちらにしてもいつかは始めないといけないと思ってました。しかし、なぜ今日なのかと言うとGitHubはサーバーの代わりになってくれると言うことを知ったからです。

HTML,CSS,JSの表面的なものは大丈夫ですがデータベースとかになると使えません。

必要なもの

• GitHubアカウント
• GitHubデスクトップ

２通りの公開方法

ユーザー用ページ

USER-NAME.github.io

ユーザーネームを使い、アカウント1つに対して使えるスペースです。

リポジトリ用ページ

リポジトリってなんだよ（笑）って思うわけですが簡単に言うと1つ1つのプロジェクトが置けるスペースです。そのスペースにウェブサイト（HTML,CSS,JS等）を作成してサーバーに置く感じで公開できます。

やってみよう 

では早速レッツスタート

アカウント作成

こちらはそこまで難しくないのでざっくりと。

リンク先へジャンプ。

アカウント作成して、フリープランの選択、メールアドレスが正しいかの確認メール受信してアドレスを通します。

そして、おそらく最初のリポジトリ作ろうよ、みたいなこと言われるんですがパスで、いや作っても全然いいんですが（笑）

GitHub Desktop

をダウンロードします。今回はMacでの説明になります。

開いてログインしないといけないので、先ほどGitHubで作ったアカウント情報を入れる。

んで、またブラウザのGitHubに戻ってここでやっとリポジトリ作成。

ここから２通りに分かれます。

ユーザー用スペース

ここの部分の名前をユーザーネーム.github.ioにします。

このSet up in desktopを選ぶ。

github desktoが開かれるのでcloneを作る。 

するとデスクトップにリポジトリ同じ名前のフォルダができるのでその中に直接ウェブ関連のデータ（Html, Css, Js等）を入れる。

そしてcommitしてこのシンクっぽいマークを選択。

3分〜5分くらい待ってユーザーネーム.github.oiを開くと先ほどコミットしたウェブサイトが見れるじゃないですか！！素晴らしい。

リポジトリ用スペース

ユーザーネームは1つしかないので今度はそれぞれのリポジトリ名からページを公開します。

新しいリポジトリ名は何でも好きなようにしてください。個人的には短い方が良い（URL長いの嫌いネ）。

できたら先ほどと同じようにローカル環境にGitHub desktopを使ってクローンを作ります。

GitHub Pagesのソースへ行き、

NoneをMaster brunchに変更。

そのあとしばらくして

http://USER-NAME.github.io/リポジトリの名前

で検索するとサイトが見れます！！！すらばしい。これでサーバーいらないヨ。

そんなこんなで今日はこの辺で。

CYaaaaaaaaaaaaaaaaaaa!!!!!

sgw

フロントエンド

TwitterFacebook

カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。