Firebase HostingのPage Not Foundを解決する

Nuxt.js の SSG で作成したサイトを Firebase Hosting にデプロイしたところ,Page Not Foundというエラーが表示されてしまいました.

nuxt-i18nでHTMLタグを含む翻訳メッセージを表示する

nuxt-i18n を利用すれば多言語対応サイトを作ることができます.メッセージは単語や文章単位で翻訳して表示することができますが,場合によっては a タグなどの HTML タグを含む文章を使いたいかもしれません.そのような場合には一部の単語を変数として埋め込むことで対応できます.

Nuxt.jsでFirebase 9を利用する

Nuxt.js に Firebase を導入するために Nuxt Firebase というパッケージが用意されていますが,公式ドキュメントをよく見てみると v7.5 から更新されていません.現在の Nuxt Firebase の最新バージョンは v8.2.2 ですが,Nuxt Firebase v8+ では modular 形式のサポートとなっています.また,パッケージの実装は終わっていないようで,modular 形式を導入する場合にはパッケージではなく,自分で導入するようにと書かれていました.

【Nuxt.js】SSGのビルドを高速化する

このブログでは Nuxt Content を使用していますが,記事が増えるにつれてビルド時間が長くなってきました.最初は1分程度だったのが今では3分.この調子だとかなり長くなりそうなので高速化してみます.

Nuxt.jsで写真のポートフォリオサイトを作る

写真は見た目の重要度が 100% なので如何に綺麗に魅せるかが鍵になると思いますが,ポートフォリオサイト自体が重くなってしまうのもまた事実.そんなことを考えていたら,とても良さげなビュワーモジュール Viewer.js を見かけたので,テストサイトを作成してみました.

Nuxt ContentでOGP画像を自動生成してみた

記事ごと個別で OGP 画像を作るのが面倒だったので毎回ブログトップの OGP 画像を使いまわしていたのですが,芸がないので自動生成に切り替えました.

Nuxt.jsの正しい環境変数の設定・利用方法

Node.js では環境変数の設定・利用に dotenv モジュールが使われてきましたが,Nuxt.js では不要になりました.

NuxtでMarkdown記法のブログを作る

このブログはずっと LAMP 環境に WordPress を載せて運営してきたのですが,Markdown 記法を使ってオフラインで記事が書ける環境に少し憧れがありました.最近使うことが多い Nuxt.js で作ろうかと思っても DB を用意したり markdownit 等で Markdown を変換したりと面倒に感じていましたが,もっと便利に扱える @nuxt/content というパッケージがなんだかとても良さげです.ということで,@nuxt/content を使ってブログを一から作り直しました.

Nuxt Contentでフィードの自動生成

先日,サイトマップを自動生成しましたが,新規記事の投稿を通知するにはフィードもあると便利ですね.SSR のウェブサイトであれば @nuxtjs/feed で対応できるのですが,今回は SSG なのでとある理由により利用できません.

Nuxt Contentでsitemap.xmlの自動生成

先日,ブログ移行後の投稿記事が検索インデックスに反映されていないことに気づきました.以前は WordPress でサイトマップは自動生成されていたのでクローラに親切だったのですが,すっかり存在を忘れていました….SSG で静的サイトを生成するときにもサイトマップを自動で生成して欲しいですね.