記事見出し画像_1280___670_px

ポートフォリオとブログを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から記事を引っ張って見た目を揃える
・アニメーションを実装:スクロールに対応しながら、ブロックで出てくるアニメーションが好き。
・ダークモードに対応する
・読み込み速度の高速化、最適化をする

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

もし、サポートいただけたら勉強用の書籍の購入にいたします!ぜひ、よろしくお願いいたします😎

2
アプリデザイン・動画・メディア運営をしてる大学生 (20) | デジタルをフル活用した生活をYouTube (http://youtube.com/yotaszk)とブログで発信してます 🎨📷🔨| noteは、デザイン・テック・カメラブログとして情報を掲載していきます!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。