いい感じのドメイン名を思いついて取ってしまったので、年末年始から結構な時間をかけて作ってたんですが、ようやく出来上がりました。
構成としてはとくになんの変哲もない、
- Nuxt.jsでyarn generateしたものを
- Netlifyでホスティングする
だけの構成です。
くどくないかわいい感を追求して、すっきり見やすいデザインにしてみました。
実装したもの
とりあえずLighthouseはこんなかんじで頑張りました。
UIコンポーネント
tailwindcssのみを使ってイチからコンポーネントを作ってみました。
レスポンシブとなるようにデザインしてマークアップして配置してコンポーネント分割して……ってめっちゃ大変でした。
アクセントカラー
アクセスするたびに色が変わるようにしてみました。
`pages/default.vue` でcss変数をランダムでstyleに渡すといいかんじにできました。
PWA対応
公式モジュールをいれてちょちょいで終わるのすごい。
ホーム画面に追加、でアプリのように使えます。 だれがこのサイトをアプリのようにして使うんだって感じではありますが…。
メタ情報の動的生成
メタ情報を設定するmixinをつくって、pagesのそれぞれのファイルで上書きする感じでできました。
画像の遅延読み込み
最初やってなかったんだけど`vue-lazyload`で簡単にできました。
ハマったところ
window undefined問題
particles.jsを使いたかったのですが、どうもimport時にwindowになにか突っ込んでいるらしく、エラーになってしまいました。
vueコンポーネント内でのimport時に↓のようにimportして、mountedで呼び出すといい感じに使えました。
window または document が undefined - NuxtJS
こんなかんじ。
homepage/Background.vue at master · kxn4t/homepage · GitHub
assetsのパス問題
`vue-lazyload` なりimgのsrcに変数を素直にバインドさせると、パスを解決できずに死んだ。
assetsにおいたものはwebpackでビルドする関係でうまくいかないっぽい。
data()として`imgSrc: require('~/assets/images/icon.jpg')`みたいにして渡してやるとうまくいきました。
他にやりたいこと
ダークモード対応
css変数をうまくつかえばできそうなので。
Contactページ
Netlify formsという機能があるらしく、これをつかえば簡単そう
感想
Nuxt.js使ったのも初めてだし、Vue.jsでまともになにかを作るのも初めてだったので大変だったけど楽しかったです。
やっぱり何かを作らないと覚えないね。。。
あと、フロントエンドは全然触らないので、UIコンポーネントを使わずに作ってみました。（楽するためにtailwindcssは使った）
途中で心折れそうになりましたが、なんとかやりきれてよかったです。
UIコンポーネントのありがたみがすごい。
Netlifyも今回はじめて使ってみたんですが、これは相当便利ですね…。
ブログとかも正直これでいいんじゃない？感があり、最近HugoとかHexoとか流行ってるのがよくわかりました。
これは余談なんですが、仕事柄Backlogで開発しているので、Githubを使った開発フローがあんまりよくわかってなくて、ちょっと使ってみたかったってのがあります。
（前職はSVNが大半で離職するちょっと前にGitLabが社内に爆誕して革命が起きた。なのでGitLabは使ったことある。）
自分でissue作って、PR作って、マージして、っていうのをやってみて、なんとなく雰囲気わかったのでよかったです。
GitHubの使い方がよくわからないっていうのはやっぱり良くない気がするので。
ちょうどおめシスがGitHubでみんなにHPを作ってもらおうという企画をやっていて、それに初めてコントリビュートしてみたりしたので、ようやく使い方がわかった感。
時間はかかってしまったんですが、結構満足いくものができたのでよかったです。
拙いコードはこちら↓
