banner
幻梦晓寒

幻梦晓寒HACK-FOX

醉后不知天在水,满船清梦压星河
x
github
bilibili
vrchat

用 umami を使ってあなたのブログに統計システムを追加しましょう!

本文は 2024-7-5 に書き直されました

前言#

ずっと前から Google アナリティクスを捨てようと思っていました。主に機能が多すぎて、私の小さなブログには必要ないものが多かったからです。今年の初めに umami の自作アナリティクスのことを聞いたのですが、その時の v1 バージョンはデータベースに接続できない問題があって、デプロイに失敗したため断念しました。最近、umami が v2 をリリースしたことを知り、再度試してみたところ成功したので、以下に私のプロセスを共有します。

準備#

まず、umami は nextjs フレームワークを使用しているので、vercel にデプロイすることができます。また、統計データを保存するためのデータベースが必要で、mysql または postgresql をサポートしています。私の方では supabase がホスティングしている postgresql データベースを使用しています。具体的にはあなた次第ですが、彼らのドキュメントを参考にしてください。

https://umami.is/docs/

デプロイ#

  1. umami のリポジトリをフォークし、その後 vercel に umami のリポジトリをインポートします。

  2. 一般的に vercel は自動的にフレームワークやビルドコマンドなどを選択してくれるので、これらは気にしなくて大丈夫です。その後、環境変数オプションで新しい変数を作成し、名前をDATABASE_URLとし、変数値にはデータベース接続のドメイン名を入力します。例えば、postgres://postgres:[YOUR-PASSWORD]@host:6543/postgres のように。

supabase データベースの場合#

supabase がホスティングしているデータベースを使用する場合は、リポジトリのdb/postgresql/schema.prismaのパスに移動してパラメータを変更し、directUrl = env("DIRECT_DATABASE_URL")を追加します。

その後、vercel のデプロイ時にDATABASE_URLを追加するだけでなく、DIRECT_DATABASE_URLという環境変数も追加する必要があります。値は接続プールのオプションConnection Poolingを使用します。

言い換えれば、DATABASE_URL には接続ポート 6543 の接続文字列を入力し、DIRECT_DATABASE_URL にはポート 5432 の接続文字列を入力します。

使用#

デプロイが成功したら、管理パネルにログインし、設定に移動します。

新しいサイトを作成し、名前は自由に、ドメインにはあなたのサイトのドメインを入力します。

hexo の場合#

次に、彼の js スニペットを inject の bottom に挿入し、hexo を三連させれば、使用できるようになります~

また、ブログの訪問者統計画面として使用するための共有ページを作成することもできます。このサイトのアクセス統計はこの機能を使用して実現されています。

mix-space の場合#

すでに誰かが書いているので、詳しくは述べません:https://blog.nekorua.com/posts/mx-space/118.html

この記事は Mix Space によって xLog に同期更新されました。
元のリンクは https://blog.xiaohan-kaka.me/posts/default/umami


読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。