Portfolio | FullStack Developer

Hello, young explorer! Imagine you have a magic tool called n8n that helps you do jobs automatically, like a robot friend. But right now, it's hiding on your computer. We want to let it live on your own website, like https://n8n.your-website.com, so you can use it from anywhere. We'll use special helpers: Docker (like a box for programs) and Cloudflare Tunnel (a secret safe path). No need to open doors on your computer that bad guys could sneak through!

This story is like a game where we follow steps to win. I'll use easy words, short sentences, and fun ideas so even a 10-year-old like you can get it. Let's go on this adventure!

Overview: The Big Idea

n8n is like a super helper that runs jobs for you. We want to put it on your website safely. We use a secret tunnel from Cloudflare so no one can break in. Your computer talks out to the world, but nothing comes in without permission. We'll save your work so it doesn't disappear, and make it safe with locks. Our example website is n8n.ztechlanka.com – change it to yours!

It's fun and easy, like building a fort with secret doors.

Prerequisites: What You Need First

Before we start, grab these things:

A website name (domain) that uses Cloudflare, like ztechlanka.com. Cloudflare is free and helps protect you. A computer with Linux or macOS (like Ubuntu). It can be your home computer or one you rent online. Docker and Docker Compose – we'll install them if you don't have them. A Cloudflare account. You need to add names and tunnels there. Know a little about typing commands in a box called the terminal. It's like giving orders to your computer.

If you miss something, it's like forgetting your shoes for a hike – go back and get it!

Architecture: How It All Works

Here's the simple plan:

n8n lives in a Docker box and listens on a secret number: 5678.
Cloudflare Tunnel makes a safe path out from your computer to Cloudflare.
Cloudflare adds a lock (TLS) and sends messages through the tunnel to n8n.

No open doors on your computer! It's like a one-way street for cars.

Step 1: Get Your Computer Ready

Let's clean and add tools to your computer, like getting ready for school.

Update Your Computer (for Ubuntu): Type sudo apt update && sudo apt upgrade -y. This makes everything fresh.
Add Docker:

Get helpers: sudo apt install -y ca-certificates curl gnupg lsb-release. Add a key: sudo mkdir -p /etc/apt/keyrings then curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg. Set up a list:
```
    echo \
      "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu $(lsbrelease -cs) stable" \
      | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
    
```
Update and add: sudo apt update && sudo apt install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin.
Now you have Docker!
Let You Use Docker Easily: Type sudo usermod -aG docker $USER. Log out and back in.
Add Cloudflared: For Ubuntu, type curl -L https://pkg.cloudflare.com/install.sh | sudo bash, then sudo apt update && sudo apt install cloudflared.

Your computer is ready! High five!

Step 2: Make a Box for n8n

Now, build a home for n8n. Make a folder: mkdir /n8n-compose && cd /n8n-compose.

Copy the example file from the end (change to your website). Important parts:

Save n8n's stuff in a safe spot so it doesn't get lost. Use number 5678 inside. Set your time zone, like GENERICTIMEZONE=Asia/Colombo. Tell it your website name for hooks and host.

Start it: docker compose up -d. Check: docker ps. It should show n8n running.

Test: curl http://localhost:5678. If it works, yay! If not, we'll fix later.

Step 3: Set Up the Secret Tunnel

Time for the fun tunnel! You can put it on your computer or in a Docker box.

Easy Way: On Your Computer

Log in: cloudflared tunnel login (it opens a web page).
Make tunnel: cloudflared tunnel create n8n-tunnel. Remember the special number (UUID).
Make a file /.cloudflared/config.yml like the example (point to http://localhost:5678).
Start it: For Linux, use cloudflared tunnel run n8n-tunnel or make it auto-start.

Docker Way: Use the example file at the end. Point to http://n8n:5678 in the config.

Tunnel done? You're like a mole digging secret paths!

Step 4: Tell Cloudflare About Your Website

Go to Cloudflare's website. Add a name:

Type: CNAME Name: n8n (for n8n.yourwebsite.com) Target: .cfargotunnel.com Turn on proxy (orange cloud).

Cloudflare adds safety locks for free. No more worries!

Step 5: Start Everything and Check It

Turn on! docker compose up -d for n8n. Start the tunnel.

Check: docker ps, cloudflared tunnel list.

Look at messages: docker logs n8n --tail 200.

Go to https://n8n.yourwebsite.com in your browser. See n8n? Jump for joy! If not, check messages for clues.

Step 6: Make It Safe and Strong

Keep bad guys out!

Add a password: Use settings like N8NBASICAUTHACTIVE=true with a strong secret. Safety lock: Cloudflare does it. Limit who can come: Use Cloudflare's extra locks. Hide secrets: Put them in a safe file. Save stuff: Always use the safe spot for n8n's files.

Now it's like a castle with guards!

Backups: Save Your Stuff

Don't lose your work! Save the safe spot:


docker run --rm -v n8ndata:/data -v $(pwd):/backup alpine sh -c "cd /data && tar czf /backup/n8n-backup-$(date +%F).tgz ."

Also, copy your jobs from n8n. It's like saving your toys.

Common Problems and Fixes

Bad Gate (502): Tunnel can't find n8n. Fix the config file. No Box Found: Check if tunnel is running right. Can't Connect: See if n8n is on. Look at messages. Lock Problems: Make sure settings use "https".

Problems are like puzzles – fun to solve!

Questions and Tips

Can I Add More Things? Yes, one tunnel for many! Do I Open Doors? No, tunnel is secret out only. Tunnel in Box? Yes, see examples.

Tip: Always check messages when something's wrong.

Extra Files: Ready-Made Examples

Box File for Easy Tunnel:


version: '3.8'

services:
  n8n:
    image: n8nio/n8n:latest
    containername: n8n
    restart: always
    environment:
      - GENERICTIMEZONE=Asia/Colombo
      - WEBHOOKURL=https://n8n.ztechlanka.com/
      - N8NHOST=n8n.ztechlanka.com
      - N8NPORT=5678
      - N8NPROTOCOL=https
    volumes:
      - n8ndata:/home/node/.n8n
    ports:
      - "5678:5678"

volumes:
  n8ndata:

Tunnel Config for Easy Way:


tunnel: n8n-tunnel
credentials-file: /home/youruser/.cloudflared/<YOURSPECIALNUMBER>.json

ingress:
  - hostname: n8n.ztechlanka.com
    service: http://localhost:5678
  - service: httpstatus:404

Box File with Tunnel Inside: Like above, but add a cloudflared part and change config to http://n8n:5678.

Change the words to yours. If you need help making them just for you, ask me!

You did it, little hero! Now n8n is on your website, safe and fun. If something confuses you or you want special files, tell me. Let's keep adventuring! 🚀

Portfolio Menu

n8n on Your Own Website: A Super Simple Step-by-Step Guide

Table of Contents