In this case I like having autonomy and control of hosting my own data, but I also appreciate the efficiency and scalability of cloud services. That’s why, I’ve opted to host the database needed for Umami at home on my homeserver using Proxmox. However, when it comes to the dashboard – the visual heart of Umami – I use Netlify. Hosting the Umami dashboard on Netlify not only offloads my trusty NUC from running yet another service but also made installation a breeze with Netlify’s effortless deployment process. In this article I will show you how I set it up.

Setting Up Database on Proxmox

1. Download CT Template: Begin by obtaining the turnkey-postgresql CT template. The easiest way to do this is to download the template from the Proxmox web interface. Navigate to “Templates” -> “Download” and search for “turnkey-postgresql”. Select the template and click “Download”.

2. Create a LXC container:

   

   • Assign a fixed IP address (fixed to enable port forwarding).
   • Allocate 1024MB memory and 1024MB swap.
   • Dedicate 1 CPU core.
   • Designate 16GB for disk storage.
   • Ensure “start after created” is selected.

For me these where the resources that I had available, but you can adjust these to your own needs.

3. Complete Initialization: Access the console of your started container, log in with root and the password you set up at the previous step. Complete the installation, skipping any unnecessary add-ons but making sure to apply the updates.

   

4. Database Setup: Navigate to the browser using assigned-static-IP-address:12322 or simply input the IP address. This will take you to a dashboard where you can select Adminer. Use Adminer to log in with PostgreSQL credentials. Create a table named umami.

   

5. Port forwarding Make sure you don’t forget to enable port forwarding (5432) to the IP address of your running Postgres container. Ofcourse, this completely depends on your network setup. Keep in mind that exposing a port does come with security vulnerabilities. If you have an Ubiquiti router you can read this article for more information on how to set this up in a more safe way.

Deploying Umami on Netlify

1. Fork Repository: Fork the Umami repository to your GitHub account:

   https://github.com/umami-software/umami
   

2. Netlify Setup:

   • Log into Netlify.
   • Choose “Add New Site” -> “Import Existing Site”.
   • Opt for “Deploy with GitHub”.
   • Select your forked Umami repository.

3. Environment Variable:

   

   • In the site settings of your new project, navigate to “Site configuration” -> “Environment variables”.
   • Add the DATABASE_URL variable with the value:

     postgresql://<postgres_account>:<postgress_password>@<your_db_ip>/umami
     

4. Trigger Deployment:

   

   • In the Netlify dashboard, go to “Deploys”.
   • Select “Trigger Deploy” and choose “Clear cache and deploy site”.

The example here is just with Proxmox, but you can choose any popular solutions like AWS, Azure, DigitalOcean, or Heroku— provided they support PostgreSQL. At the end you just need to update the URL in the Netlify dashboard. Choose what’s best for your needs.

Digging into the problem, I started by examining the cover.html file in the theme. This file is crucial for handling images. As I skimmed through the lines, an interesting section of the code caught my attention:

## themes/PaperMod/layouts/partials/cover.html

{{- if $cover -}}{{/* i.e it is present in page bundle */}}
    ....optimisation code here
{{- else }}{{/* For absolute urls and external links, no img processing here */}}
    .... well...do nothing

The theme was checking for images within something called a “page bundle.” If the image wasn’t within this bundle, optimization processes wouldn’t be triggered. That was my “Aha!” moment. For the themes to work their magic, my content needed to be organized into Hugo’s page bundles.

So, with newfound clarity, I set about restructuring my content into these page bundles. The results? When building Hugo locally, the images were automatically resized and optimized, all thanks to the wonders of my new page bundles!

When I transitioned to page bundles, I anticipated that my config.yml for the CMS would require some adjustments. Luckily the CMS supported Page bundles by using so called collections and I followed the official documentation making the adjustments needed.

However, with every solution came a new challenge. Now that my content was structured the right way for image optimization, my newly configured Decap CMS (previously Netlify CMS) threw a tantrum. Suddenly, it stopped listing any of my articles. This was the most timeconsuming and puzzling setback.

I scoured the internet for answers, hoping to stumble upon someone who had faced a similar issue. And then, I came across a post on millerti.me that held the missing piece to my puzzle. The article mentioned the specific lines I needed to integrate in the collections:

# Support Hugo page bundles that puts index.md and images in folders named by slug
path: "{{slug}}/index"
media_folder: ""

Adding these lines was the magic touch. Now my CMS seamlessly stored new content, and it also listed my previous articles again and everything worked smoothly. This all resulted in the following config.yml:

## admin/config.yml
backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)
site_url: https://dekeukenvandael.nl
logo_url: https://www.dekeukenvandael.nl/images/static/logo.svg
publish_mode: editorial_workflow
media_folder: static/images
public_folder: /images
collections:
  - name: 'recipes'
    label: "Recipes"
    label_singular: "Recipe"
    folder: 'content/recipes'
    create: true
    # Support Hugo page bundles that puts index.md and images in folders named by slug
    path: "{{year}}-{{month}}-{{day}}-{{slug}}/index"
    # Note the usage of title here instead of slug
    preview_path: 'recipes/{{year}}-{{month}}-{{day}}-{{title}}'
    preview_path_date_field: date
    filter: {field: "ignore", value: false}
    editor:
      preview: true
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: "Authors", name: "author", widget: "list", summary: "{{fields.author_name}}", field: { label: "Author name", name: "author_name", widget: "string" }}
      - { label: 'Tags', name: 'tags', widget: 'list', required: false, items: [{ type: 'string' }] }
      - { label: 'Categories', name: 'categories', widget: 'list', required: false, items: [{ type: 'string' }] }
      - { label: 'Cover Image', name: 'cover', widget: 'object', fields: [
          { label: 'Image', name: 'image', required: false, widget: 'image' }
        ]
      }
      - { label: 'Summary', name: 'summary', widget: 'text', required: false }
      - { label: 'Body', name: 'body', widget: 'markdown' }

I hope it helps to reduce the time and effort for others facing similar issues. It wasn’t a straightforward process for me, and I’d be pleased if others can benefit from the lessons I learned. Maybe with the time you saved you can write an nice article about how this helped you ;).