GitHub Pagesでポートフォリオを作るの巻　トラブルシューティング付き

どうもかずきです！

エンジニアになりたい人で転職やら案件獲得やら自分のスキルアピールのために作成するポートフォリオをGitHubで作る流れを紹介してみようと思います

スクールでもがっつり教えてくれない場合もありますし、自分でいろんな記事を参考にしてやったのに上手くいかない人のためにもっとわかりやすく説明できればと思います！

また上手くいかない場合の対処法も紹介します

早速行きましょうか

ここまでは書いたコードとかアプリをGitHubで管理したことある人ならわかっているとは思いますが一応書きました

何をしているかを下のターミナルの番号に対応させて説明します

①まず任意のディレクトリに移動します　説明ではprojectディレクトリにしていますがこちらは好きな場所で構いません

②先ほど作ったリポジトリのデータをこのディレクトリにクローンします

ちなみにクローンする際は下の画像の順番のようにSSHをクリックしてコピーボタンを押すとコピーできるのでそれをgit cloneの後ろにペーストします

f:id:chansanblog:20191220210701p:plain

③そしてそのレポジトリのディレクトリに移動します

ターミナル

①
$ cd ~/Projects

②
$ git clone ここにコピーしたものをペースト

③
$ cd リポジトリ名

テキストエディタを開いて、command + O を押して、先ほど作成したリポジトリのディレクトリを開きます

まだ中身は空なのでここでcommand + N で index.htmlファイルを生成して試しに何か書いてみましょう

レイアウトを作っている時間がない方は無料テンプレートサイトからダウンロードしてこのディレクトリに入れてあげると瞬時にレイアウトは作れます

ターミナル

$　echo "何か試しにテキトーに書く" > index.html

このように生成することも可能です

こうすることでwebページを有効にした時にしっかり反映されているかが確認できます

ターミナル

$ git add .
$ touch initial
$ git add initial
$ git commit -m 'コメント'
$ git push origin master

add とcommit をしてからプッシュします

f:id:chansanblog:20191220220310j:plain

f:id:chansanblog:20191220204221p:plain

f:id:chansanblog:20191220202234p:plain

これで上手くhtmlの記述が反映されていれば完了です！

あとは先ほど開いたテキストエディタで編集するだけです

f:id:chansanblog:20191220220652j:plain

ざっくりした意味はルートのファイル名をindex.htmlにしなさいとのことです

とは言ってもそんなに簡単に治らない場合もあるので以下の方法を全て試してみてください！

HTMLのファイル名がindex.htmlになっているか確認する
リポジトリのファイルがある場所に一つディレクトリを挟んでみる（例えば、保存してある場所がホームディレクトリであるならホームディレクトリ/間のディレクトリ/リポジトリファイルにしてみる　要するに保存場所を変えるということ）
リポジトリを作り直す
数分間待ってみる
重複したファイルやリポジトリのファイル下にディレクトリが挟まっていないか確認する（２番とは逆に、リポジトリファイル/何らかのディレクトリ/index.htmlのようになっていないかという意味です）