一年中こたつ出てるスマートフォン用の表示で見る一年中こたつ出てるこたつは最高2020-01-14Nuxt.jsとNetlifyでサイトを作ってみたプログラミングいい感じのドメイン名を思いついて取ってしまったので、年末年始から結構な時間をかけて作ってたんですが、ようやく出来上がりました。generateしたものをNetlifyでホスティングするだけの構成です。くどくないかわいい感を追求して、すっきり見やすいデザインにしてみました。かなめりぜ実装したものとりあえずLighthouseはこんなかんじで頑張りました。UIコンポーネントtailwindcssのみを使ってイチからコンポーネントを作ってみました。レスポンシブとなるようにデザインしてマークアップして配置してコンポーネント分割して......ってめっちゃ大変でした。アクセントカラーアクセスするたびに色が変わるようにしてみました。css変数をランダムでstyleに渡すといいかんじにできました。公式モジュールをいれてちょちょいで終わるのすごい。ホーム画面に追加、でアプリのように使えます。だれがこのサイトをアプリのようにして使うんだって感じではありますが...。メタ情報の動的生成メタ情報を設定するmixinをつくって、pagesのそれぞれのファイルで上書きする感じでできました。画像の遅延読み込み最初やってなかったんだけど`vue-lazyload`で簡単にできました。undefined問題particles.jsを使いたかったのですが、どうもimport時にwindowになにか突っ込んでいるらしく、エラーになってしまいました。vueコンポーネント内でのimport時に↓のようにimportして、mountedで呼び出すといい感じに使えました。NuxtJSこんなかんじ。imgのsrcに変数を素直にバインドさせると、パスを解決できずに死んだ。assetsにおいたものはwebpackでビルドする関係でうまくいかないっぽい。require('~/assets/images/icon.jpg')`みたいにして渡してやるとうまくいきました。他にやりたいことダークモード対応css変数をうまくつかえばできそうなので。formsという機能があるらしく、これをつかえば簡単そう感想Nuxt.js使ったのも初めてだし、Vue.jsでまともになにかを作るのも初めてだったので大変だったけど楽しかったです。何かを作らないと覚えないね。あと、フロントエンドは全然触らないので、UIコンポーネントを使わずに作ってみました。(楽するためにtailwindcssは使った)途中で心折れそうになりましたが、なんとかやりきれてよかったです。UIコンポーネントのありがたみがすごい。Netlifyも今回はじめて使ってみたんですが、これは相当便利ですね...。ブログとかも正直これでいいんじゃない?感があり、最近HugoとかHexoとか流行ってるのがよくわかりました。これは余談なんですが、仕事柄Backlogで開発しているので、Githubを使った開発フローがあんまりよくわかってなくて、ちょっと使ってみたかったってのがあります。(前職はSVNが大半で離職するちょっと前にGitLabが社内に爆誕して革命が起きた。GitLabは使ったことある。)自分でissue作って、PR作って、マージして、っていうのをやってみて、なんとなく雰囲気わかったのでよかったです。GitHubの使い方がよくわからないっていうのはやっぱり良くない気がするので。おめシスがGitHubでみんなにHPを作ってもらおうという企画をやっていて、それに初めてコントリビュートしてみたりしたので、ようやく使い方がわかった感。時間はかかってしまったんですが、結構満足いくものができたのでよかったです。00:15Nuxt.jsとNetlifyでサイトを作ってみた広告を非表示にする関連記事2019-11-29夫婦でスクレイピング競争をしたあまりにもリングフィットアドベンチャーが買えないから...って嫁...2019-02-04転職カツドウ!はい、転職します。»プロフィールid:kxn4tカメラ持っててきとーに出かけたり、ゲームしたり。最近はボードゲームはまってます。(2)月別アーカイブリンクFlickrQiitaGitHub参加グループ写真・カメラはてなブログをはじめよう!kxn4tさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。