ポートフォリオとブログをNuxt.jsでリニュアールしているお話

現在進行形で、ポートフォリオ兼ブログを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ページにGoogle Adsを貼る:公式パッケージ
  • Blogの記事アイキャッチを地道に設定し直す
  • 技術ブログ(WordPress版)を順次廃止する
  • アニメーションを実装する
  • ここら辺を参考にページ読み込み速度の高速化、最適化をする
  • ダークモードに対応する(iOSも対応したのでちょっと作ってみたい)

冒頭にも書いた通り、実は何度かポートフォリオサイトのリニュアールを試みて、GitHubには死にかけのプロジェクトがいくつかある(笑)今回はそれは避けたいと思い、まず公開した。

まだまだ実装やデザインで微妙なところは多いが、今後気が向いたら開発をガシガシしていこうと思っている。