As a runner training toward a full marathon in 2027, I wanted a simple, beautiful way to view my daily workout—without relying on complex apps or paid platforms. So I built a custom running plan viewer using:
My historical run data from Strava (exported via StatsHunters )
Generative AI to analyze the data and generate a structured 11-week training plan (first time I am trying to do this, in the future I will redo this every 3 months)
A single HTML file with dynamic date-based workout display
Google Sites for free, no-code hosting
The result? A sleek, dark-mode web app that shows exactly what I should do today—with pace targets, heart rate zones, and personalized coaching notes.
StatsHunters is a powerful (and free) tool that pulls your full Strava history—including pace, heart rate, elevation, and more—and lets you export it as CSV.
Log in with your Strava account
Click "Export to Excel" to get .XLSX file
Save as file in Microsft Excel into .CSV file
I uploaded my CSV to a generative AI assistant (like Claude or ChatGPT) and asked:
"You are a running coach analysing my running past historical data from the csv. Write out your analysis of this data and tell me what you get from the data. Ask me 30 questions to help you make a running plan for me. I want to run a full marathon by end of 2027. I prefer morning runs, road running, and no strength training. My 5K is 22 mins, HM is 1:53. Build a structured running plan from Oct 17–Dec 31, 2025, with long runs on Saturday and Sunday rest. Max 40 min on weekdays, 120 min on Saturday."
The AI returned:
result of the analysis of the data
questions to understand you better
Then I answered:
The answers to the 30 questions
"make a table of the exercises for each day. Make the plan with explaination of the exercises."
The AI returned:
A detailed weekly schedule with workout types (easy, tempo, intervals, long run, rest)
Pace targets based on my current fitness
Heart rate guidance
Dynamic explanations for each workout type
Then I asked:
“Now, make a website with all the data above (for all dates in the range), it should have a date choosing option so that when I choose the date, it will show the training plan on that day. It should default to today's date when it is opened, and have button for tomorrow's plan. The website should also have explainations on the type of run, heart rate goals, pace goals, etc. But the explaination should be dynamic, it only explain about the day's workout. Make the colour scheme dark mode with accent of blue.”
The AI generated a complete, self-contained HTML file—no external dependencies, no frameworks—just clean HTML, CSS, and JavaScript.
Google Sites lets you embed custom HTML using the “Embed” feature. Here’s how:
How to Add Your Running Plan to Google Sites
Go to Google Sites
Create a new site or open an existing one (e.g., your personal portfolio)
On the pages tab, click the “+” (Insert) button on the buttom of the sidebar
Select “Full page embed” and give it a name
Select "Add embed" button, then "Embed code"
Copy your entire HTML file (from <html> to </html>)
Paste it into the embed code box
Click “Next”, then “Insert”
Publish your site!
In my case, the single-file approach worked perfectly—no errors, full interactivity.
Building this running plan viewer was more than just a tech project—it was a way to merge my passion for running with the power of modern AI. By starting with real data from StatsHunters, using generative AI to craft a personalized, periodized plan, and deploying it effortlessly on Google Sites, I now have a clean, private, and always-accessible coach in my pocket—no subscription required.
Best of all? You can do it too. Whether you're training for your first 5K or your tenth marathon, your data holds the key to smarter training. With a little prompting and a free hosting platform, you can turn your running history into a dynamic, living plan that evolves with you.
So lace up, export your data, and let AI help you run your best.
Happy running!