Fラン大卒の海外就職

英語、カナダ生活、ウェブデザイン、学校とか趣味も

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

f:id:sgwshu:20180120135701j:plain

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

ってかGitHubって何

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

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

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

 

必要なもの

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

 

2通りの公開方法

ユーザー用ページ

USER-NAME.github.io

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

リポジトリ用ページ

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

 

やってみよう 

では早速レッツスタート

アカウント作成

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

リンク先へジャンプ。

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

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

GitHub Desktop

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

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

んで、またブラウザのGitHubに戻ってここでやっとリポジトリ作成。f:id:sgwshu:20180120134121p:plain

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

ユーザー用スペース

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

f:id:sgwshu:20180120134205p:plain

このSet up in desktopを選ぶ。

f:id:sgwshu:20180120134345p:plain

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

f:id:sgwshu:20180120134752p:plain

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

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

f:id:sgwshu:20180120135040p:plain

 

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

 

リポジトリ用スペース

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

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

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

GitHub Pagesのソースへ行き、

f:id:sgwshu:20180122120314p:plain

NoneをMaster brunchに変更。

f:id:sgwshu:20180122120326p:plain

そのあとしばらくして

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

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

 

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

CYaaaaaaaaaaaaaaaaaaa!!!!!