Umami is an open-source website analytics tool designed to provide users with a privacy-focused alternative to Google Analytics. With Umami, website administrators can track visitor behavior and gain insights into website performance without compromising user privacy. Umami offers features such as real-time tracking, customizable dashboards, and detailed reports. Since it is self-hosted, users have full control over their data and ensure it is not shared with third-party companies.
Here is a brief introduction to deploying Umami on Vercel:
0/ Preparation#
- A Github account
- A Vercel account (can be logged in with Github)
- A Supabase account (can be logged in with Github)
1/ Fork Umami#
Log in to Github, visit the following Umami repository, and Fork it to your Github account
Go to your Forked Umami repository, click Add file
- Create new file
Fill in the name as vercel.json
and the content as:
{
"rewrites": [
{
"source": "/index.js",
"destination": "/umami.js"
}
]
}
2/ Create a Database#
Log in to Supabase, click New project
to create a project, enter the project name, database password (very important, keep a record), recommend selecting East US
as the region, and click create and wait for a moment.
Go to the project, click on settings - Database
- Connection string
- URI
, copy the database connection information and save it for later use (replace [YOUR-PASSWORD]
with the password set when creating the project).
3/ Build Umami on Vercel#
Log in to Vercel using Github, click Add New...
- Project
, select your Forked Umami repository, and click Import
Expand Environment Variables
and enter the following content:
- name
HASH_SALT
- valuerandom string
- name
DATABASE_URL
- valuedatabase connection information recorded in the previous step
Special reminder: You need to add ?pgbouncer=true
after the database connection information, for example:
postgresql://postgres:[email protected]:5432/postgres?pgbouncer=true
Click Deploy
and wait for a while to see the successful deployment. Since the default domain vercel.app
has been blocked by Vercel, it is recommended to go to settings - Domains
and bind your own domain.
First, point your subdomain CNAME
to cname-china.vercel-dns.com
, then click Add
.
Visit your domain and log in with the username admin
and password umami
. Remember to change the password after logging in.
4/ Reference to Your Website#
In the Umami backend, go to the settings page, create a new website, copy the reference code, and paste it before </body>
on your website.
In particular, due to the default links in Umami being blocked by Adblock plugins, making it unable to collect website information, according to the settings in the first step, you can replace umami.js
in the code with index.js
so that it will not be blocked by Adblock. For example:
Original code:
<script async defer data-website-id="xxxxxx" src="https://tongji.domain.com/umami.js"></script>
Modified code:
<script async defer data-website-id="xxxxxx" src="https://tongji.domain.com/index.js"></script>