ポートフォリオとブログをNuxt.jsでリニュアールしている話
本記事は、2019.09.29に個人ブログで公開したものを移行してきたものです
現在進行形で、ポートフォリオ兼ブログをNuxt.js、Netlify CMSでリニューアルしている。リリースしないと中途半端で終わっちゃいそうなので、一旦リリースをしてみた。
躓いたところ
お問い合わせフォームが動かない問題
Nuxt.jsでStatic化すると、Netlify Formがうまく使えないので、こちらの記事を参考にContactページを作成した。
マウスオーバーで情報表示
Vue.jsのeventを2つ書く形になってしまうが、これでOK。こちらでWorksページの情報を出すところで使用している。
動的ルーティングの書き出し
こちらを参考にしたらできた。やったね
Blog記事一覧のパス周り
ブログ記事一覧のパスにnuxt-linkを使っていたが、リロードするとパスが置きかわり、記事ページに遷移できなくなる（実装が悪いのか…）。根本的な解決策ではないが、現在はaタグを使うことで対応している。
Assetsのパス周り
何かといまだによくわかってないが、ここら辺をみながら適宜対応していった。
テンプレートリテラルあとマジ便利。
ハンバーガーメニュー
ページ遷移後も、メニューが開きっぱなし問題があったので、Vuexで状態管理を行うことにした。
リダイレクト
デザイン・技術ブログとポートフォリオを統合した。よって、主要な記事の移行とリダイレクトが必要だった。
以前は、WordPressを使っており、そのまま放置していてもセキュリティー的に怖い。そこで、FirebaseのHosting空プロジェクトを作成し、以前ブログに書いたリダイレクト設定で、Firebase → リダイレクト → Netlifyに「404」を出さずにリダイレクトしている。（サーバレスでもっと良い方法があれば知りたい）
今後やりいこと
・Blogの順番がおかしいのをなんとかする：mdからjsonに変換しているパッケージがダメそう
・BlogにSNSシェアボタンや筆者がわかるようなコンポーネントを作って実装する
・Blogにページャー or 自動読み込みを実装する
・Blogの記事アイキャッチを地道に設定し直す
・技術ブログ（WordPress版）を順次廃止する
・アニメーションを実装：スクロールに対応しながら、ブロックで出てくるアニメーションが好き。
・ここら辺を参考にページ読み込み速度の高速化、最適化をする
・ダークモードに対応する（iOSも対応したのでちょっと作ってみたい）
冒頭にも書いた通り、実は何度かポートフォリオサイトのリニュアールを試みて、GitHubには死にかけのプロジェクトがいくつかある（笑）今回はそれは避けたいと思い、まず公開した。
まだまだ実装やデザインで微妙なところは多いが、今後気が向いたら開発をガシガシしていこうと思っている。
【追記】2020年1月3日
今まで、Netlify CMSを使ってブログ記事をポートフォリオ内に組み込んでいたが、年始の空き時間を利用して、全記事手動でnoteへの移行をしてみた。
移行理由は、独自にCMS開発をしてしまうと、それだけで満足して記事を書かないという致命的な問題があった。あと、noteアカウントとの差別化も難しいなと思っていた。今後はnoteでコンテンツは公開し、ブログのトップページはRSSでデータを引っ張り、ポートフォリオ内に置いておこうと思っている。
今後やりたいことを整理すると・・・ここら辺をやるぞ 🛠
・現Blogトップページにnoteから記事を引っ張って見た目を揃える
・アニメーションを実装：スクロールに対応しながら、ブロックで出てくるアニメーションが好き。
・ダークモードに対応する
・読み込み速度の高速化、最適化をする
もし、サポートいただけたら勉強用の書籍の購入にいたします！ぜひ、よろしくお願いいたします😎