I was looking for a solution to connect via WireGuard VPN while simultaneously using an ad blocker to avoid being bothered while browsing the web.

Let me introduce everyone to WireGuard-UI – an all-in-one solution: WireGuard VPN + Ad-blocking DNS.

I. Introduction to WireHole-UI

WireHole-UI is a fork I created based on the original WireHole – a tool combining WireGuard + Pi-Hole + Unbound running on Docker-Compose to create a VPN Server solution (WireGuard) with ad-blocking (via Pi-Hole*) and optimized DNS security (via Unbound).

* Pi-Hole is an ad-blocking solution using a DNS Server similar to Adguard Home.

I replaced the Linuxserver WireGuard Docker image with the WireGuard version from wg-easy so that WireGuard can be set up more easily via a Web UI.

Instead of having to set up wg-easy, Pi-Hole, and Unbound individually and configure all three to work together, WireHole-UI automates everything through a single docker-compose.yml file. You just need to download it, change a few parameters, and activate it with the docker-compose up -d command, and you are done.

Features

• All-in-one tool: WireGuard + Web UI (wg-easy) + Ad blocking (Pi-Hole) + DNS Caching (Unbound)
• Easy to install and use.
• User-friendly interface, quickly create, edit, and delete clients.
• QR Code support for connecting clients via mobile phone
• Split-Tunnel support: only use the ad-blocking feature when connected via VPN

II. Installing WireHole-UI

I recommend installing WireHole-UI on Ubuntu 20.04 for the best compatibility. If you are using Ubuntu 18.04, you must update the Linux kernel to the latest version to use WireGuard.

sudo apt-get install --install-recommends linux-generic-hwe-18.04

1. Installing Docker & Docker-Compose

WireHole-UI runs on Docker-Compose. Therefore, you need to install Docker before getting started.

2. Installing git

Install git on your machine if it is not already available

sudo apt install git

3. Downloading WireHole-UI

