記事見出し画像_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

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

3
20歳 / デザイナー / 登録者1万人のYouTubeで「テクノロジーで賢い暮らしをデザインする」をコンセプトにMac, iPad活用術を発信 / 月10万人が読むブログ「YoutaChannel」 / Design College 代表 / Design Chill MC