TL;DR
当サイトの構築について半分記録、半分実装向けのノリで記載します。
一言で言えば Nuxt x Firebae x Markdown記事ブログ です
目次
このサイト作ったぞシリーズです。
- Nuxt.jsとFirebaseでサイトを作った話 -1- はじめに イマココ
- Nuxt.jsとFirebaseでサイトを作った話 -2- CSSとSassとPostCSSとVue
- Nuxt.jsとFirebaseでサイトを作った話 -3- Markdownの変換とNuxtへの組み込み
- Nuxt.jsとFirebaseでサイトを作った話 -4- PWA/GTM/sitemap/feed対応
- Nuxt.jsとFirebaseでサイトを作った話 -5- netlifyとFirebase
作り始めたきっかけ
ずっと非公開なポートフォリオページみたいなものはあったのですが、
それ自体がかなり古くなっていたことや、非公開故に公開できる人、
できない人が別れていてて手間だったので作り直したいと思っていました。
加えて技術系の吐き出し口もどこかサービスの上だと怖いという気持ちが
少なからずあり、その吐き出し口も欲しいと思っていました。
さらにいえばそういった場所では日記ライクな内容はかけないので
そういう部分でも吐き出し口が欲しいと思っていました。
そんな中世の中は無料のホスティングサービスが多数登場したり、
フロントエンド領域に近い範囲での静的サイトジェネレータも
多く登場し、そろそろこの波に乗ってみても良いかなと思い作り始めました。
何を使っているか
- Nuxt.js
- Nuxt.js/google-tag-manager
- Nuxt.js/pwa
- Nuxt.js/sitemap
- Nuxt.js/feed
- Firebase/Hosting
- Firebase/Cloud Functions for Firebases
辺りを使用して作成しました。
上記に含まれず制作する仮定で通過した部分としては
CSSフレームワークは Bulma から Bootstrap に変更、(将来的には抜きたいと思っています)
ホスティングサービスは NetlifyからFirebaseへ変更 しました。
Hosting x Cloud Functions でSSRを利用した実装もできるようですが、
今回は nuxt generate による静的な公開となっています。
用途が足りる場合はvuepressも良さそうです。
参考
全体的にjmblogさんの記事をかなり参考にさせて頂きました。
ありがとうございます。