Deploy a 24/7 AI Chatbot Using GitHub — Beginner’s Guide

Complete Beginner’s Guide · GitHub Edition

Deploy a 24/7 AI Chatbot
Using GitHub Only

No servers. No coding knowledge. No monthly fees. Just a GitHub account and this guide.

⏱ 1–2 hours £0 cost Zero coding Always online

Phase 1 · GitHub Account

Phase 2 · Repository

Phase 3 · Chatbot Page

Phase 4 · AI Brain

Phase 5 · Lead Form

Phase 6 · Go Live

Phase 7 · Customize

Phase 8 · OpenAI (Advanced)

Begin

Contents

Before We Start — Key Concepts Explained§1
What You Need§2
Phase 1 — Create Your GitHub Account§3
Phase 2 — Create Your Website Repository§4
Phase 3 — Build Your Chatbot Page§5
Phase 4 — Connect a Free AI Brain§6
Phase 5 — Capture Leads with a Form§7
Phase 6 — Go Live with GitHub Pages§8
Phase 7 — Customize & Test§9
Phase 8 — Advanced: Connect OpenAI§10
Maintaining Your Chatbot§11
Troubleshooting Guide§12
Glossary§13

§ 1 · Foundation

Before We Start —
Key Concepts Explained

Read these short definitions before touching any buttons. They’ll make every step feel logical rather than mysterious.

📚 The Vocabulary You Need

🐙 GitHub

A free website where people store website files. Think of it like Google Drive, but for websites. It has a feature that turns your files into a live website — free, 24/7.

📁 Repository

A “repo” is just a folder on GitHub. It holds all your chatbot files. Every project lives in its own repository.

🌐 GitHub Pages

GitHub’s free hosting service. It takes the files in your repository and makes them a real, live website. Your address: yourusername.github.io/chatbot

📄 HTML File

The language that describes web pages. Think of it like a Word document for websites. You’ll create one file — mostly copy-and-paste.

🤖 Chatbot Widget

A ready-made chatbot you embed on your page with one line of code. The AI brain lives on the provider’s servers — you just add it to your page.

🔑 Commit

In GitHub, “committing” means saving a version of your file. Like pressing Save, but it also keeps a record of every change you’ve ever made.

💡

GitHub Pages runs your website continuously on Microsoft’s servers. There is no computer you need to leave on. Your chatbot will be available 24/7 as long as GitHub exists — which, owned by Microsoft, is extremely reliable.

§ 2 · Requirements

What You Need

The barrier to entry here is remarkably low. No special hardware, no paid software.

Item	Details
Computer	Any Windows, Mac, or Chromebook
Internet connection	Any connection works — even mobile data
Email address	For creating free accounts
Time	1–2 hours for a complete beginner
Budget	£0 / €0 / $0 — this guide uses only free tools
Technical skill	None required — every step is fully explained

Phase 1 · GitHub Account

Create Your GitHub Account

Your GitHub account is your home base. It takes about 5 minutes to set up.

Go to GitHub’s Website

Open any web browser and navigate to https://www.github.com. You’ll see a dark homepage with a headline about building software.

Click “Sign Up”

Look for “Sign up” in the top-right corner of the page and click it. GitHub takes you through a short sign-up flow.

Enter Your Email Address

Type your email address in the box and click “Continue”.

💡

Use an email you check regularly — GitHub will send a verification code there.

Create a Password

Type a strong password — a mix of letters, numbers, and symbols. Write it down somewhere safe. You’ll need it every time you log in. Click “Continue”.

Choose a Username

This is important — your username becomes part of your website address.

For example: if your username is mybusiness, your website will be at https://mybusiness.github.io/chatbot

Use only letters, numbers, and hyphens
A green checkmark appears when the username is available
Use something professional — your business name works well

⚠️

Choose carefully. Your username is part of your public website address and is difficult to change later.

Complete Verification and Confirm Your Email

GitHub may show a puzzle to confirm you’re human — follow the instructions
Click “Create account”
Check your email inbox — GitHub sent a 6-digit verification code
Type that code into the boxes on the GitHub page

✅

You are now inside GitHub! You’ll see your dashboard — a simple home screen showing your account.

Skip or Answer Setup Questions

GitHub may ask about your experience level. You can answer or scroll to the bottom and click “Skip personalization”. Either way, you’ll arrive at your dashboard.

✅ Phase 1 Complete — GitHub account created and verified

Phase 2 · Repository

Create Your Website Repository

A repository is the folder that holds all your chatbot files. This is where your website lives on GitHub.

Create a New Repository

On your GitHub dashboard, look for a green “New” button on the left side — or click the “+” icon in the top-right corner and select “New repository”.

Fill In the Repository Details

A form appears. Fill it in exactly as follows:

Field	What to type / select
Repository name	chatbot — use only lowercase letters
Description	“My AI chatbot for support and leads” (optional)
Public / Private	Select Public — required for free GitHub Pages hosting
Add a README file	✅ Check this box — it creates your first file automatically
Everything else	Leave at defaults

Click “Create Repository”

Scroll to the bottom and click the green “Create repository” button. GitHub creates your folder and takes you inside it — you’ll see one file (README.md) listed.

✅

You now have your own project folder on GitHub. In the next phase you’ll add your chatbot files to it.

✅ Phase 2 Complete — Repository created at github.com/yourusername/chatbot

Phase 3 · Chatbot Page

Build Your Chatbot Page

You’ll create one HTML file — the page that becomes your chatbot website. It’s mostly copy-and-paste. No prior knowledge needed.

Create a New File in Your Repository

