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

概要

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

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

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

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

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

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

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

• google font

• icon-rainbow

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

できたもの

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

やったこと

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

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

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

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

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

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

(一応、二種類作ってみました・・・)

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

完成後のプロジェクトの構造はこんな感じになりました↓

vueファイルの役割一覧

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

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

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

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

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

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

赤い囲みの部分をクリックしてコピー

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を検討しています。)

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