git clone [https://github.com/10h30/wirehole-ui.git](https://github.com/10h30/wirehole-ui.git)
cd wirehole-ui

4. Configuring parameters

Before activating WireHole-UI, you need to edit a few parameters in the docker-compose.yml file.

nano docker-compose.yml

The default content of docker-compose.yml is as follows:

version: "3"

networks:
  private_network:
    ipam:
      driver: default
      config:
        - subnet: 10.2.0.0/24

services:
  unbound:
    image: "klutchell/unbound"
    container_name: unbound
    restart: unless-stopped
    hostname: "unbound"
    volumes:
      - "./unbound:/opt/unbound/etc/unbound/"
    networks:
      private_network:
        ipv4_address: 10.2.0.200

  wg-easy:
    depends_on: [unbound, pihole]
    environment:
      # ⚠️ Required:
      # Change this to your host's public address
      - WG_HOST= my.ddns.net

      # Optional:
      - PASSWORD=10h30
      # - WG_DEVICE=eth+
      - WG_PORT=51820
      - WG_DEFAULT_ADDRESS=10.6.0.x
      - WG_DEFAULT_DNS=10.2.0.100
      # - WG_ALLOWED_IPS=192.168.15.0/24, 10.0.1.0/24

    image: weejewel/wg-easy
    #image: weejewel/wg-easy:nightly
    container_name: wg-easy
    volumes:
      - .:/etc/wireguard
    ports:
      - "51820:51820/udp"
      - "51821:51821/tcp"
    restart: unless-stopped
    cap_add:
      - NET_ADMIN
      - SYS_MODULE
    sysctls:
      - net.ipv4.ip_forward=1
      - net.ipv4.conf.all.src_valid_mark=1
    dns:
      - 10.2.0.100 # Points to pihole
      - 10.2.0.200 # Points to unbound

    restart: unless-stopped
    networks:
      private_network:
        ipv4_address: 10.2.0.3

  pihole:
    depends_on: [unbound]
    container_name: pihole
    image: pihole/pihole:latest
    restart: unless-stopped
    hostname: pihole
    dns:
      - 127.0.0.1
      - 10.2.0.200 # Points to unbound
    environment:
      TZ: "Asia/Hong_Kong"
      WEBPASSWORD: "" # Blank password - Can be whatever you want.
      ServerIP: 10.2.0.100 # Internal IP of pihole
      DNS1: 10.2.0.200 # Unbound IP
      DNS2: 10.2.0.200 # If we don't specify two, it will auto pick google.
    # Volumes store your data between container upgrades
    volumes:
      - "./etc-pihole/:/etc/pihole/"
      - "./etc-dnsmasq.d/:/etc/dnsmasq.d/"
    # Recommended but not required (DHCP needs NET_ADMIN)
    #   [https://github.com/pi-hole/docker-pi-hole#note-on-capabilities](https://github.com/pi-hole/docker-pi-hole#note-on-capabilities)
    cap_add:
      - NET_ADMIN
    networks:
      private_network:
        ipv4_address: 10.2.0.100
  

There are two mandatory parameters you must change:

• - WG_HOST= my.ddns.net Change this to the Public IP of the server you are using. If installing at home, you can use Dynamic DNS.
• - PASSWORD=10h30 This is the password used to access the WireGuard Web UI via the address http://:51821. Please change it to optimize security.

You can keep the other parameters as they are if you are not familiar with Docker.

After editing, save (CTRL + O) and exit (CTRL + X).

Note: If you are using Oracle Cloud VPS and cannot access the Internet after connecting to WireGuard, refer to this article to fix it.

5. Activating WireHole-UI

Activate WireHole-UI with the following command:

docker-compose up -d

Wait a few minutes for the machine to download the Docker image and set up the containers. Once completed, you can access the following address to set up your WireGuard client. Log in using the password you set in the ` – PASSWORD` section of the docker-compose.yml file.

http://:51821

If you are installing on Oracle's free VPS, refer to this article for more detailed instructions.

III. Connecting to WireHole-UI

1. Creating a WireGuard Client

To connect to the WireGuard VPN Server, you need to access the Web UI to create a client.

http://:51821

The Web UI for managing WireGuard is extremely user-friendly and easy to use.

• Click New to create a client.
• Click the QR icon to view the QR code used for setting up the WireGuard client on your phone.
• Click the Download icon to download the configuration file, used for setting up the WireGuard client on your computer.
• Click the Trash icon to delete a client.

2. Installing the WireGuard Client

If you don't know how to set up the WireGuard Client yet, review the WireGuard Client Installation section in this article.

3. Configuring Pi-Hole

By default, after successfully connecting to the WireGuard VPN Server, you will automatically block ads thanks to Pi-Hole's operation without needing to set anything else up.

If you want advanced configuration for Pi-Hole, you can access the Pi-Hole Dashboard at the following address:

[http://10.2.0.100/admin](http://10.2.0.100/admin)

Normally, I will set up additional Local DNS Records so that later I can access Pi-Hole by the domain name [http://pi.hole](http://pi.hole) for easier recall.

Go to the DNS Records section, create a new record:

• Domain: pi.hole
• IP Address: 10.2.0.100

Then click Save and you're done.

IV. Configuring Split-Tunnel

WireHole-UI has an added Split-Tunnel feature which is very useful in case you only want to utilize the Pi-Hole DNS Server to block ads without redirecting traffic through the VPN Server.

The process is very simple. You just need to create 1 new WireGuard client, for example: Adblock, and download the configuration file Adblock.conf to your computer.

Then, when configuring on the WireGuard client, change the parameter of the AllowedIPs line to 10.2.0.0/24 and save it.

[Interface]
PrivateKey = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Address = 10.6.0.2/24
DNS = 10.2.0.100

[Peer]
PublicKey = yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
PresharedKey = zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
AllowedIPs = 10.2.0.0/24
Endpoint = aaa.bbb.ccc.ddd:5182

With this setup, only DNS Traffic is routed through the VPN Server; your web browsing still operates normally and does not run through the VPN.

Good luck with your installation!