Coding · ·

Your first website

You'll be creating a static website from the very basics, running a local server and then using Git as version control. Your website will be deployed to a subdomain of compsci.me.

Anatomy of a web page

When you visit a web page, a request is made to a server which sends an HTML response. That HTML response may then trigger more requests, for example for CSS, JavaScript, images and other files.

all web pages have HTML (hypertext markup language) which defines the content and stucture of the page
most websites have CSS (cascading style sheets) to add style (colours, fonts, spacing, ...) to the content
most websites have JavaScript to add interactivity
most websites have images so you can see cute cats
some websites also have music or videos to enable rickrolling

In this guide we'll only be using HTML and images, adding CSS and JavaScript later.

Your website's folder

In ~/code make a new folder called website with a subfolder within it called public. All the web pages (and CSS, JS, images, ...) you make for your website which you want to be accessible in a web browser need to go in that public folder. Later in the course, outside that public folder (but inside the website parent folder) you'll be creating server-side code that you want to keep private. In addition, you may want to put a README.md in that website folder now, perhaps to keep track of tips and tricks and things to remember for yourself.

Starting and editing web pages

Our general workflow when creating web pages:

Make a file named whatever.html (inside your website/public folder)
Open it in a web browser
Also open it in a text editor (eg VSCode or even Notepad)
Edit it in the text editor
Regularly save it and refresh in browser, easiest with (on Windows):
- CTRL+S to save
- ALT+TAB to switch windows
- CTRL+R to refresh

Web pages should start with <!doctype html> to tell the browser you know what you're doing, and they're also required to have a <title>Title</title>.

A very basic template to start from:

<!doctype html>
<title>My first web page</title>
<h1>Hello world</h1>
<p>Hi!</p>

For quick pages I don't bother with <html>, <head> and <body> tags as they get auto-added for you (but you need to know them for exams).

Run a server locally