Make sure you are inside your repository on GitHub
Click the “Add file” button near the top of the file list
In the dropdown that appears, click “Create new file”
A text editor opens — this is where you’ll write your chatbot page

Name Your File

At the top of the editor, click in the field that says “Name your file…” and type exactly:

index.html

❗

The filename is critical. It must be exactly index.html — all lowercase, with the .html extension. This is the file GitHub Pages automatically shows as your homepage.

Paste the Chatbot Code

Click inside the large white text area. Then copy the entire block below and paste it in. Don’t worry about understanding every line — we’ll explain the key parts afterwards.

<!-- COPY EVERYTHING FROM HERE -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Support & Chat — We're Here to Help</title>
  <!-- Styles and full chatbot code: see the .md file for the complete version -->
</head>
<body>
  <!-- Paste the full index.html from the Markdown guide here -->
</body>
</html>

📋

For the complete, ready-to-paste chatbot code: open the accompanying .md file (github-chatbot-guide.md), scroll to Step 13, and copy the full HTML block between the triple-backtick markers. It contains the complete chatbot with styling, logic, chat window, and lead form.

Commit (Save) Your File

Scroll down below the text editor
You’ll see a section called “Commit new file”
In the first text box, you can leave the default message or type: Add chatbot homepage
Leave everything else at default
Click the green “Commit new file” button

✅

Your file is saved. You’ll now see both README.md and index.html in your repository file list.

✅ Phase 3 Complete — Chatbot page created and saved to your repository

Phase 4 · AI Brain

Connect a Free AI Brain

Your page has a built-in basic response system. To upgrade to a genuine AI that answers anything intelligently, connect one of these free services.

Option	Cost	Intelligence	Difficulty
Built-in knowledge base (already done)	Free	Basic — preset answers	✅ Done
Tidio (recommended)	Free tier	Very good AI	Easy
Crisp Chat	Free tier	Good AI	Easy
OpenAI API (Phase 8)	~£0.01–£1/month	Excellent — like ChatGPT	Medium

Option A — Tidio (Recommended)

Create a Free Tidio Account

Go to https://www.tidio.com
Click “Get started free”
Enter your email and create a password
Fill in basic details about your website

💡

Tidio’s free plan includes AI-powered responses, live chat, and up to 50 conversations per month — more than enough to get started.

Get Your Tidio Embed Code

Once inside Tidio, click Settings in the left sidebar
Click “Developer” or “Channels” → “Live Chat”
Find the “Installation” or “Embed code” section
You’ll see a short line of code — it looks like this:

<script src="//code.tidio.co/XXXXXXXXXXXXXXXXXX.js" async></script>

Copy that entire line.

Add Tidio to Your GitHub Page

Go back to your GitHub repository
Click on index.html to open it
Click the pencil/edit icon (top-right of the file)
Scroll to the very bottom — find the line that says </body>
Click just above that line and press Enter to create a new line
Paste your Tidio script there:

  ... your page code ...

  <script src="//code.tidio.co/XXXXXXXXXXXXXXXXXX.js" async></script>
</body>
</html>

Scroll down and click “Commit changes”

✅

Tidio’s AI chatbot will now appear as a floating chat bubble on your live page!

Option B — Crisp Chat

Crisp is another excellent free alternative. Go to https://crisp.chat → Sign up → Settings → Website → Installation → copy the script → paste it before </body> following the same process as Step 17.

✅ Phase 4 Complete — AI chatbot brain connected and active

Phase 5 · Lead Capture

Capture Leads with a Form

Your chatbot page already includes a lead capture form. Now you need to connect it to Formspree — a free service that emails you every submission.

Create a Free Formspree Account

Go to https://www.formspree.io
Click “Get started” or “Sign up”
Enter your email and create a password
Confirm your email address

💡

Formspree’s free plan handles 50 form submissions per month — plenty for getting started. No credit card required.

Create a New Form in Formspree

Once logged in, click “+ New form”
Name it: Chatbot Lead Capture
Click “Create Form”
Formspree gives you a unique URL — it looks like:

https://formspree.io/f/abcdefgh

Copy this entire URL — you’ll need it in the next step.

Connect the Form to Your Page

In your GitHub repository, open index.html for editing (pencil icon)
Press Ctrl+F (Windows) or Command+F (Mac) to search
Search for: YOUR_FORM_ID
Replace it with your actual Formspree form ID (the characters after the last /)

<!-- BEFORE (placeholder) -->
action="https://formspree.io/f/YOUR_FORM_ID"

<!-- AFTER (your real ID) -->
action="https://formspree.io/f/abcdefgh"

Click “Commit changes”

Set Up Email Notifications in Formspree

In your Formspree dashboard, click on your form
Go to “Notifications” or “Settings”
Confirm your email address is set as the notification recipient
Click Save

✅

Every time someone fills in your form, you’ll receive an instant email with their details.

✅ Phase 5 Complete — Lead capture form connected and sending notifications

Phase 6 · Go Live

Go Live with GitHub Pages

This is the most exciting step — turning your repository files into a real, live website that anyone on the internet can visit.

Open Repository Settings

Go to your repository on GitHub
Look at the tab row along the top: Code, Issues, Pull requests, Actions, Settings
Click “Settings”

Navigate to GitHub Pages

On the Settings page, look at the left sidebar
Scroll down until you see “Pages”
Click “Pages”
You are now on the GitHub Pages configuration screen

Configure the Source

Under “Source”, click the dropdown (probably says “None”)
Select “Deploy from a branch”
A second dropdown appears — select “main”
In the folder dropdown next to it, keep “/ (root)”
Click “Save”

