Preface
Previously, I wrote an article titled “Free Personal Blog System Setup and Deployment Solution (Hugo + GitHub Pages + Cusdis)”, detailing my blog system built using Serverless and some open-source projects. I also started a series to document the setup process.
A few days ago, I came across an article by Reorx titled “Deploy umami for Personal Website Analytics”. He introduced the umami project and demonstrated its serverless deployment using Railway.
However, since I had previously used Heroku’s free Postgres database service and deployed with Vercel when setting up Cusdis, I wanted to continue using these platforms for umami to reduce setup and maintenance costs.
The following text will record the specific setup and deployment process. Thanks to the official one-click deployment method, the entire setup process was very smooth.
[2024-06-30 Update]
Later, as Heroku discontinued its free plan, if you still want to use it completely free, you can use Vercel/Netlify/Zeabur for free deployment of the main project + Supabase for deploying PostgreSQL database instances. Pass the link as an environment variable to the Umami service. The rest of the process remains applicable.
Setup and Deployment Instructions
Creating a Postgres Database with Heroku
Creating the Postgres Database
First, register for a Heroku account. After logging in successfully, click the button in the upper right corner to create a new application.
Enter the instance name, and choose the region as you prefer. I selected United States. Click create.
After creation, search and select the Postgres database in the Adds-on section of the Resources Tab.
Choose the Free Plan. The Postgres database in Heroku is free and can be used continuously, eliminating setup and maintenance costs.
After creation, check the DATABASE_URL in Settings, which will be used later for deployment.
Click on the newly added Postgres add-on to proceed with settings.
Once inside, select View Credentials in the Settings page and record the configuration parameters.
Initializing the Postgres Database
As database initialization is required, I used the DataGrip database management tool for connection, which is quite convenient. You can also connect and configure through the Heroku CLI.
Umami needs to be initialized using the official umami/sql/schema.postgresql.sql script.
After execution, the database will have five tables with initialized data, and you can proceed with subsequent deployment work.
One-Click Deployment of umami Service Using Vercel
Deploying the umami Service
After creating the database instance, you can deploy the umami service with one click through Vercel.
Visit the Running on Vercel module in the umami official documentation for operation instructions and one-click deployment script.
After clicking the one-click deployment button, you will be redirected to Vercel’s one-click deployment page to create a Github repository for umami.
Next, you need to enter the DATABASE_URL parameter address recorded when deploying the Heroku Postgres instance earlier, and you need to fill in a custom string HASH_SLAT.
Click Deploy to start deployment. It will be completed in a few minutes.
Accessing the umami Service
After deployment, click Dashboard or the assigned Vercel domain to access the service. You will see the umami login interface.
For the first login, enter the default username admin and default password umami. After successful login, you will be redirected to the umami management page. You can click on the avatar in the upper right corner to change your password.
Configuring Personal Website to umami Service
After completing the basic account configuration, click on the Websites tab in the sidebar, then click Add Website.
Fill in the basic website information. If you check the share link, it will generate a publicly accessible URL. I added it as a bookmark on my iPad’s home screen, which also works great as a data dashboard.
Configuring umami Script to Personal Blog Website
After creating the website, obtain the umami script.
Once obtained, add the umami script to your personal website. I use the static blog Hugo, adding it within the <head> tag in the theme.
After configuration and deployment, you can start tracking website data.
Configuring Custom Script Name
Using the official umami.js script name might be blocked by some filtering rules. Therefore, we can customize the script name to achieve more accurate website data tracking.
The official also provides a convenient modification method. You can add the TRACKER_SCRIPT_NAME environment variable in the umami service already deployed in Vercel, configuring it to a custom name.
After configuration, redeploy, and then change the script name in your personal website script.
Configuring Custom Domain
If you don’t want to use the vercel.app domain provided by Vercel, you can add a custom domain in Vercel. Follow the official Vercel guide to configure CNAME etc. for your domain provider.
For example, I use a domain hosted by Cloudflare, so I need to add domain resolution first.
According to the official instructions, Cloudflare also needs to add a page rule. After configuration, you can complete the custom domain configuration.
Conclusion
The above is the complete process of adding the umami website statistics service to our website. Once configured, it requires no subsequent maintenance and allows for convenient website data tracking through the dashboard. This is one of my blog setup and deployment series tutorials. Please stay tuned, and I hope it can be of reference to everyone.
References
Related Posts
