How I self-hosted my own website analytics with Umami
Tags: javascript, react, nextjs, webdev
Published: 2021-12-08 12:38:41

---
canonical_url: https://dpnkr.in/blog/self-host-umami
description: A guide on how I setup Umami with railway in under 5 mins
---

I absolutely love [over-engineering](https://dpnkr.in/stack) this site. After months of procrastinating I finally rolled out my blog to this beautiful world. I stumbled upon this part of adding analytics and my needs were simple, lightweight, ethical, great if open-source and privacy-friendly Google Analytics alternative. So I signed up for [Plausible](https://plausible.io/) , [Fathom](https://usefathom.com/) & [Panelbear](https://panelbear.com/) and started using them.

I didn't want to miss any other alternatives so I asked on [Twitter](https://twitter.com/DeepankarBhade/status/1467854277158662144?s=20) on what people use in their sites and that's when I heard of [umami](https://umami.is/). Here's a rough comparison of 4 of them.

| Tool                                | Open Source | Pricing           | Bypass ad-blockers |
| ----------------------------------- | ----------- | ----------------- | ------------------ |
| [umami](https://umami.is/)          | ✅          | Free              | ✅                 |
| [Plausible](https://plausible.io/)  | ✅          | $6/month          | ❌                 |
| [Panelbear](https://panelbear.com/) | ❌          | Free (1000visits) | ❌                 |
| [Fathom](https://usefathom.com/)    | ❌          | $14/month         | ❌                 |

[Umami](https://umami.is/) was clearly a winner here so decided to self-host it and after 5mins I had my very own analytics up. In this article, I would explain how you can do the same.

There are many ways you can self-host umami you can find all ways [here](https://umami.is/docs/hosting). Deciding to use [Railway](https://railway.app/) was a no-brainer for me because it would set up both the Postgres DB and Frontend app (analytics dashboard) therefore making my life easy.

<div className='flex justify-center w-full my-10'>
  <a href='https://railway.app/new/template?template=https%3A%2F%2Fgithub.com%2Frailwayapp-starters%2Fumami&amp;plugins=postgresql&amp;envs=HASH_SALT&amp;HASH_SALTDesc=Any+random+string+used+to+generate+unique+values+for+your+installation'>
    <img src='https://railway.app/button.svg' alt='Deploy on Railway' />
  </a>
</div>

To get started click on the **"Deploy on railway"** button, you would be prompted to sign up if you haven't already and to connect it to a GitHub repository. After you're done go and click "Deploy".


![Setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lgnu328139qfc8pcljp.png)

This would create a new GitHub repo and start building the project. This generally takes 2-3min for deployment is not that much .


![Building](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcdttideghumrzn57wy5.png)

This would set up Prisma, Nextjs and also create an admin user. You should see a deployed link go ahead and click on it.


![Deployed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqxl72f9l8fyhcm6deel.png)

Umami installation will create a default administrator account with the username admin and the password umami. Make sure to reset the password in the settings you can refer to [official docs](https://umami.is/docs/login) for reference.


![Login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8kfzyj9hfyu5y3bio9fo.png)

You should be able to see a dashboard-like interface but hey where are the sites? You can add websites to track in the settings. Now to add them to your sites just click on the code icon and place the following code in the `<head>` section of your website.


![Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68jnzwn10sdm7inigrib.png)

That's it? Yes! isn't it amazing how quickly you can provision and deploy it? Now if you visit your website you should see the dashboard getting updated. I would now cover some things I added to complete my setup.

I added a custom domain to the dashboard for that you can refer to this [official guide](https://docs.railway.app/deploy/exposing-your-app#add-a-custom-domain) from the railway.

One thing that was important for me is skipping analytics from the dev environment and from my personal visits.

Make sure to add `data-domains` attribute to the `script` to avoid sending analytics other than the production environment.

```js
<script
  async
  defer
  data-domains='dpnkr.in'
  src='https://umami.is/umami.js'
  data-website-id='1313u131-85ee-42d4-97d2-8ba80de140a6'
></script>
```

If you're like me who visits his own site too much then you shouldn't send the analytics to the dashboard to make this possible add `umami.disabled = true`


![Local](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91it53xzbv6az7tq8t93.png)

And that's a wrap. Hope you find this interesting feel free to connect with me on [Twitter](https://twitter.com/DeepankarBhade) if you have any questions. Cheers!