Wait for Your Site to Go Live

GitHub needs 1–3 minutes to build and publish your site
Refresh the Settings → Pages page after 2 minutes
You’ll see a green banner saying something like:

🎉

“Your site is live at https://yourusername.github.io/chatbot”
Click that link — your chatbot is now on the internet, available 24/7, for free!

Test Your Live Website

Visit your new URL and test everything:

Type messages in the chat: “What are your prices?”, “I need help”, “What are your hours?”
Fill in the lead form with your own details
Check your email — did you get the Formspree notification?
Try on your phone (open the URL on mobile)

✅ Phase 6 Complete — Your chatbot is LIVE at yourusername.github.io/chatbot 🚀

Phase 7 · Customize

Customize Your Chatbot

Now that everything works, make it yours. Replace the placeholder text with your real business information.

Edit Your Page Text

In GitHub, open index.html → pencil icon to edit → use Ctrl+F to find and replace each item in this table:

Find this text	Replace with
My Business Assistant	Your actual business name
Support & Chat — We’re Here to Help	Your page title
How Can We Help You Today?	Your headline
hello@yourbusiness.com	Your real email address
+44 20 0000 0000	Your real phone number
[YOUR CITY, COUNTRY]	Your actual location

Click “Commit changes” when done.

Customize the Chatbot Answers

