初心者が初心者にポートフォリオサイトの作り方教えます
こんにちは。
今回は転職活動などであるとよいポートフォリオサイトの作り方を備忘録も兼ねて書いていきます。
すごく簡単にそれっぽいものが作ることができました。
リポジトリの作成
左上のプラスボタンからNew Repositoryを選択します。
すると、下のような画面になるので、Repository Name（ここはそのままURLとなるのでよく考えてつけるように。ここではportfolioとします）
とDescripotionを入力し、Create Repositoryをクリックします。
続いて、terminalに移りファイルを保存したいディレクトリまで移動します。
$ cd ~/projects
そして、下の画面のclone or downloadボタンをクリックしてURLをコピーしてgit cloneします。
$ git clone <コピーしたURL>
これで準備は整いました。
ファイルの入れ替え
そうしたら次にサイトの中身を決めて、ファイルを入れ替える作業に移ります。
おすすめはHTML5 upというサイトです。
https://html5up.net/
とりあえずこれから持ってこればかっこいいサイト作れます。笑
そこから自分のオリジナリティを出していくイメージでいいと思います。
このサイトから気に入ったテンプレートをダウンロードしファイル名をportfolioに変更します。
そして、projects内にある元々あるportfolioファイルを削除し、ダウンロードしたファイルをprojectsに入れます。
リモートリポジトリに変更を反映
ここからはterminalでの作業です。
portfolioのディレクトリに移ります。
$ cd portfolio
ローカルにリポジトリを作成します。
$ git init
Gitのステータスを見て、追跡されていないファイルを確認します。
$ git status
追跡に関しては以下のページを参考にしてください
Git - 変更内容のリポジトリへの記録
新しいファイルを追跡し始める処理を書きます。(untracked filesになっているファイルすべて書きます)
$ git add <ファイル名>
このあと、もう一度$ git statusしてみてください。
untracked filesが出てこなければ成功です。
あとはコミットしてプッシュしましょう。
コミットします。
$ git commit -m"HTML挿入"
リモートリポジトリを追加します。
$ git remote add origin <コピーしたURL>
リモートリポジトリの一覧を表示し、originが追加されているかの確認を行います。
$ git remote
プッシュします。
git push origin master
プッシュできない場合はこちらを参考にしてください。
初めてGitHubリポジトリにpushしたらrejectedエラーになったときの対応メモ - Qiita
これで、リモートリポジトリに変更した内容が反映されました。
Webページの有効化
最後にWebページを有効にします。
リポジトリのトップページからSettingを押し、設定画面に遷移します。
下にスクロールすると、Github PagesのSourceがあるので、None→Master Branchに変更します。
すると、自動で画面が遷移し、更新されます。
そうしたら、下のようにGithub Pagesが変わり、URLが表示されているので飛んでみましょう。
これで、完成です！
いかがだったでしょうか？
僕自身かんたんで驚きました。
後はこれをベースに自分なりのオリジナリティを出していくだけです。
ここまで読んでくださり、ありがとうございました。
うまくできなかったり、わからないことあればコメント下さい。
指摘でも大歓迎です。笑
では！
