How to Install Umami on Vercel and Supabase (100% Working)
ID | EN

How to Install Umami on Vercel and Supabase (100% Working)

Monday, Dec 9, 2024

I used to use Google Analytics (GA), but website performance became slow, and the data wasn’t 100% safe. Umami became an alternative because it’s self-hosted, doesn’t affect website speed, and its features are just as complete.

In this tutorial, I’ll guide you on how to install Umami with Vercel (hosting) and Supabase (database) - 100% free!

What is Umami?

Umami is web analytics that is:

  • ✅ Open source
  • ✅ Privacy-friendly (no cookies)
  • ✅ Lightweight (~2KB script)
  • ✅ Self-hosted
  • ✅ Simple and clean UI

Prerequisites

  • GitHub account
  • Vercel account (free)
  • Supabase account (free)

Step 1: Setup Database in Supabase

1.1 Create New Project

  1. Open supabase.com
  2. Login with GitHub
  3. Click “New Project”
  4. Fill in details:
    • Name: umami-analytics
    • Database Password: (generate strong password, save it!)
    • Region: choose the closest one
  5. Click “Create new project”

1.2 Get Connection String

  1. Go to Settings → Database
  2. Scroll to Connection string
  3. Select URI tab
  4. Copy connection string
  5. Replace [YOUR-PASSWORD] with the password you created

Format:

postgresql://postgres.[project-id]:[password]@aws-0-[region].pooler.supabase.com:6543/postgres

Step 2: Fork Umami Repository

  1. Open github.com/umami-software/umami
  2. Click Fork
  3. Keep default settings
  4. Click Create fork

Step 3: Deploy to Vercel

3.1 Import Project

  1. Open vercel.com
  2. Click Add New → Project
  3. Import the forked umami repository
  4. Click Import

3.2 Configure Environment Variables

Before deploying, add environment variables:

KeyValue
DATABASE_URLConnection string from Supabase
HASH_SALTRandom string (can generate at random.org)

3.3 Deploy

  1. Click Deploy
  2. Wait for build process (about 2-3 minutes)
  3. After completion, click Visit to open dashboard

Step 4: Login to Umami

Default credentials:

  • Username: admin
  • Password: umami

⚠️ Important: Change password immediately after login!

  1. Login with default credentials
  2. Click Settings → Profile
  3. Change password

Step 5: Add Website

  1. Click Settings → Websites
  2. Click Add website
  3. Fill in:
    • Name: Your website name
    • Domain: Website domain (without https://)
  4. Click Save

Step 6: Install Tracking Script

  1. On Websites page, click Edit on the newly created website
  2. Click Tracking code tab
  3. Copy the script
<script 
  async 
  src="https://your-umami-domain.vercel.app/script.js" 
  data-website-id="your-website-id"
></script>

For Next.js

In app/layout.tsx:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          async
          src="https://your-umami.vercel.app/script.js"
          data-website-id="your-website-id"
        />
      </body>
    </html>
  )
}

For Astro

In src/layouts/Layout.astro:

<script 
  async 
  src="https://your-umami.vercel.app/script.js" 
  data-website-id="your-website-id"
></script>

Step 7: Verify

  1. Open your website
  2. Open Umami dashboard
  3. You should see 1 visitor (you!)

Troubleshooting

Data not appearing?

  1. Make sure script is installed correctly
  2. Check browser Console for errors
  3. Make sure domain in Umami matches website domain

Error during deploy?

  1. Make sure DATABASE_URL format is correct
  2. Make sure password doesn’t have special characters that need escaping

Conclusion

With Umami, you can have analytics that is:

  • Free (Vercel + Supabase free tier)
  • Privacy-friendly
  • Fast and lightweight
  • Self-hosted

Congratulations! You now have your own analytics 🎉

Have questions? Reach out on Twitter @nayakayp!