In index.html, find the section starting with const responses = {. Replace each answer with your real business information:

const responses = {
  pricing: "YOUR ACTUAL PRICING INFO HERE...",
  support: "YOUR ACTUAL SUPPORT PROCESS HERE...",
  hours: "YOUR ACTUAL OPENING HOURS HERE...",
  contact: "YOUR ACTUAL CONTACT DETAILS HERE...",
};

Update the Quick Reply Buttons

Find and customize the quick-reply buttons to match your services:

<!-- Example: for a restaurant -->
<button onclick="sendQuick('I want a reservation')">🍽️ Reservations</button>
<button onclick="sendQuick('What is on the menu?')">📋 Menu</button>

How to See Your Changes

After every edit and commit, wait 30–60 seconds then refresh your live website. GitHub Pages automatically redeploys every change you save. No extra steps needed.

💡

GitHub keeps a full history of every version of your file. If you ever break something, click “History” on the file and restore a previous version.

✅ Phase 7 Complete — Chatbot customized with your real business information

Phase 8 · Advanced · Optional

Advanced — Connect OpenAI
for Smarter Answers

Optional. Your chatbot works without this. Do this only if you want ChatGPT-level intelligence responding to anything — not just preset answers.

⚠️

This phase requires creating an OpenAI account and adding a payment method. Costs are very small (typically under £1/month for a small site) but are not zero. Set spending limits as described in Step 32.

Create an OpenAI Account

Go to https://platform.openai.com
Click “Sign up” and create an account
Verify your email and phone number
Add a payment method (required, but costs are tiny)

Set a Spending Limit (Important!)

In OpenAI dashboard → Settings → Billing → Usage limits
Set Monthly spending limit to £5
Set a Soft limit alert at £3

💡

The gpt-4o-mini model used in this guide costs roughly £0.001 per conversation. Even 1,000 conversations a month would only cost about £1.

Get Your API Key

Click your profile icon → “API Keys”
Click “+ Create new secret key”
Name it: GitHub Chatbot
Click “Create secret key”
Copy the key IMMEDIATELY — you can only see it once

sk-proj-...XXXXXXXXXXXXXXXXXXXXXXXX

❗

Store your API key in a password manager or secure notes app. Never share it publicly. For small personal sites, using it in an HTML file is acceptable — but set a spending limit to stay safe.

Add OpenAI to Your Chatbot

In your index.html file, find the line const knowledge = { and add this above it:

// OpenAI configuration
const OPENAI_KEY = 'sk-proj-YOUR_KEY_HERE';
const OPENAI_SYSTEM_PROMPT = `You are a helpful support assistant
for [YOUR BUSINESS NAME]. Answer questions about our products
and services politely and concisely. If you cannot help,
suggest the visitor fills in the contact form. Keep answers
under 100 words. Be friendly and professional.`;

Then find the getResponse function and replace it with the async version that calls the OpenAI API. The complete replacement code is in the .md guide at Phase 8, Step 33.

✅ Phase 8 Complete — Your chatbot now uses ChatGPT-level AI for any question

§ 11 · Ongoing

Maintaining Your Chatbot

Once running, your chatbot needs very little attention. Here are the key maintenance tasks.

✏️ Update answers

Edit & Commit

Open index.html on GitHub, click the pencil icon, make your changes, click “Commit changes”. Live in ~60 seconds.

📥 Check leads

Formspree Dashboard

🔍 Check uptime

Visit Your URL

Occasionally visit your live URL to confirm the chatbot is working. For outages, check status.github.com.

🔄 Restore versions

GitHub History

If you break something, click “History” on index.html to see every past version and restore any of them.

§ 12 · Troubleshooting

Troubleshooting Guide

Common problems and their solutions. Don’t panic — almost every issue has a simple fix.

My site is not live — I see a 404 error

Check these in order: (1) GitHub Pages not enabled — go to Settings → Pages and set source to “main” branch. (2) File named wrong — must be exactly index.html — all lowercase. (3) Still loading — GitHub can take up to 10 minutes the first time. Wait, then refresh. (4) Wrong URL — your address is yourusername.github.io/chatbot — check both parts match your actual username and repository name.

The chat is not responding when I type

Make sure JavaScript is enabled in your browser. Try a different browser (Chrome, Firefox, Edge). Verify the file was committed correctly — open it on GitHub and confirm the code is there.

The lead form is not sending emails to me

(1) Confirm you replaced YOUR_FORM_ID with your real Formspree ID. (2) Check your Formspree account email is verified. (3) After submitting the form, wait 2–3 minutes. (4) Check your spam/junk folder — Formspree emails sometimes end up there. (5) Log into formspree.io to see if submissions are arriving even without the email.

My OpenAI chatbot shows an error message

(1) Check the API key is pasted correctly with no extra spaces. (2) Confirm your OpenAI account has a valid payment method added. (3) Check your usage limits — you may have hit the monthly cap. (4) Press F12 in your browser → click the Console tab → look for red error messages that will tell you exactly what went wrong.

I accidentally broke the page — it looks wrong

GitHub keeps every version. In your repository, click on index.html → click “History” (top-right of the file view) → find a working version → click the three-dot menu → “View file” → copy all the text → go back to editing and paste the old version back → commit.

GitHub Pages says “Your site is published” but I see a blank page

The HTML file might have a syntax error. Open the browser’s developer tools (press F12) → click the Console tab → look for red error messages. Most commonly: a missing closing tag or a quote that wasn’t closed. Compare your code against the original template in this guide.

§ 13 · Reference

Glossary

Every technical term used in this guide, explained in plain English.

API

A “door” that lets two software apps share data with each other automatically.

API Key

A secret password proving you have permission to use an API service.

Chatbot

A program that automatically has text conversations with website visitors.

Commit

Saving a version of your file in GitHub, with a record of every change made.

CSS

Controls how a web page looks — colours, fonts, layout, and spacing.

Deploy

Making your website or app go live and accessible on the internet.

Embed

Placing one service (like a chatbot) inside another webpage using a script.

Formspree

A free service that receives contact form submissions and emails them to you.

GitHub

A website for storing files and code, with a free feature to host live websites.

GitHub Pages

GitHub’s free hosting that turns your files into a live, 24/7 website.

HTML

The language that describes the structure and content of a web page.

index.html

The default homepage file that browsers load when visiting a website.

JavaScript

The programming language that makes web pages interactive and responsive.

Knowledge Base

Preset questions and answers used by the chatbot’s built-in response system.

Lead

A potential customer who has shared their contact details with you.

OpenAI

The company behind ChatGPT; provides an API to add AI to your own apps.

Repository

A folder on GitHub containing all the files for one project or website.

Script

A short piece of code you paste into a webpage to add a ready-made feature.

Widget

A ready-made mini-application (like a chatbot) that you embed in your site.

Connect Local LLM to GitHub Chatbot — All Platforms Guide

SYSTEM ONLINE SELF-HOSTED LLM → GITHUB CHATBOT

LOCAL LLM
TO GITHUB
CHATBOT BRIDGE

Complete setup guide for connecting your self-hosted
llama.cpp / Open WebUI containers to your GitHub Pages chatbot
via Cloudflare Tunnel — on any operating system.

🍎 macOS 🪟 Windows 🐧 Ubuntu Linux 🎩 CentOS / AlmaLinux / Rocky

visitor browser ────────────────────────────── internet

│ HTTPS request

github pages ──── your chatbot page, always live

│ fetch() to tunnel URL

cloudflare tunnel ── free, encrypted, no port-forwarding

│ forwards to localhost:8080

your machine ──── running cloudflared daemon

│ http://localhost:8080

llama-mistral ── docker container, /v1/chat/completions

│ AI response

reply ─────────── travels back same path to visitor

Your Setup · docker ps output

Your Running Containers

Based on your docker ps, here is what you have and which ports to use.

Container	Port	API Endpoint	Use
llama-mistral	8080	localhost:8080/v1/chat/completions	✓ Recommended — best quality
llama-tiny	8081	localhost:8081/v1/chat/completions	Faster, lighter answers
my-ai-chatbot	3030	Open WebUI — web interface	Admin panel only
taskflow-pro	3000	Not an LLM API	Unrelated service

💡

Both llama-mistral (port 8080) and llama-tiny (port 8081) use the OpenAI-compatible API format — the same interface used by ChatGPT. The JavaScript code in Phase 5 works with both. Just change the port number to switch models.

Phase 1 · macOS

macOS Setup

Tested on macOS Ventura, Sonoma, and Sequoia. Works on both Intel and Apple Silicon (M1/M2/M3).

🍎 macOS — All versions

Verify Docker Containers Are Running

Open Terminal (Command + Space → type “Terminal” → Enter):

$ docker ps
# You should see llama-mistral with Status: Up

# If it is not running, start it:
$ docker start llama-mistral

Test the LLM API Locally

Confirm the API is responding before setting up the tunnel:

$ curl -s http://localhost:8080/v1/chat/completions \
-H “Content-Type: application/json” \
-d ‘{“messages”:[{“role”:”user”,”content”:”Say hello”}],”max_tokens”:20}’

# Expected: JSON with choices[0].message.content = “Hello! How can I help?”

💡

If you see an error, wait 30 seconds for the container to be fully ready, then try again. If the container keeps failing, run docker logs llama-mistral –tail 30 to see why.

Install Cloudflared

Option A — Homebrew (Recommended)

# Install Homebrew if you don’t have it:
$ /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”

# Then install cloudflared:
$ brew install cloudflared

# Verify:
$ cloudflared –version

Option B — Direct Download (Intel Mac)

$ curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-darwin-amd64.tar.gz -o cloudflared.tar.gz
$ tar -xzf cloudflared.tar.gz
$ sudo mv cloudflared /usr/local/bin/
$ sudo chmod +x /usr/local/bin/cloudflared

Option C — Apple Silicon (M1/M2/M3)

# Replace amd64 with arm64 for Apple Silicon:
$ curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-darwin-arm64.tar.gz -o cloudflared.tar.gz
$ tar -xzf cloudflared.tar.gz
$ sudo mv cloudflared /usr/local/bin/
$ sudo chmod +x /usr/local/bin/cloudflared

Start the Tunnel

$ cloudflared tunnel –url http://localhost:8080

# Wait 10-15 seconds. You will see:
# +——————————————————————+
# | Your quick Tunnel has been created! Visit it at: |
# | https://random-words-here.trycloudflare.com |
# +——————————————————————+

⚠️

Copy that URL immediately and save it. You will paste it into your GitHub chatbot code in Phase 5. Do NOT close this Terminal window — the tunnel stops if you close it.

Prevent Mac From Sleeping

Open a second Terminal tab (Command+T) and run:

# Prevent sleep indefinitely. Ctrl+C to stop.
$ caffeinate -i

For a permanent setting: System Settings → Battery → Options → Enable “Prevent automatic sleeping when the display is off”

Auto-start Tunnel at Login (launchd)

$ sudo nano /Library/LaunchDaemons/com.llm.tunnel.plist

<?xml version=”1.0″ encoding=”UTF-8″?> <!DOCTYPE plist PUBLIC “-//Apple//DTD PLIST 1.0//EN” “http://www.apple.com/DTDs/PropertyList-1.0.dtd”> <plist version=”1.0″> <dict> <key>Label</key> <string>com.llm.tunnel</string> <key>ProgramArguments</key> <array> <string>/usr/local/bin/cloudflared</string> <string>tunnel</string> <string>–url</string> <string>http://localhost:8080</string> </array> <key>RunAtLoad</key><true/> <key>KeepAlive</key><true/> <key>StandardOutPath</key> <string>/var/log/llm-tunnel.log</string> </dict></plist>

$ sudo launchctl load /Library/LaunchDaemons/com.llm.tunnel.plist
$ sudo launchctl start com.llm.tunnel

# Find your tunnel URL in the log:
$ cat /var/log/llm-tunnel.log | grep trycloudflare

Phase 1 complete — macOS tunnel running, URL copied

Phase 2 · Windows

Windows Setup

Tested on Windows 10 and Windows 11. Uses PowerShell and Task Scheduler for background running.

🪟 Windows 10 / 11

Open PowerShell as Administrator

Press Start → type “PowerShell” → right-click → “Run as administrator”. Click Yes on the UAC prompt.

# Verify Docker is running:
PS> docker ps

# Start llama-mistral if not running:
PS> docker start llama-mistral

Test the LLM API on Windows

# PowerShell method:
PS> Invoke-RestMethod `
  -Uri “http://localhost:8080/v1/chat/completions” `
  -Method POST `
  -ContentType “application/json” `
  -Body ‘{“messages”:[{“role”:”user”,”content”:”Hello”}],”max_tokens”:20}’

# Or use curl in Command Prompt:
C:\> curl -X POST http://localhost:8080/v1/chat/completions ^
  -H “Content-Type: application/json” ^
  -d “{\”messages\”:[{\”role\”:\”user\”,\”content\”:\”Hello\”}],\”max_tokens\”:20}”

Install Cloudflared on Windows

Option A — winget (Windows 10/11, Recommended)

PS> winget install –id Cloudflare.cloudflared
# Close and reopen PowerShell after installation

Option B — MSI Installer

Download and run this MSI file in your browser:

https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-windows-amd64.msi
# Double-click the downloaded .msi file to install
# Then reopen PowerShell

Option C — Portable .exe (No Install)

PS> New-Item -ItemType Directory -Path C:\tools -Force
PS> Invoke-WebRequest `
-Uri “https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-windows-amd64.exe” `
-OutFile “C:\tools\cloudflared.exe”
PS> $env:PATH += “;C:\tools”

Start the Tunnel

PS> cloudflared tunnel –url http://localhost:8080

# Wait for the URL to appear:
# Your quick Tunnel: https://random-words.trycloudflare.com

⚠️

Keep this PowerShell window open. Closing it kills the tunnel. Use Task Scheduler in the next step to run it automatically in the background.

Auto-start with Task Scheduler

# Run in PowerShell as Administrator:
PS> $action = New-ScheduledTaskAction `
  -Execute “cloudflared” `
  -Argument “tunnel –url http://localhost:8080”
PS> $trigger = New-ScheduledTaskTrigger -AtLogOn
PS> $settings = New-ScheduledTaskSettingsSet -ExecutionTimeLimit 0
PS> Register-ScheduledTask `
  -TaskName “LLM Cloudflare Tunnel” `
  -Action $action `
  -Trigger $trigger `
  -Settings $settings `
  -RunLevel Highest `
  -Force

Prevent Windows Sleep

# Disable sleep and monitor timeout (AC power):
PS> powercfg /change standby-timeout-ac 0
PS> powercfg /change monitor-timeout-ac 0

# To restore later:
PS> powercfg /change standby-timeout-ac 30

Phase 2 complete — Windows tunnel configured and auto-start set

Phase 3 · Ubuntu Linux

Ubuntu Linux Setup

Covers Ubuntu 20.04, 22.04, and 24.04 LTS. Uses systemd for permanent background service management.

🐧 Ubuntu 20.04 / 22.04 / 24.04 LTS

Check Containers and Docker

$ docker ps

# If permission denied, add yourself to docker group:
$ sudo usermod -aG docker $USER
$ newgrp docker

# Start container if not running:
$ docker start llama-mistral

Test the LLM API

$ curl -s http://localhost:8080/v1/chat/completions \
  -H “Content-Type: application/json” \
  -d ‘{“messages”:[{“role”:”user”,”content”:”Hello”}],”max_tokens”:20}’ \
  | python3 -m json.tool

# The | python3 -m json.tool part formats the output nicely

Install Cloudflared

Option A — Official Cloudflare Repository (Gets Auto-Updates)

# Add Cloudflare’s GPG key:
$ sudo mkdir -p –mode=0755 /usr/share/keyrings
$ curl -fsSL https://pkg.cloudflare.com/cloudflare-main.gpg \
  | sudo tee /usr/share/keyrings/cloudflare-main.gpg >/dev/null

# Add the repository:
$ echo “deb [signed-by=/usr/share/keyrings/cloudflare-main.gpg] \
  https://pkg.cloudflare.com/cloudflared $(lsb_release -cs) main” \
  | sudo tee /etc/apt/sources.list.d/cloudflared.list

# Install:
$ sudo apt update && sudo apt install cloudflared -y

Option B — Direct .deb Package

$ wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb
$ sudo dpkg -i cloudflared-linux-amd64.deb
$ cloudflared –version

Option C — Binary Only

$ sudo wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64 \
-O /usr/local/bin/cloudflared
$ sudo chmod +x /usr/local/bin/cloudflared
$ cloudflared –version

Quick Test — Start Tunnel Manually

$ cloudflared tunnel –url http://localhost:8080

# Copy the URL that appears then Ctrl+C to stop
# We will run it properly as a service in the next step

Create systemd Service (Permanent Background Running)

$ sudo nano /etc/systemd/system/llm-tunnel.service

[Unit] Description=Cloudflare Tunnel for Local LLM After=docker.service network-online.target Wants=network-online.target [Service] Type=simple User=YOUR_USERNAME # ← replace with your actual username ExecStart=/usr/local/bin/cloudflared tunnel –url http://localhost:8080 Restart=always RestartSec=10 StandardOutput=journal StandardError=journal [Install] WantedBy=multi-user.target

Save: Ctrl+O → Enter → Ctrl+X

$ sudo systemctl daemon-reload
$ sudo systemctl enable llm-tunnel
$ sudo systemctl start llm-tunnel
$ sudo systemctl status llm-tunnel

# Should show: Active: active (running) in green

# Get your tunnel URL from the logs:
$ sudo journalctl -u llm-tunnel –no-pager | grep trycloudflare

Enable Docker Container Auto-restart

# Make Docker start on boot:
$ sudo systemctl enable docker

# Make containers restart automatically:
$ docker update –restart=always llama-mistral
$ docker update –restart=always llama-tiny

Phase 3 complete — Ubuntu tunnel running as systemd service, survives reboots

Phase 4 · CentOS / AlmaLinux / Rocky Linux

CentOS Setup

Covers CentOS 7, CentOS 8, CentOS Stream 8/9, AlmaLinux 8/9, and Rocky Linux 8/9. Includes SELinux and firewalld configuration.

🎩 CentOS 7/8 · Stream · AlmaLinux · Rocky Linux

Verify Docker and Containers

$ docker ps

# Start Docker service if not running:
$ sudo systemctl start docker
$ sudo systemctl status docker

# Start your LLM container:
$ docker start llama-mistral

Test API and Install curl if Needed

# CentOS 7 — install curl if missing:
$ sudo yum install curl -y

# CentOS 8 / Stream / AlmaLinux / Rocky:
$ sudo dnf install curl -y

# Test the API:
$ curl -s http://localhost:8080/v1/chat/completions \
-H “Content-Type: application/json” \
-d ‘{“messages”:[{“role”:”user”,”content”:”Hello”}],”max_tokens”:20}’

Install Cloudflared on CentOS

Option A — RPM Package (CentOS 7)

$ wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-x86_64.rpm
$ sudo yum localinstall cloudflared-linux-x86_64.rpm -y
$ cloudflared –version

Option B — RPM Package (CentOS 8+ / AlmaLinux / Rocky)

$ wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-x86_64.rpm
$ sudo dnf localinstall cloudflared-linux-x86_64.rpm -y
$ cloudflared –version

Option C — Binary (All CentOS versions)

Configure SELinux (CentOS Specific)

CentOS uses SELinux which can block new programs from making network connections. Fix it:

# Check SELinux status:
$ getenforce

# If “Enforcing”, allow network connections:
$ sudo setsebool -P httpd_can_network_connect 1

# Fix the binary’s SELinux label:
$ sudo restorecon -v /usr/local/bin/cloudflared
$ sudo chcon -t bin_t /usr/local/bin/cloudflared

# Temporary permissive mode for testing only:
$ sudo setenforce 0

⚠️

setenforce 0 disables SELinux enforcement temporarily. Do not leave it in permissive mode in production. Always use the setsebool and restorecon approach for a proper permanent fix.

Configure Firewalld

Cloudflare Tunnel only makes outbound connections — no inbound ports are needed. But if Docker networking causes issues:

# Allow Docker bridge interface through firewall:
$ sudo firewall-cmd –permanent –zone=trusted –add-interface=docker0
$ sudo firewall-cmd –reload

# Verify:
$ sudo firewall-cmd –list-all

Create systemd Service on CentOS

$ sudo nano /etc/systemd/system/llm-tunnel.service

[Unit] Description=Cloudflare Tunnel for Local LLM After=docker.service network-online.target Wants=network-online.target [Service] Type=simple User=YOUR_USERNAME # ← replace with your username ExecStart=/usr/local/bin/cloudflared tunnel –url http://localhost:8080 Restart=always RestartSec=15 StandardOutput=journal StandardError=journal [Install] WantedBy=multi-user.target

$ sudo systemctl daemon-reload
$ sudo systemctl enable llm-tunnel
$ sudo systemctl start llm-tunnel
$ sudo systemctl status llm-tunnel

# Get tunnel URL:
$ sudo journalctl -u llm-tunnel –no-pager | grep trycloudflare

Enable Docker and Containers at Boot

$ sudo systemctl enable docker
$ docker update –restart=always llama-mistral
$ docker update –restart=always llama-tiny

Phase 4 complete — CentOS tunnel running as systemd service with SELinux configured

Phase 5 · GitHub Chatbot Code

Update Your GitHub Chatbot

Replace the getResponse function in your index.html with this version that calls your local LLM through the tunnel.

Open index.html on GitHub

Go to github.com → your repository → click index.html
Click the pencil icon to edit
Press Ctrl+F and search for getResponse
Select and delete the entire existing function

Paste the New LLM Function

// ============================================================ // LOCAL LLM CONFIGURATION // Replace the URL with YOUR Cloudflare Tunnel URL // ============================================================ const LLM_CONFIG = { url: ‘https://YOUR-TUNNEL.trycloudflare.com’, // ← REPLACE THIS model: ‘mistral’, // llama.cpp ignores this, but it must be present maxTokens: 200, // max reply length (increase for longer answers) temperature: 0.7, // 0=robotic, 1=creative systemPrompt: `You are a friendly support assistant. Answer questions concisely and helpfully. Keep replies under 80 words unless detail is needed. If unsure, suggest filling the contact form. Be warm, professional, and helpful.` }; // Stores conversation history for multi-turn chat const conversationHistory = []; async function getResponse(message) { // Add user message to history conversationHistory.push({ role: ‘user’, content: message }); try { const response = await fetch( `${LLM_CONFIG.url}/v1/chat/completions`, { method: ‘POST’, headers: { ‘Content-Type’: ‘application/json’ }, body: JSON.stringify({ model: LLM_CONFIG.model, messages: [ { role: ‘system’, content: LLM_CONFIG.systemPrompt }, …conversationHistory // includes full chat history ], max_tokens: LLM_CONFIG.maxTokens, temperature: LLM_CONFIG.temperature, stream: false }) } ); if (!response.ok) throw new Error(`HTTP ${response.status}`); const data = await response.json(); const reply = data.choices[0].message.content.trim(); // Add AI reply to history for context conversationHistory.push({ role: ‘assistant’, content: reply }); return reply; } catch (error) { console.error(‘LLM error:’, error); return “I’m having trouble connecting right now. “ + “Please try again or use the contact form below!”; } }

Set Your Tunnel URL

Find this line and replace the placeholder with your real tunnel URL:

// BEFORE: url: ‘https://YOUR-TUNNEL.trycloudflare.com’, // AFTER (use your actual URL): url: ‘https://silent-tree-morning-abc123.trycloudflare.com’,

Customize the System Prompt

Edit systemPrompt in LLM_CONFIG to match your business. Examples:

// E-commerce example: systemPrompt: `You are a support agent for [SHOP NAME]. We sell [PRODUCTS]. Orders ship within 2-3 business days. Returns accepted within 30 days. Free shipping over £50. For order tracking, ask for the order number. Be friendly and concise.` // SaaS / software example: systemPrompt: `You are a technical support agent for [APP NAME]. Help users troubleshoot issues, explain features, and guide them to docs at [DOCS URL]. For billing: billing@domain.com. For bugs: ask for OS, browser, and steps to reproduce. Be clear and patient.`

Commit and Test

Scroll down → commit message: Connect local LLM via Cloudflare tunnel
Click “Commit changes”
Wait 60 seconds, then visit your GitHub Pages live URL
Open browser DevTools (F12) → Console tab — look for errors
Type a message — your local LLM should reply!

Phase 5 complete — GitHub chatbot now calls your self-hosted LLM

Diagnostics

Troubleshooting

Common errors and their fixes. Check the browser console (F12) first — it usually tells you exactly what went wrong.

“Failed to fetch” — chatbot shows connection error

Checklist: (1) Is cloudflared still running? Check with systemctl status llm-tunnel (Linux) or Task Manager (Windows). (2) Is the container up? docker ps — is llama-mistral listed as Up? (3) Did the quick-tunnel URL change? Restart cloudflared and update index.html with the new URL. (4) Try the permanent named tunnel (Phase 7 in the .md guide) to stop URLs changing.

CORS error in browser console

The browser is blocking cross-domain requests. Fix by restarting your llama.cpp container with the CORS flag:

$ docker stop llama-mistral
$ docker run -d –name llama-mistral -p 8080:8080 \
  ghcr.io/ggml-org/llama.cpp:server \
  –host 0.0.0.0 –port 8080 \
  –cors-allow-origins “*”

Responses are very slow (30+ seconds)

Switch to llama-tiny (port 8081) for faster replies. Also reduce maxTokens from 200 to 80. Check RAM: docker stats llama-mistral — Mistral needs 6GB+ available. In Docker Desktop → Settings → Resources → increase Memory allocation.

CentOS: “Permission denied” running cloudflared

$ sudo chmod 755 /usr/local/bin/cloudflared
$ sudo chown root:root /usr/local/bin/cloudflared
$ sudo restorecon -v /usr/local/bin/cloudflared
$ sudo setsebool -P httpd_can_network_connect 1

Windows: cloudflared not found after install

PS> Get-ChildItem -Path C:\ -Recurse -Filter “cloudflared.exe” 2>$null
# Find where it installed, then add to PATH:
PS> $env:PATH += “;C:\path\to\cloudflared”

Tunnel URL keeps changing on every restart

Quick tunnels get a new URL every time cloudflared restarts. Solution: set up a Named Tunnel (free) using the steps in the .md guide, Phase 7. Named tunnels give you a permanent URL that never changes — update your index.html once and forget about it.

Reference

Quick Reference

All essential commands in one place. Copy and run as needed.

🐳 Docker — all platforms

# List running containers
docker ps

# Start/stop containers
docker start llama-mistral
docker stop llama-mistral

# View logs
docker logs llama-mistral --tail 50

# Auto-restart on reboot
docker update --restart=always llama-mistral

# Resource usage
docker stats

🌐 Test LLM API — macOS / Linux

curl -s http://localhost:8080/v1/chat/completions \
  -H "Content-Type: application/json" \
  -d '{"messages":[{
    "role":"user",
    "content":"Hello"
  }],"max_tokens":50}'

