Vue.jsでポートフォリオサイトを作ってgithub pagesに配置してみた。

#概要
Vue.jsとgithub pagesで躓いたこと大まかな流れを備忘録も含めて、記事化してみました。

書き方がざっくりとしているので、後から気づいたことがあれば、追記します。
(初心者なので、至らない点もありますが、よろしくお願いします。)


**追記**
vue.jsでプロジェクトファイルごとgithubに乗っける場合はこちらのほうがよさそうです。

**参考**
[【超簡単】Vue.jsを使って3時間で自分のホームページを作成&公開する]
(https://qiita.com/abouch/items/35d7a202f3e74c7d4c3e
)
一応、太字は↑こちらの記事の内容を踏襲した場合のやり方も記載しました。
適宜読み替えて試してみてください。
(画像などは入れてないのでもう少し詳しく知りたい方は、参考の方の閲覧をお願いします。)

2019/7/4
npm run devとすべきところをvue run devとなってたので訂正しました。

2019/8/6
npm init webpack プロジェクト名となっていたところをvue init webpack プロジェクト名に訂正しました

#使用したもの(素材やAPI)

- [google font](https://fonts.google.com/)

- [icon-rainbow](https://icon-rainbow.com/)

#SNS等のリンクアイコン素材
- Twitter
https://about.twitter.com/ja/company/brand-resources.html

- github
https://github.com/logos

- Qiita
https://help.qiita.com/ja/articles/others-brand-guideline

#使用環境
Windows10
Node.js    v 10.15.3
npm        v 6.9.0



#使用技術
- Vue.js
- BootStrap4

#サイトを置いた場所
- github pages


#できたもの
<a href="https://takasportfoliosite.netlify.app/"><img src="https://github-link-card.s3.ap-northeast-1.amazonaws.com/taka1156/TakasPortfolioSite.png" width="460px"></a>

魔改造したやつ↓
(Nuxt.js + microCMS環境に移行してます。Full static generateと.webp使ってみた)

<a href="https://www.taka1156.site"><img src="https://github-link-card.s3.ap-northeast-1.amazonaws.com/taka1156/PortfolioSite-dev.png" width="460px"></a>

#やったこと
Vue.jsで`vue init webpack <プロジェクト名>`を実行、対話形式でひな形を作成

いろいろ聞かれますが、基本Enterを押しました。(vue-routerなどはしっかり確認)

プロジェクトができたらコンテンツの内容3~4つ決めました。
(自分の場合、Home、Profile、Skill、Portfolioで作成しました。)

- 1ページ全てのコンテンツを並べる(縦長)ならVue.component()でコンテンツ(vueファイル)のページをタグ化して配置。

- 個別ページなら、vue-routerを使用してページアドレス?を定義。

のどっちかにしようか迷ったところ結局後者で実装しました。

(一応、二種類作ってみました・・・:frowning2:)
![Inked対比_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252811/71663c65-5ae8-dda5-588e-579df8fe389f.jpeg)

アイコンは迷った挙句、githubのアイデンティコンを使用。

完成後のプロジェクトの構造はこんな感じになりました↓
<img width="400" alt="プロジェクトの構造.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252811/30e1b1be-7cc7-bb3b-0e43-c561cc310d1a.png">

vueファイルの役割一覧

- navi.vue     ・・・ナビゲーションバー
- Home.vue     ・・・サイトのトップページ
- profile      ・・・自己紹介等
- Skill.vue    ・・・資格や経験等
- Portfolio.vue・・・何か作ったらとりあえずここに配置(今は何もないですが:frowning2:)

という構成になっています。

また、vue-routerを使う場合、historyモードは外しました。
(なぜかわかりませんが、build後のdistを見るとrouterで設定されたものが表示されない)
ページ切り替えのたびに＃が混じっているのが気持ち悪いですが・・・

<img width="326" alt="vue-router.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252811/074a8411-53b0-0b9a-196f-7b618afae36d.png">

出来上がったら、`npm run build`でdistを生成。
(ちょっとした確認なら、`npm　run dev`でlocalhost:8080にアクセスする形のほうがいいかも。)
**追記のやり方をした場合は、distとは別でdocsが生成されました。**

google chromeのデベロッパーツールを使うと各種デバイスの対応具合も確かめることができます。
(自分の場合iphone5で閲覧時に崩れました。)

<img width="250" alt="表示崩れ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252811/d28d5d20-ef41-6b8c-0951-0fc2ae093dcf.png"><img width="250" alt="表示崩れ無し.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252811/d4b62fee-3d10-f287-aae8-1bd177887a64.png">


出来上がったらいよいよ、githubに配置します
まず、githubに`Owner.github.io`というリポジトリを作ります。
※Ownerは自分のものを使ってください。(左側の自動で記載されるOwner欄と同じものです。)
**追記の方法の場合は好きな名前で構いません(ある程度は意味が通るもので)**

<img width="510" alt="github.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252811/20b27540-8dee-4bfb-5b80-9429b3e8be7a.png">

赤い囲みの部分をクリックしてコピー
<img width="720" alt="github_clone.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252811/53e4179a-b60d-0211-04d5-21fc04b72db1.png">

gitをインストールしてcmdやPowershellなどを開き、プロジェクトを置きたい場所に、cdコマンドで移動。
その後`git clone URL` (URLを張り付けてください)を実行

クローンしてできたファイルにdistの中身を配置。

`git add --all`でステージングし、`git commit -m "hoge"`を行う。
(hogeは後から何したかわかるような内容の方がいい気がします。最悪日付でもいいのかな？)
**追記の方法の場合、プロジェクトファイルの中身を全てを投入し`git　add　--all`すると、プロジェクト作成時に勝手に作られるモジュールなどは抜けていきました。(共用部分は抜けるみたい?)**

ちなみに、`git log --oneline`で履歴が、見れるみたいです。

最後に`git push -u origin master`して`https://Owner.github.io`にアクセスすると表示されます。(Ownerは、自分のを使ってください。)
**追記の方法の場合は、`https://Owner名.github.io/リポジトリ名/`でできました。**

プッシュした際にgithubへのログインを求められることがありますが、その場合は普通にログインすれば問題なかったです。

※ただし、gitの設定を変えてないとOSに登録？されている本名でプッシュが行くのでその場合は、`git config --global user.name "hoge"`で名前を変えてください。


#最後に
初めてQiitaに記事を書いたので、見にくいところや記載事項のミスなどありましたら、コメントお願いします。

これからも頻繁にアウトプットしていくのでもしよかったら、見てください。
(次回はVagrant+LAMPを検討しています。)

ここまで読んでいただき、ありがとうございました。