01
Idea → structure
Outline the page
Decide what the page is for, who it is for, and the few sections it needs. For this demo: a strong opening, one explanation, and a visible workflow.
Output: a short written brief
A live learning experiment
From a blank file
to the live web.
This tiny webpage exists to make the publishing process visible. We outline an idea, turn it into code, save it on GitHub, and deploy it through Cloudflare.
Walk through the stepsBuilt together at node labs · Auckland
<h1> Hello, internet. </h1>
The code is just text. The browser turns it into a page.
THE WORKFLOW
Five small moves.
One real webpage.
You do not need to understand everything at once. Follow the hand-off from one stage to the next.
02
Structure → webpage
Build the HTML
HTML gives the page its structure. CSS controls the colours, type, spacing, and layout. Open the file in a browser and keep adjusting until it feels right.
Output: index.html + styles
03
Webpage → history
Save it with Git
Git records a snapshot of the files. Each commit is a named checkpoint, so you can see what changed, collaborate safely, or return to an earlier version.
Output: a local commit
04
History → shared source
Push to GitHub
GitHub stores the repository online. Push the commit and your friend can inspect the same code, suggest an edit, or continue building from another computer.
Output: an online repository
05
Source → live internet
Deploy on Cloudflare
Connect the GitHub repository to Cloudflare Pages. Cloudflare builds the site, gives it a public address, and automatically redeploys after every future push.
Output: a live URL
THE IMPORTANT BIT
Deployment is not the finish line.
It is the loop.
1Edit→
2Commit→
3Push→
4Deploy
Once GitHub and Cloudflare are connected, every improvement follows the same repeatable path.
WHAT YOUR FRIEND JUST LEARNED
A website is not magic.
It is a set of ordinary files, a history of deliberate changes, and a service that puts those files on the internet. The best way to understand the workflow is to ship something small.