🌐 Test LLM API — Windows PowerShell

Invoke-RestMethod `
  -Uri "http://localhost:8080/v1/chat/completions" `
  -Method POST `
  -ContentType "application/json" `
  -Body '{
    "messages":[{"role":"user","content":"Hello"}],
    "max_tokens":50
  }'

☁️ Cloudflared — tunnel commands

# Quick tunnel (URL changes on restart)
cloudflared tunnel --url http://localhost:8080

# Named tunnel (permanent URL)
cloudflared tunnel run llm-chatbot

# Version check
cloudflared --version

⚙️ systemd — Ubuntu / CentOS

sudo systemctl start   llm-tunnel
sudo systemctl stop    llm-tunnel
sudo systemctl restart llm-tunnel
sudo systemctl status  llm-tunnel
sudo systemctl enable  llm-tunnel

# Watch live logs:
sudo journalctl -u llm-tunnel -f

# Get tunnel URL from logs:
sudo journalctl -u llm-tunnel \
  --no-pager | grep trycloudflare

🪟 Windows — Task Scheduler

# Check status:
Get-ScheduledTask `
  -TaskName "LLM Cloudflare Tunnel"

# Start / Stop:
Start-ScheduledTask `
  -TaskName "LLM Cloudflare Tunnel"
Stop-ScheduledTask `
  -TaskName "LLM Cloudflare Tunnel"

Container	Port	Switch to use it
llama-mistral	8080	Tunnel –url http://localhost:8080, set LLM_CONFIG.url to port 8080 tunnel
llama-tiny	8081	Tunnel –url http://localhost:8081, set LLM_CONFIG.url to port 8081 tunnel

Deploy a 24/7 AI ChatbotUsing GitHub Only

Before We Start —Key Concepts Explained

📚 The Vocabulary You Need

What You Need

Create Your GitHub Account

Go to GitHub’s Website

Click “Sign Up”

Enter Your Email Address

Create a Password

Choose a Username

Complete Verification and Confirm Your Email

Skip or Answer Setup Questions

Create Your Website Repository

Create a New Repository

Fill In the Repository Details

Click “Create Repository”

Build Your Chatbot Page

Create a New File in Your Repository

Name Your File

Paste the Chatbot Code

Commit (Save) Your File

Connect a Free AI Brain

Create a Free Tidio Account

Get Your Tidio Embed Code

Add Tidio to Your GitHub Page

Capture Leads with a Form

Create a Free Formspree Account

Create a New Form in Formspree

Connect the Form to Your Page

Set Up Email Notifications in Formspree

Go Live with GitHub Pages

Open Repository Settings

Navigate to GitHub Pages

Configure the Source

Wait for Your Site to Go Live

Test Your Live Website

Customize Your Chatbot

Edit Your Page Text

Customize the Chatbot Answers

Update the Quick Reply Buttons

How to See Your Changes

Advanced — Connect OpenAIfor Smarter Answers

Create an OpenAI Account

Set a Spending Limit (Important!)

Get Your API Key

Add OpenAI to Your Chatbot

Maintaining Your Chatbot

Edit & Commit

Formspree Dashboard

Visit Your URL

GitHub History

Troubleshooting Guide

Glossary

LOCAL LLM TO GITHUB CHATBOT BRIDGE

Your Running Containers

macOS Setup

Verify Docker Containers Are Running

Test the LLM API Locally

Install Cloudflared

Start the Tunnel

Prevent Mac From Sleeping

Auto-start Tunnel at Login (launchd)

Windows Setup

Open PowerShell as Administrator

Test the LLM API on Windows

Install Cloudflared on Windows

Start the Tunnel

Auto-start with Task Scheduler

Prevent Windows Sleep

Ubuntu Linux Setup

Check Containers and Docker

Test the LLM API

Install Cloudflared

Quick Test — Start Tunnel Manually

Create systemd Service (Permanent Background Running)

Enable Docker Container Auto-restart

CentOS Setup

Verify Docker and Containers

Test API and Install curl if Needed

Install Cloudflared on CentOS

Deploy a 24/7 AI Chatbot
Using GitHub Only

Before We Start —
Key Concepts Explained

Advanced — Connect OpenAI
for Smarter Answers

LOCAL LLM
TO GITHUB
CHATBOT BRIDGE