You can just make a file and click it to open it in a web browser (if you haven't already, try that with the template above). If you do this, the URL in the web browser will be eg file:///C:/Users/jake/page.html. But URLs that start file:// aren't ideal, as they won't behave the same as real websites.

Instead, we'll create a local web server which can be accessed at URLs starting http://.

Option 1 (recommended): Using Vite

Vite will serve all files in the current folder, including automatic browser reloading whenever you save your HTML.

run bun install -g vite to install Vite globally
add an alias depending on your environment:
- Windows PowerShell: edit your profile file with code $PROFILE, adding function vite { bunx --bun vite @args } to that file, then load your profile file with . $PROFILE
- Linux or WSL: add alias vite='bunx --bun vite' to the end of your ~/.bashrc then load it with source ~/.bashrc
- macOS: add alias vite='bunx --bun vite' to the end of your ~/.zshrc then load it with source ~/.zshrc
in the public folder with your website, run vite (or bunx --bun vite if you had trouble with adding the above alias)
you should now be able to access your website at eg http://localhost:5173/

Because Vite automatically reloads, you no longer have to ALT+TAB and CTRL+R when you save a file.

Option 2: Using Bun's static site server

This should be the quickest and simplest option, but a downside is that it doesn't serve all files, just the HTML files, and it serves them at slightly different URLs/paths. Just run:

bun *.html

... and Bun will serve all files with the .html extension. It does other clever stuff as well like find linked CSS and images, and it automatically reloads in the browser whenever you change a file (saving you from ALT+TAB and CTRL+R).

Word of warning though: it doesn't serve up all files in the folder, which can sometimes cause problems. For that, use option 1 above instead with Vite.

Put `index.html` files in folders

When you run a server (like Vite above), when it receives a request to / it will usually look for a file called index.html and respond with it (or respond with 404 if not found). If you have a file cat/index.html then someone can access it just by going to /cat/. It's wise to always have an index.html file in any folder, especially your main folder.

Basic HTML to learn first

Start by checking you can use:

<h1>Different</h1> <h2>level</h2> <h3>headings</h3>,
<p>paragraphs</p>,
<div>block containers</div> and
<span>inline containers</span>.

Sprinkle some <b>bold</b> and <i>italic</i> text around too.

You need to know about <a href="./page2.html">links</a> and <img src="cat.jpg"> images.

Note that all the tags above have a matching closing </tag>, except for the image <img> which is self-closing.

Try putting an image in your folder and create a second HTML page and make it so you can click an image and it takes you to the other page, which also has a link back to the first page.

Spend a bit of time playing around with these tags and trying to create 2 or 3 very basic web pages that link together. You may want to use the HTML guides on MDN or W3Schools to help.

Using version control with your website

Version control tools such as git allow us to keep track of changes to files/projects, saving a complete history of who changed what and when. GitHub is a company (now owned by Microsoft) which provides a platform for keeping track of your git projects and much more.

Create a `~/.gitconfig`

make a file ~/.gitconfig (eg by typing code $HOME/.gitconfig), adding the following (being sure to use your name and the email you use in GitHub):

[user]
  name = "your_name"
  email = "your_email" # the email *you* use for GitHub
[pull]
  rebase = false # deals with merging vs rebasing on pull
[core]
  autocrlf = true # deals with Linux vs Windows file endings
[init]
  defaultBranch = main
[credential]
  helper = manager-core # sometimes needed if using Windows

Setting up your repo

You're going to turn the simple website you've just made into a git repository, which you'll then track on GitHub:

this assumes you have your web pages in eg ~/code/website and that you're inside that folder in a terminal in VSCode
... make sure you're in website (and NOT in public)
from https://github.com/cambridge-maths-school press the green 'New' button
give your repo a name in the format [year]-[name] eg 2025-john (lower-case) if your name is John and you started CMS in 2025
keep other settings as the defaults (private, do not add a README, etc)
IMPORTANT: make sure you're in the correct folder (eg ~/code/website rather than your home folder ~/ or ~/code/website/public) or you'll be adding everything to GitHub or just the public folder
run git init which turns the folder into a git repo (this creates 'hidden' subfolder called .git, which tracks all your changes)
- if Windows complains about not knowing what git is, first try winget install --id Git.Git -e --source winget
run echo '.vite' >> .gitignore to create a file called .gitignore telling git to ignore config files made by Vite
run git status and it will tell you you have some files to add
run git add . to tell git to track all files currently in the folder (you may see a warning about LF vs CRLF which you can ignore)
run git status and you'll see there are some changes ready to commit
run git commit -am 'my first commit' to save the changes to your local git repo
run git remote add origin [url] where [url] is the one shown on GitHub.com for your repo (without hte square brackets around it)
run git push -u origin main to upload your changes to GitHub
you should now be able to browse your code on GitHub.com

Making changes in your repo

edit your web page in some way
run git status and you'll see you have a change
if you have any new files you'll need to git add . to add them
run git diff to see the details of that change
run git commit -am 'some change' to commit that change to the repo
run git push to upload that change to GitHub
in your repo on GitHub.com, click where it says '2 commits' to see the details and history of the changes in your repo

Future changes

Whenever you make changes in the future, at a minimum you'll need to do git commit -am 'whatever' and git push. I also recommend running git status and git diff before.

When you add new files, you'll need to run git add . (or git add [filename]) to tell git you want to track them, before you do commits/pushes.

If you want to have the same repo on another device, git clone [repo] on that device.

If you edit a file directly on GitHub.com, or on a different device, you should git pull those changes.

Putting your website online

Mr Gordon will put your website online, on a server he manages. We have a home page at https://compsci.me/ which will include a link to your website.

Future deploys

To deploy a new version of your website, just make a change to it and commit and push your repo to GitHub. It usually deploys in under 5s.

Optional: putting a website online yourself

NOTE: this is optional as Mr Gordon will put your website online, but you may like to try this for any other website you want to use.

See the legacy file for other ways to get your website online yourself. Some are free, some cost a few quid a month. The best is probably with Deno Deploy.