Heritage Trail Toolkit

Publishing your trail

How to put your trail on the internet for free, using GitHub Pages — no technical experience needed.

Free No hosting costs
ever
What this guide will help you do
Take the files produced by the Heritage Trail toolkit — your trail app, GeoJSON, photos, and audio — and put them on the internet for free, so anyone with a smartphone can use your trail. The whole process takes about 20 minutes the first time.
?

What is GitHub?

GitHub is a free website where you can store files and make them available on the internet. Millions of people use it — including organisations like the BBC and the NHS — to publish websites and apps.

The part we're using is called GitHub Pages. It lets you turn a folder of files into a live website, for free, with no limits on how many people visit it. There's no monthly fee, no adverts, and no catch.

You don't need to understand how it works to use it. This guide will walk you through every click.

💡
Already have web hosting? If your group already has a website with hosting, you can upload the trail files there instead using an FTP program. Skip to the "What you'll need" section and ignore the GitHub steps.

What you'll need before you start

Gather these files first. You'll upload them all to GitHub in one go.

my-trail/ index.html ← the trail app (from the toolkit) config.js ← from the config editor trail.geojson ← from the map editor manifest.json ← part of the trail app sw.js ← part of the trail app images/ splash.jpg ← your splash screen photo stop-01.jpg ← photos for each stop stop-02.jpg audio/ stop-01.mp3 ← audio for each stop stop-02.mp3

The green files are required. The blue files are optional — only include them if your trail uses photos or audio.

⚠️
Keep filenames simple — no spaces, no special characters. Use hyphens instead of spaces: splash-photo.jpg not splash photo.jpg. GitHub is fussy about this.
1

Create a free GitHub account

If you already have a GitHub account, skip to Step 2.

a
Go to github.com

Open github.com in your browser and click the big Sign up button.

b
Enter your details

You'll need an email address, a username, and a password. The username will appear in your trail URL — something like deanshangerheritage works well (no spaces).

c
Verify your email

GitHub will send you a verification email. Click the link in it to confirm your account.

d
Choose the free plan

When asked about a plan, choose Free. You don't need any paid features.

💡
Use a shared group email address if possible (e.g. your society's info@ email) rather than a personal one. That way other members can take over the account if needed.
2

Create a repository

A repository (or "repo") is just a folder on GitHub. Each trail gets its own repository.

a
Click the + button

When logged in, look for a + icon in the top-right corner of the page. Click it and choose New repository.

b
Name your repository

This name becomes part of your trail URL. Keep it short and use hyphens: village-trail or deanshanger-history-walk. No spaces.

c
Set it to Public

Make sure the repository is set to Public — this is required for the free GitHub Pages hosting. Your trail content will be publicly viewable, which is what we want.

d
Click Create repository

Leave all other settings as they are and click the green Create repository button at the bottom.

3

Upload your files

Now you'll upload your trail files into the repository. GitHub lets you do this directly in the browser — no software to install.

a
Click "uploading an existing file"

On the empty repository page you'll see some text. Look for the link that says uploading an existing file and click it.

b
Drag and drop your files

Open your trail folder on your computer. Select all the files and folders inside it, then drag them into the big upload box on the GitHub page. Wait for them all to appear in the list.

ℹ️
Uploading folders with images and audio — GitHub's drag-and-drop uploader handles folders well in Chrome and Edge. If you have problems, try uploading the main files first, then create the images and audio subfolders separately using the Add file → Create new file option.
c
Commit the files

Scroll down below the file list. You'll see a box saying Commit changes. You can leave the description blank. Click the green Commit changes button.

GitHub will now save all your files. This may take a minute if you have lots of photos.

4

Turn on GitHub Pages

This is the step that turns your repository into a live website.

a
Go to Settings

Near the top of your repository page, click the Settings tab (it has a cog icon).

b
Find Pages in the left menu

In the left-hand menu, scroll down to find Pages and click it.

c
Set the source to "Deploy from a branch"

Under Source, choose Deploy from a branch from the dropdown.

d
Select the main branch and root folder

Set the branch to main and the folder to / (root). Then click Save.

💡
After clicking Save, GitHub will take 1–3 minutes to build your site. You can move on to Step 5 while it works.
5

Find your trail URL

Once GitHub has finished building, your trail will be live at a web address like this:

https://your-username.github.io/your-repository-name/

For example, if your username is deanshangerheritage and your repository is called village-trail, your URL will be:

https://deanshangerheritage.github.io/village-trail/
a
Find the URL on the Pages settings page

Go back to Settings → Pages. Once the site is built, you'll see a blue banner saying "Your site is live at…" with the URL. Click it to check it works.

b
Test it on your phone

Open the URL on your phone's browser. If GPS doesn't work on a desktop browser, don't worry — that's normal. It will work on your phone when you're outside.

c
Share it or make a QR code

Use the QR code generator to turn this URL into a printable poster, ready for your noticeboard or village hall.

⚠️
HTTPS is required for GPS — GitHub Pages always uses HTTPS, so this is handled for you. If you ever move to your own server, make sure it also uses HTTPS, or the GPS features won't work on visitors' phones.

Updating your trail

When you want to add a new stop, fix a description, or change a photo, you update the relevant file and upload the new version to GitHub.

1
Make your changes

Edit your trail.geojson in the map editor, or update config.js in the config editor. Save the new file to your computer.

2
Upload the new file to GitHub

Go to your repository on GitHub. Click on the file you want to replace, then click the pencil edit icon, then choose Upload file — or simply drag the new version onto the repository page and commit it.

3
Wait 1–2 minutes

GitHub will rebuild the site automatically. The live trail will update on its own — you don't need to do anything else.

💡
If a visitor has already opened the trail on their phone, they may see a cached old version for a short while. Refreshing the page will always load the latest version.
!

Troubleshooting

ProblemWhat to try
The site shows a 404 error Wait 3–5 minutes — GitHub Pages can take a few minutes to go live for the first time. Also check that index.html is in the root of the repository, not inside a subfolder.
Photos aren't loading Check that the filenames in your GeoJSON exactly match the filenames you uploaded — including upper/lowercase letters. Splash.jpg and splash.jpg are different files.
GPS doesn't work in the browser GPS and geolocation only work on phones and tablets, and only when outside. Testing on a desktop computer won't trigger points of interest — that's expected.
Audio doesn't play automatically Many phone browsers block auto-play until the visitor has interacted with the page. A play button will appear instead. This is a browser security feature, not a bug.
The map shows the wrong location Check the centerLat and centerLng values in your config.js. Latitude and longitude may be swapped — in the UK, latitude is around 51–53 and longitude is around -5 to +2.
Changes aren't appearing live Try a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). GitHub Pages can take a few minutes to update after you commit a change.

Your trail is live 🎉

Share the URL with your group and test it on a walk. When you're ready, generate a QR code poster and put it up around the village.

Generate a QR code poster →  ·  Back to the map editor →  ·  Read the trail-building guide →