えーどっとアール.com

世を忍ぶ仮の姿でこの世を生きる、はぐれインスタントエンジニアの奮闘日記。

Vuetifyで作るポートフォリオ(Vue.js)

f:id:arowe:20200603161157p:plain

Vuetify(ビューティファイ)

 

やぁみなさん。ハローエブリバディ( ̄ー ̄)

フリーランスでお仕事している某ですが、5月は全くと言って仕事のお話がなかったボクちん。めっちゃ暇してましたよ(´・ω・`)

4月後半は、見積もり間違ってるやろっクソが!?てくらい忙しかったのですが、5月以降は斡旋できる作業がないので・・・と担当も自社のことで頭が一杯だったようで、フリー時間がたんまり出来ました。

まぁ、こういう機会は滅多にないので、この機会に振り返り学習としてVue.jsのコンポーネントの復習がてらポートフォリオを作成してみることにしました。

 

といっても、一から作成するには時間が掛かりすぎるので、Vuetify公式の無料のテーマの中から単一で済むParallaxのテーマを使ってサクッと作ってみました。

 

Premium & free themes — Vuetify.js

 

f:id:arowe:20200603175721p:plain

 

arowe-portfolio.web

 

作り方としては、別途studyブログの方で取り上げようかと思いますが、ざっくり言えば以下の手順を踏みました。

 

ポイント!

1.作業PCにNode.js、npm、FirebaseCLIをインストールする。

2.Vuetifyの無料テーマをgitリポジトリよりクローンする。

3.Vuetifyのクイックスタートを参考にwebpackまでの手順を行う。

4.2でクローンしたテーマをベースにコード追加・修正を行う。

==============================================

ここまでやれば、npm run build & serveでエラーが発生しない限り
作業用PC内(localhost:8080)で動作が確認できる。

==============================================

5.作成したサイトを公開するためにFirebaseに登録する

6.公開用の設定を反映してデプロイする

 

本当にざっくりですが、1~6の手順で自身のポートフォリオサイトが公開できるようになります。

公開してみた感想ですが、わざわざScriptなどでモーションを作ったりせず、マテリアルUIを使えばなんとなくカッコいいサイトが簡単に作ることがでるのは良いですね。

有料のホスティングサービスじゃなくても、ポートフォリオくらいならFirebaseやNetlifyなどの無料枠内でも不満はなさそうだと感じました。

連絡フォームもFirebaseのサービスにform機能が備わっているし、gmail連携も簡単に行えるので、公開したい内容やテーマが決まってさえいれば、1日~2日あれば作成することは可能です。

f:id:arowe:20200603191441p:plain

・・・ただ、gmailのセキュリティ設定が原因で連絡フォームの送信エラーの原因調査に何日か要してしまいました。今考えると新たに登録したGmailを使えば、この問題は発生しなかったんですけどね。

 

今後ですが、稀に小規模開発でfirebaseを利用する機会があったので、databaseやstorageなどを使ってデータ管理やファイルアップロード等の機能を使って運用に生かしていこうかなと思います。

 

以上。