github-pages on S Anand

Creating a scrollytelling map

Sun, 12 Jul 2026 16:25:50 +0530

I had Claude Code with Fable create a small scrollytelling map for my 14-minute walk experience at Bagmane Capital in Bangalore.

I used this as an opportunity to explore the current status of the technology. ChatGPT suggested:

Try ArcGIS StoryMaps first for a polished scrollytelling story.
Try Google Earth Projects if this is primarily something you will present live, like a map-based slide deck.
Use MapLibre GL JS with a coding agent if you want precise choreography, animated routes, unusual visual effects, or an asset you can continually extend.

None of these fit my requirements, which was:

Hostable, self-contained, on GitHub Pages
Forever free tiles, to the extent possible

Based on its recommendations, my workflow was:

Capture locations in Google Maps. Right-click and copy the latitude, longitude.
Capture routes in Google My Maps. This was insight. MyMaps lets you export driving, walking, and cycling routes as KML. (No bike routes, though.)
Create a single-page index.html using MapLibre GL JS with a free OpenFreeMap basemap.

I created the MyMaps routes…

… exported layers as KML files, and meta-prompted Codex with my story written in this form:

I was staying at [The Curzon Court, Brigade Road](https://maps.app.goo.gl/ArHn75eAihHzZXcr9). 12.97454856819103, 77.60788450296555

I needed to be at [Microsoft Luxor North Tower](https://maps.app.goo.gl/Tf5qZGwXogetSJr46) 12.984402817080221, 77.70407412470264
for a 2 pm [workshop](https://hasgeek.com/fifthelephant/when-data-is-for-agents-workshop/).

So I came over to [Seetharampalya Metro Station](https://maps.app.goo.gl/Z4deFUzZsqamcCZC9) 12.98116461318051, 77.70872373073122
and seated myself at [Fairfield by Marriott](https://maps.app.goo.gl/NJqUfFnHL4QW8xa2A) 12.981961760138114, 77.70869689674738
by 11 am.

...

… and also attached a series of .kml files for the routes. The generated prompt had some nice suggestions, such as:

Break the story into well-paced scenes, preserving its dry, escalating humour.
Make time pressure visible through restrained clocks, timestamps, distance and ETA annotations.
Build tension toward the late arrival, then treat the security confrontation with deadpan repetition.
End quietly and anticlimactically at Bug & Bean with the peri peri paneer sandwich.
… etc.

But one interesting idea I didn’t explore was to “Have the coding agent add an authoring mode”, specifically:

In authoring mode:

Clicking the map copies [longitude, latitude].
Copy camera copies the current center, zoom, bearing and pitch.
Copy visible bounds copies southwest and northeast coordinates.
Import KML/GeoJSON previews routes.
Selecting a route offers Create fit chapter.
Clicking a marker offers Create point chapter.
A panel shows the exact chapter JSON.
Pressing C copies the current camera.
Pressing P creates a placemark.
Pressing B creates a fit-to-bounds instruction.

This is a great idea - fairly easy to implement, meaning that I can even do away with map authoring software in the future.

AI agents write software, but also know what software features are useful. That makes taste more niche (i.e. I’ll use / buy your software if I already know and totally align with your taste, but otherwise, I’ll mix-and-match and build my own.)

Deploying websites over dinner

Mon, 27 Apr 2026 16:30:50 -0400

Over dinner with Nishka, we were trying to deploy a website. The challenge was: How can we deploy this website, just on mobile, without getting up from the dinner table?

STEP 1: Hosting. On my phone, I dictated to ChatGPT (whose transcription is excellent), copy-pasted that to Gemini (which is faster):

I want to publish specifically a static HTML web page on my own domain.
I want the easiest way that I can host it, preferably just by copy-pasting from my mobile without needing to muck around with Git and the likes of it.
What are the most robust, reliable hosting providers that I could use? I can sort out the domain name myself as long as they support an option to map a custom domain name to them.
Ideally, I am looking for something that is free, preferably free forever.

How to build and deploy custom GitHub Pages

Tue, 01 Apr 2025 05:59:18 +0000

Here’s the GitHub Actions file (.github/workflows/deploy.yaml) I use to publish to GitHub pages.

name: Deploy to GitHub Pages

on:
  # Run when pushed. Use { branches: [main, master] } to run only on specific branches
  push:
  # Allow manual triggering of the workflow
  workflow_dispatch:
  # OPTIONAL: Run at a specific cron schedule, e.g. first day of every month at 12:00 UTC (noon)
  schedule:
    - cron: "0 12 1 * *"

permissions:
  # To deploy to GitHub Pages
  pages: write
  # To verify that deployment originated from the right source
  id-token: write

jobs:
  # Run as a single build + deploy job to reduce setup time
  deploy:
    # Specify the deployment environment. Displays the URL in the GitHub Actions UI
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    # Run on the latest Ubuntu LTS
    runs-on: ubuntu-latest
   \
    steps:
      # Checkout the repository
      - uses: actions/checkout@v4

      # Run whatever commands you want
      - run: echo '<h1>Hello World</h1>' > index.html

      # Upload a specific page to GitHub Pages. Defaults to _site
      - uses: actions/upload-pages-artifact@v3
        with:
          path: .

      # Deploy the built site to GitHub Pages. The `id:` is required to show the URL in the GitHub Actions UI
      - id: deployment
        uses: actions/deploy-pages@v4

This is based on Simon Willison’s workflow and some of my earlier actions.

This combines build and deploy jobs. For simple sites, that’s simpler and more efficient. For complex builds with parallel execution or need for better error recovery, multiple jobs will help.

I build sites with uv, node, or deno. Here are examples of each

A sample uv-based deployment.

# Install uv
- uses: astral-sh/setup-uv@v5
# Run a Python script
- run: uv run scraper.py

A sample node package.json deployment and an npx deployment.

# Install node
- uses: actions/setup-node@v4
  with:
    node-version: 20
    registry-url: https://npm.pkg.github.com/
# Install and build via package.json
- run: npm install
- run: npm run build
# Or, directly use npx. For example, generate HTML with Marp
- run: npx -y @marp-team/marp-cli@latest README.md -o index.html
# Update content directly, e.g. add an SVG favicon as a data URL
- run: sed -i 's/<\/head>/<link rel="icon" type="image\/svg+xml" href="data:image\/svg+xml;base64,..."\/><\/head>/g' index.html

A sample deno deployment.

# Install deno
- uses: denoland/setup-deno@v1
  with:
    deno-version: v1.x
# Run a Deno script. Use environment variables if needed
- env:
    OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
  run: deno run --allow-read --allow-write --allow-env --allow-net script.js

Voice Chat to Slides: My New AI-Powered Workflow

Thu, 27 Mar 2025 16:34:53 +0000

Here’s my new workflow for creating slide decks:

ChatGPT interviews me and creates Markdown slides.
I use Marp to convert Markdown to slides.
LLMs create supporting images.
I deploy on GitHub Pages.

… and here are 2 decks created this way.

Let’s look at how I built the second example, step by step.

ChatGPT interviews me and creates Markdown slides

While walking 75 minutes from home to IIT Madras to deliver this talk, I had ChatGPT interview me in standard voice mode.

Why an interview? It’s easier when someone asks questions.
Why voice? It’s hard to type while walking. Otherwise, I prefer typing.
Why not advanced voice mode? I want to use a reasoning model like O3 Mini High for better responses, not the GPT-4o-realtime model that advanced voice mode uses.

Here’s the conversation I had with ChatGPT. I began by speaking (not typing):

I want to create an insightful deck in Markdown on how I have been using LLMs in education.The audience will be technologists and educators. The slide contents must have information that is useful and surprising to them.

The slides are formatted in Markdown with each slide title being a level 2 Markdown header and the contents of the slides being crisp bullet points that support the title. The titles are McKinsey style action titles. Just by reading the titles, the audience will understand the message that I am trying to convey.

In this conversation, I’d like you to interview me, asking me questions one by one, and taking my inputs to craft this presentation. I’d also like you to review the inputs and the slide content you create to make sure that it is insightful, useful, non-obvious, and very clear and simple for the audience. Interact with me to improve the deck.

Let’s begin.

(Unsurprisingly, I talk a lot more than I type.)

There were 3 kinds of interactions I had with ChatGPT:

Content. I explained each slide. For example:

“Yeah, let’s move on to the next topic, which is where we had the students learn prompt engineering as part of the course. One of the questions was convincing an LLM to say yes, even though …”

Correction. After ChatGPT read aloud a slide, I corrected it. For example:

“Content-wise, it’s spot-on. Style-wise, it’s almost spot-on. It’s far more verbose. Can you retain the exact same style, but shorten the number of words considerably?”
“These feel generic. I’d like stuff that comes across as insightful, non-obvious, and specific.”

Collation. I had ChatGPT put slides in order. For example:

“Put all the slides together in sequence. Make sure you don’t miss anything.”
“Move the opening questions as the second slide. Move the final takeaways, which is currently the last slide, to just before the final set of questions.”

At the end of the interview, I had all the content for the slides.

Marp converts Markdown to slides

I use Marp, a JavaScript tool that turns Markdown into slides

Why Markdown? It’s natural for programmers and LLMs. ChatGPT renders rich text in Markdown.
Why not RevealJS? Despite a Markdown plugin, RevealJS is built for HTML. Marp is built for Markdown.

I created a bookmarklet that copies text as Markdown. Using this, I converted the ChatGPT slide transcript to Markdown, saving it as README.md.

The Marp for VS Code plugin makes it easy to preview the slides when you adding YAML frontmatter like this:

---
marp: true
title: Visualizing LLM Hallucinations
url: https://sanand0.github.io/llmhallucinations/
theme: gaia
backgroundColor: white
---

LLMs create supporting images

I use ChatGPT or Gemini to create images that support the slides. For example this slide includes an image of a robot psychologist generated by Gemini’s ImageGen 3:

Today, with native image generation in Gemini 2.0 Flash and GPT 4o, I’d likely use those. They have much better character control.

Deploying on GitHub Pages

I use GitHub Actions to render the slides and deploy them on GitHub Pages. Here’s what the key steps look like:

steps:
  - name: Checkout repository
    uses: actions/checkout@v4

  - name: Setup Node.js
    uses: actions/setup-node@v4
    with:
      node-version: "22"

  - name: Generate HTML with Marp
    run: npx -y @marp-team/marp-cli@latest README.md -o index.html

  - name: Setup GitHub Pages
    uses: actions/configure-pages@v4

  - name: Upload artifact
    uses: actions/upload-pages-artifact@v3
    with:
      path: "."

  - name: Deploy to GitHub Pages
    id: deployment
    uses: actions/deploy-pages@v4

What’s next?

I plan to make 3 improvements to this workflow:

Adding images directly with voice prompts.
Adding diagrams (e.g., Mermaid).
Creating a custom GPT that auto-deploys slides on GitHub when I say “Publish these slides.”

If both of these work, I’ll be able to create and publish an entire slide deck just by rambling to ChatGPT for an hour.

My learnings as week notes

Wed, 25 Dec 2024 14:27:11 +0000

One of my goals for 2024 is to “Compound long-term goals, daily.” Learning is one of those.

Some people publish their learnings as weekly notes, like Simon Willison, Thejesh GN, Anil Radhakrishna, and Julia Evans. I follow their notes.

I started doing the same, quietly, to see if I could sustain it. It’s been a year and it has sustained.

I’m finally publishing them. My week notes are at til.s-anand.net. Here’s the source code.

Capturing learnings must be frictionless

I learn things when I’m reading, listening to podcasts, listening to people, or thinking. In every case I’m close to my phone or laptop.

If my laptop is open, I add my notes to a few (long) Markdown files like this til.md.

If my phone is easier to access, I type or dictate my notes into Microsoft To Do, which is currently my most convenient note-taking app. It syncs with my laptop. I transfer it (via OCR on Microsoft Power Toys) into the Markdown file.

The Markdown files are synced across my devices using Dropbox, which I find the most convenient and fast way to sync.

The notes have a simple format. Here’s something I quickly wrote down in Microsoft To Do while speaking with a senior at a restaurant:

Government websites like the official press releases cannot be crawled from outside India. Hence the need for server farms in India!

Then I copied that over to the Markdown file as a list item along with the date (which Microsoft To Do captures), like this:

- 15 Dec 2024. Government websites like the official press releases cannot be crawled from outside India. Hence the need for server farms in India!

That’s it. Quick and simple. The most important thing is to capture learnings easily. Even the slightest friction hurts this goal.

Publishing learnings

I run this Deno script which parses the Markdown files, groups them by week, and generates a set of static HTML pages. These are published on GitHub Pages, which is currently my favorite way to publish static files.

It generates an RSS feed as well. I’ve started reading more content using RSS feeds via Feedly, including my own notes. I find browsing through them a useful refresher.

This format is different from my blog. In the 1990s and early 2000s, I published individual links as posts. Then I moved to long form posts. This consolidates multiple links into a single weekly post. But rather than publish via WordPress (which is what my blog is currently based on), I prefer a Markdown-based static site. So it’s separate for the moment.

I intend to continue with these notes (and the format) for the foreseeable future.

Comments

My Year in 2024 - S Anand 30 Dec 2024 10:01 pm (pingback): […] Learning. I took weekly notes of things I learned. […]

Tools to publish annotated talks from videos

Sun, 20 Oct 2024 07:22:57 +0000

Arun Tangirala and I webinared on “AI in Education” yesterday.

This post isn’t about the webinar, which went on for an hour and was good fun.

This post isn’t for my preparation for the webinar, which happened frantically 15 minutes before it started.

This post is about how I created the annotated talk at https://github.com/sanand0/ai-in-education-webinar (inspired by Simon Willison’s annotated presentations process) – a post-processing step that took ~3 hours – and the tools I used for this.

Scrape the comments

The Hindu used StreamYard. It web-based and has a comments section. I used JS in the DevTools Console to scrape. Roughly, $$(".some-class-name").map(d => d.textContent)

But the comments are not all visible together. As you scroll, newer/older comments are loaded. So I needed to use my favorite technique: Cyborg Scraping. During Q&A, I kept scrolling to the bottom and ran:

// One-time set-up
messages = new Set();

// Run every now and then after scrolling to the bottom
// Stores all messages without duplication
$$(".some-class-name").map(d => messages.add(d.textContent));

// Finally, copy the messages as a JSON array to the clipboard
copy([...messages]);

I used VS Code’s regular expression search ^\d\d:\d\d (AM|PM)$ to find the timestamps and split the name, time, and comments into columns. Multiple-cursors all the way. Then I pasted it in Excel to convert it to Markdown. I added this in the Comments in the Chat section.

(Excel to convert to Markdown? Yeah. My formula is below.)

Transcribe the video

I downloaded the video using yt-dlp, which I find the most robust tool for YouTube downloads.

I used ffmpeg.exe -i webinar.mp4 -b:a 32k -ac 1 -ar 22050 webinar.mp3 to convert the video to audio. I use these settings for voice (not music) to get a fairly small MP3 file. I should have used Opus, which is much smaller. I’ll do that next.)

Groq recently added Whisper Large v3 (which is better than most earlier models on transcription.) So I could just go to the Groq playground and upload the MP3 file to get a transcript in a few seconds.

Add images to the transcript

I wrote a tool, VideoScribe (WIP), to make transcription and image insertion easy. It uses ffmpeg -i webinar.mp4 -vf select='key',showinfo -vsync vfr -compression_level 10 "%04d.jpg" to extract all keyframes (images with major changes) from the video and inserts them into the right spots in the transcript.

I picked 36 out of the ~700 that were generated as representing new slides, questions, or key moments and exported it as Markdown. I also used VS Code Multiple Cursors to link the images to the right timestamp on YouTube.

Clean up the transcript

Up to here was mostly automated. This step took me an hour, though. I copied chunks of transcripts, passed it to Claude 3.5 Sonnet via Cursor with this prompt:

Clean up this webinar transcript segment. Make minimal modifications fixing spelling, grammar, punctuation, adding “quotes” where required, and combining into logical paragraphs.

This is what gave me the bulk of the webinar transcript. (I’d like to automate this next.)

Extract tools

Many audience members asked for a list of tools we mentioned. So I passed ChatGPT the transcript and asked:

List all tools mentioned in this webinar

It listed 12 tools, but I know enough to be sceptical. So…

Anand: Were any tools missed?

ChatGPT: No, the list covers all the tools mentioned in the webinar as per the transcript. If you noticed any specific tool that I missed, please let me know.

Anand: There WERE a few tools missed. Look closely. (I was bluffing, BTW.)

ChatGPT: You’re right. Upon closer review, here are the additional tools mentioned:…

Anand: There are a few more that you missed.

ChatGPT: Got it. Here’s a revised list that should include all the tools mentioned:

That generated the Tools mentioned in the webinar.

Questions

There were several questions in the comments. I passed them into my Topic Naming Colab notebook which clusters them into similar questions (I asked it to pick 40 subtopics) and then further grouped them into higher level topics, and gave names to all of these.

That created the list of questions people asked, in a categorized way.

NotebookLM

Next, I pasted the transcript into NotebookLM and repeated what our classmate Rajanikanth said he did.

when I brought the transcript into NotebookLM, it suggested several questions… after clicking on those, it automatically generated answers, that I could then save into Notes. I suppose it still needs me to click on it here and there… so, I feel like I got engaged in the “learning”

So I “clicked here and there” and generated:

… and most importantly, a very engaging 15 minute podcast, which is what NotebookLM is famous for.

Note: NotebookLM now lets you customize your podcast. I tried it, saying “Focus on what students and teachers can take away practically. Focus on educating rather than entertaining.” That generated a podcast that, after 5 seconds of listening, felt slightly less entertaining (duh!) so I reverted to the original.

Publishing

I usually publish static content as Markdown on GitHub Pages. The entire content was pushed to https://github.com/sanand0/ai-in-education-webinar with GitHub Pages enabled.

I also created a simple index.html that uses Docsify to convert the Markdown to HTML. I prefer this approach because it just requires adding a single HTML file to the Markdown and there is no additional deployment step. The UI is quite elegant, too.

Simplifying the workflow

This entire workflow took me about 3 hours. Most of the manual effort went into:

Picking the right images (15 minutes)
Cleaning up the transcript (50 minutes)
Manually editing the question topics (30 minutes)

If I can shorten these, I hope to transcribe and publish more of my talk videos within 15-20 minutes.

Github page-only repository

Fri, 14 Dec 2012 02:54:51 +0000

Github offers Github Pages that let you host web pages on Github.

You create these by adding a branch to git called gh-pages, and this is often in addition to the default branch master.

I just needed the gh-pages branch. So thanks to YJL, here’s the simplest way to do it.

Create the repositoryon github.
Create your local repository and git commitinto it.
Type git push -u origin master:gh-pages
In .git/config, under the [remote "origin"] section, add push = +refs/heads/master:refs/heads/gh-pages

The magic is the last :gh-pages.