Center for Smart Streetscapes, Columbia University
New York, USA
keremturkcan.com · mkt2126@columbia.edu
Move with the arrow keys, a presentation clicker, or the buttons at the bottom left; the gear at the bottom right opens the slide settings.
The finished setup
At the end of the eight steps, one folder exists in two places, on GitHub and on this computer, and a browser opens the page stored inside it.
Four of the boxes are the same folder, as a repository online, as a copy written to disk, as an open workspace, and as a page in the browser; GitHub Desktop is the program that writes the copy.
Cost: a GitHub account, GitHub Desktop, and Visual Studio Code are free to download and to use.
Three programs and one folder
All three programs work on the same set of files, so a change recorded through one of them becomes visible in the other two.
Program
Where it runs
What it does with the folder
GitHub.com
a website
Keeps the shared copy and its history
GitHub Desktop
this computer
Copies the repository onto this computer and sends new commits back
Visual Studio Code
this computer
Opens the files, edits them, and runs the servers
Download GitHub Desktop from desktop.github.com and Visual Studio Code from code.visualstudio.com. Sign in to your GitHub account inside GitHub Desktop before the first clone.
School devices: a managed laptop may block installation, so ask the technology staff to approve both programs beforehand.
What a repository is
Git is a version control system: it watches a folder and stores a complete snapshot of it each time you ask for one, through an action called a commit.
A repository is that folder together with every snapshot Git has stored for it.
History: the Linux kernel developers, and Linus Torvalds in particular, wrote Git in 2005, after BitKeeper, the version control system they had been using, stopped being free of charge.
The hidden .git folder stores the history; the files beside it are the ones you edit.
Step 1: a new repository on GitHub
Sign in at github.com, select + in the upper right corner, then select New repository.
Leave Owner set to your account and type a short name under Repository name.
Write one line of Description.
Choose Public or Private.
Check Add a README file, then select Create repository.
The account name and the description shown here are illustrative.
Public or private?
A class exercise about the planets contains no personal information. Which visibility fits it?
Public lets anyone who finds the repository read the files; the people you name are the only ones who may change them.
Private lets you and the people you invite read it.
Public suits the exercise, because classmates can then read the files without an invitation.
GitHub shows the contents of the README file underneath the file list, so that file carries the description of the project.
Checking Add a README file also gives the repository its first commit, so the clone in Step 2 arrives with a file already inside it.
Never store passwords, keys, or student records in a repository, because a later change of the visibility setting, made by you or by a collaborator, can let other people read a private repository.
The repository page
Creating the repository opens its page, which lists the files and shows the green Code button.
Select Code.
Select Open with GitHub Desktop.
Allow the browser to start GitHub Desktop.
The Code button menu.
What cloning does
Cloning copies every file and the whole stored history from GitHub onto this computer, so you can keep editing and committing while the network is unavailable.
Afterwards the clone remembers the address of the repository on GitHub, so push sends your new commits to GitHub and pull copies other people's commits onto this computer.
Two copies of one repository, each with the complete files and history.
Step 2: the clone in GitHub Desktop
GitHub Desktop opens the Clone a repository window with the Repository field already filled in.
Read Local path, which names the place where the folder will be written.
Select Choose… to pick a different place.
Select Clone and wait for the copy to finish.
The path shown is illustrative; the account name on your computer differs.
Step 3: the folder on this computer
In GitHub Desktop, choose Repository → Show in Explorer, or press Ctrl+Shift+F.
The window that opens shows the cloned files, and its address bar gives the exact place the clone was written to.
Windows hides the folder named .git, which contains the stored snapshots. Leave it untouched.
The folder on disk; the path shown is illustrative.
On macOS: the same menu item reads Show in Finder, and the shortcut uses Command instead of Ctrl.
Step 4: the folder in Visual Studio Code
In GitHub Desktop, open File → Options → Integrations, set the external editor to Visual Studio Code, then press Ctrl+Shift+A.
In Visual Studio Code, choose File → Open Folder and select the cloned folder.
The folder name stands at the top of the Explorer, and every file inside it is listed underneath; the clone starts with the README file alone.
The first file
Select the New File icon at the top of the Explorer, name the file index.html, and type these lines.
<!doctype html>
<html>
<head><title>Orbit Lab</title></head>
<body>
<h1>Orbit Lab</h1>
<p>Mercury is closest to the Sun.</p>
</body>
</html>
<!doctype html>
Announces which version of HTML follows
<head>
Describes the page to the browser
<title>
Names the browser tab
<body>
Contains what the reader sees
<h1> <p>
A heading and a paragraph
Why the name index.html: a server that receives a request for a folder looks inside it for a file with that name.
Step 5: the Live Server extension
Open the Extensions view with Ctrl+Shift+X.
Type live server in the search box.
Confirm that the publisher reads Ritwick Dey.
Select Install.
The Visual Studio Marketplace recorded more than 80 million installations of this extension by July 2026.
Several extensions match this search, so the publisher name identifies the right one to install.
Step 6: the Go Live button
Open index.html in the editor.
Select Go Live in the status bar along the bottom of the window.
The default browser opens at http://127.0.0.1:5500.
Once the server runs, the same button reads Port : 5500, and selecting it stops the server.
What does Go Live start?
Inside Visual Studio Code, Live Server starts a small web server, which listens on port 5500 and answers requests for the files in the open folder.
The same exchange of one request and one response repeats for every image, stylesheet, and script that the page names.
Reading the address
The address that Live Server opened names four things at once.
Reading from the left: the protocol, the host, the port, and the path.
127.0.0.1 is the address a computer uses for itself, so the request never leaves this machine; the name localhost reaches the same place.
An address with no port makes the browser use 80 for http and 443 for https, which is why public addresses rarely show a number.
What happens when the file is saved?
Change the heading in index.html to <h1>Orbit Lab: Mercury</h1> and press Ctrl+S.
Live Server adds a small script to the served page, and that script reloads the page whenever the server reports that a file in the folder was saved.
Nothing left the computer: the browser asked Live Server for the file, and Live Server read it from the folder on this same disk.
What is Python?
The Python documentation describes Python as an interpreted, interactive, object oriented programming language, and credits it with remarkable power and very clear syntax.
Interpreted means that a program called the interpreter reads the source code one statement at a time and carries it out immediately, so a Python file runs without a separate compilation step.
Python includes a standard library, which is the collection of modules distributed with the language itself.
One of those modules, http.server, serves the files of a folder over HTTP, the protocol a browser uses to request a page, which is what the next steps use.
Where Python is used: web servers, data analysis, scientific computing, machine learning, and short scripts that automate repeated work.
Python's beginnings
Guido van Rossum began Python during the Christmas holidays of 1989 at CWI in Amsterdam, and released version 0.9.0 to the newsgroup alt.sources on February 20, 1991.
Five milestones in release order, with even spacing between them.
The name: van Rossum was reading the published scripts of Monty Python's Flying Circus, a BBC comedy series of the 1970s, and wanted a name that was short, unique, and slightly mysterious.
A short Python program
planets = ["Mercury", "Venus", "Earth"]
for name in planets:
print(name, len(name))
Mercury 7
Venus 5
Earth 5
The first line makes a list of three strings, which is what Python calls a piece of text.
The for line runs the indented line once for each item in the list, and each time it sets name to that item.
len(name) counts the characters, so Mercury gives 7 and Venus gives 5.
print writes its arguments, separated by a space, to the terminal.
Indentation carries meaning in Python: the four spaces mark which lines belong to the loop.
Step 7: a terminal in the editor
In the menu bar at the top of the window, select Terminal.
Select New Terminal, or press Ctrl+Shift+`.
The terminal opens in the folder shown in the Explorer, so its prompt ends with the folder name.
Is Python on this computer?
Type this line in the terminal and press Enter.
python --version
When Python is installed, the terminal prints the version it found, such as Python 3.12.4 (illustrative).
Windows also provides a launcher called py, so py --version prints the version when python reports nothing.
If the Microsoft Store opens, or the terminal reports that python was not recognized, install Python from python.org, enable the option that adds Python to PATH, close the terminal, and open a new one.
PATH is the list of folders a terminal searches when it looks for a program name.
A new terminal reads PATH again, so a terminal that was already open before the installation keeps printing the old result.
Step 8: the Python server
With the terminal sitting in the project folder, type this line and press Enter.
python -m http.server 8000 --bind 127.0.0.1
Piece
What it asks for
python
Start the Python interpreter
-m
Run a module from the standard library
http.server
The module that serves the files of the current folder
8000
The port to listen on
--bind 127.0.0.1
Accept requests from this computer only
Not for production: the Python documentation warns against serving a public site with http.server, because the module implements only basic security checks.
What the terminal prints
Serving HTTP on 127.0.0.1 port 8000 (http://127.0.0.1:8000/) ...
127.0.0.1 - - [29/Jul/2026 10:14:03] "GET /index.html HTTP/1.1" 200 -
The first line appears once, when the server begins listening.
Each further line records one request: the address of the computer that sent it, the moment it arrived, the file it named, and the status code the server returned.
The date and time shown are illustrative.
200 is the status code for a file that the server found and sent.
404 is the status code for a name that matches no file in the folder.
This terminal accepts no further commands until the server stops, so press Ctrl+C in it when the session ends.
Live Server and the Python server
Live Server
Python http.server
Started by
The Go Live button
A line typed in the terminal
Usual address
http://127.0.0.1:5500
http://127.0.0.1:8000
Needs
The installed extension
An installed Python
Reloads the page after a save
Yes
No; reload the page yourself
Stopped by
Selecting Port : 5500 in the status bar
Ctrl+C
Both servers may run at once, because they listen on different ports, so the files of the same folder are served at 5500 and at 8000.
Is the page on the internet?
Misconception
“The page is on the internet now, so I can send the address to a classmate.”
127.0.0.1 names the computer that asks, so a classmate who types that address reaches their own computer and finds nothing there.
Readers elsewhere need a hosting service, which keeps the files on a computer that answers requests sent to a public address.
Once the page works on this computer, the usual next step is GitHub Pages, which serves the files of a repository at a public address.
First actions for six common failures
Message or symptom
Where it comes from
What to do first
“python is not recognized”
Python is missing from PATH
Install Python, then open a new terminal
“Address already in use”
Another program is already listening on 8000
Run the command again with 8001
The browser lists file names
The folder has no index.html in it
Create index.html in the folder
The browser reports 404
The address names a file that is absent
Compare the spelling with the Explorer
Go Live is absent
No folder is open, or the extension is missing
Open the folder, then check Extensions
The browser shows the old text
The browser served the page from its cache
Reload the page with Ctrl+F5
Sending the work back to GitHub
Open GitHub Desktop, which lists every file you changed.
Write one short line in Summary.
Select Commit to main, which records the snapshot on this computer.
Select Push origin, which sends the snapshot to GitHub.
Reloading the repository page then shows index.html beside the README file.
A commit records a snapshot in the clone. A push copies the new snapshots to GitHub, so the two copies match again.
Commit often, with a summary naming what changed, because a clear history lets you return to any earlier working version.
The eight steps in order
Steps 1 to 4 put the folder on this computer, and steps 5 to 8 serve it to a browser.
A checklist for the first session
The repository page on GitHub lists README.md.
GitHub Desktop shows the repository name and the local path.
The Explorer in Visual Studio Code shows the folder name and index.html.
The status bar shows Port : 5500 while Live Server runs.
Running python --version prints a version line.
The browser opens http://127.0.0.1:8000 and shows the heading.
Both servers are stopped at the end of the session.
Stop the servers before closing the laptop, so no program keeps a port open after the session.
Sources: GitHub and the editor
GitHub, Creating a New Repository. The Owner and Repository name fields, visibility, the README option, and the Create repository button.
GitHub, GitHub Desktop Keyboard Shortcuts. Ctrl+Shift+F shows the repository in Explorer; Ctrl+Shift+A opens it in the preferred editor; Ctrl+Shift+G opens it on GitHub.
Python, General FAQ. What Python is; Guido van Rossum reading the Monty Python's Flying Circus scripts, and wanting a name that was short, unique, and slightly mysterious.
Guido van Rossum, A Brief Timeline of Python. Version 0.9.0 on February 20, 1991; version 1.0 on January 26, 1994; version 2.0 on October 16, 2000; version 3.0 on December 3, 2008.
Python, http.server. The command line form, port 8000 by default, the bind option, and the statement that the module is not recommended for production.
Mehmet Kerem Turkcan; Associate Research Scientist; Center for Smart Streetscapes, Columbia University; New York, USA; keremturkcan.com; mkt2126@columbia.edu
Intro to AI, Part 7 Appendix IIIFrom a GitHub Repository to a Live Page
1 / 1
Slide settings
Theme
Text size
Step reveal
Slide numbers
Progress bar
Go to slide
→Space next ← previous Home first End last F fullscreen
Presentation clickers work through PageUp and PageDown.
For printed handouts: choose the light theme, set step reveal off, then print.