One file, and nothing else

Everything below assumes you have already given the prompt to an AI and have its answer. That answer arrives in one of two shapes:

• A file you downloaded — usually index.html, sometimes a name the AI chose for itself.
• A block of code you copied out of the chat window.

Either way, the result is a single HTML file, and there is nothing else to it. No pictures, no web fonts, no links out to anywhere. Everything the page needs is inside the one file. That is deliberate: it means you will never have to upload a folder, and you will never discover at the last minute that something went missing.

If you do not have the file yet: go back to the builder, fill in the form, copy the prompt, and paste it into whichever AI you use.

Two minutes now saves an hour later

1. Rename the file index.html. Every service that can put your page online looks for a file with exactly that name as the front page. Renaming it now, while you still remember where it is, removes a confusing step later.
2. Give it a folder of its own — eporfolio/ will do — and put prompt.txt in there with it.
3. Open it: double-click. It opens in your browser. It needs no internet connection to work.
4. Open it on a phone as well. Send it to yourself, or use the phone once the page is online. Most of the people you share this with will read it on a phone, not a laptop.

If the AI gave you code rather than a file: paste it into a plain text editor and save as index.html, with the encoding set to UTF-8. If the editor offers ANSI, Big5 or GB2312 instead, say no — that is how Chinese text turns into garbage.

Two ways to change it

Rewrite the prompt — for anything structural

Open prompt.txt and edit your own words; they are only text. Run it through the AI again and you get a clean new page with no hand-editing scars. Use this route for adding an experience, changing the design, or changing the language of the page. It is almost always the better route, because the AI rebuilds the layout around your new content instead of you nudging it by hand.

Edit the HTML — for a typo or a wrong date

1. Open the file in a plain text editor.
2. Press Ctrl+F (⌘F on a Mac) and search for the sentence you want. It will be sitting between two tags.
3. Change only what is between > and <. Never touch anything between < and > — that part is instruction, not content.
4. Save, then reload the page in your browser.

Read it once more, then check these

• Read it from beginning to end, out loud if you can. Every sentence with a number or a date in it: is that really yours? AI helpfully rounds things up. A school-level award becomes a national one; three months becomes half a year. Correct it, or delete it.
• Delete anything you cannot evidence. That is the whole point of the Claim / Proof / Point structure — a claim with nothing behind it is exactly what a reader should not find on the page.
• Other people. Full names of classmates, a teacher's name, a photograph with faces in it, someone else's work. The page is public, search engines will find it, and deleting it afterwards does not always undo that.
• Your own details. Student number, phone number, address, personal email. None of these belong on a page anyone can read.
• Contact. If you left the contact field blank, there is no way for anyone to reach you. If you want to be reachable, use an address you are happy to have in public.
• Open it on a phone.

You do not need a website for this

Send the file

Email it, or send it through WhatsApp or Telegram — choose Document, not Photo, or it will be compressed into something unusable. AirDrop works. So does your own cloud drive, shared as a file rather than as a link to a preview. Nothing needs to be hosted, and it opens without an internet connection.

Or send a PDF, which is usually better

1. Open the page in your browser.
2. Press Ctrl+P (⌘P), and set the destination to Save as PDF.
3. Open More settings and tick Background graphics. Without it, every colour on your page disappears and you are left with a plain text document.
4. Save it, then open the PDF once and look at where the page breaks fall. A heading stranded alone at the bottom of a page is easy to fix and embarrassing to leave in.

Three routes to a link

A link is what makes the page useful to more than one person. You do not need a server, a domain name, or any money — you need a free account and about ten minutes. All three routes below want the same thing: a folder containing a file named exactly index.html.

Route A — Netlify Drop: the fastest

1. Make a folder with your index.html inside it.
2. Sign in, or sign up, at app.netlify.com. It is free and asks for no card. You can drop a folder without an account, but the site stays password-protected until you claim it — so if you intend to share the link, sign in first.
3. Go to app.netlify.com/drop and drag the whole folder onto the page.
4. You get a link ending in netlify.app. Open it and check that it works.
5. If you want a nicer address, rename the site in its settings — yourname-eporfolio.netlify.app is usually available.
6. To update: drag the new version onto the same project. The link never changes.

Route B — GitHub Pages: the best link, and the longest-lasting

1. Create a free GitHub account.
2. New repository. Name it eporfolio — or, for the shortest possible address, name it yourusername.github.io. Set it to Public. Create.
3. Add file → Upload files. Drag in index.html. Commit changes.
4. Settings → Pages. Under Source, choose Deploy from a branch, branch main, folder / (root). Save.
5. Wait a minute or two. Your link is https://yourusername.github.io/eporfolio/.
6. To update: upload the new file over the old one. The address stays the same.

Route C — Cloudflare Pages: the alternative to A

Workers & Pages → Create → Pages → Upload assets. Name the project, drag in the folder or a ZIP of it, and deploy. Your link ends in pages.dev. Vercel works the same way at vercel.com/drop. Use one of these if Netlify is slow, blocked where you are, or if you simply prefer the look of the address. The free tiers of all of them allow far more traffic than one page will ever see.

What it can do, and what it cannot

Google Sites is a page builder, not a place to keep files. It will not accept your HTML file. That is the first thing to understand, because the other reading of it costs an hour.

What almost everyone tries first

Insert → Embed → Embed code, and paste the whole HTML in. It half-works, and half-working is worse than not working:

• Your page is placed inside a frame on a Google-owned domain. It is not published as itself.
• Google silently removes tags it does not care for.
• Every link inside your page opens in a new tab, and you cannot change that.
• The frame's height is set by hand, in pixels. Too small and your page is cut off; too large and there is a band of empty space beneath it.
• The result reads as a picture of my work inside a Google page, not as a website.

What actually works

1. Publish the file using one of the three routes above. You now have a URL.
2. In Google Sites: Insert → Embed → By URL, and paste that URL. Or simpler still, add a button that says View my ePortfolio and link it. A button never breaks.
3. Use Google Sites for what it is good at: a front page that gathers your ePortfolio page, your CV, a contact form and a few photographs in one place.

Keeping it alive

Keep one folder that is the truth. eporfolio/index.html, prompt.txt, and any notes you made. Back it up — your own cloud drive, or email it to yourself. The whole folder is a few hundred kilobytes.

Updating. Upload the new version and the link stays the same. If you still see the old page, your browser is showing you a cached copy: hard-refresh with Ctrl+Shift+R (⌘⇧R on a Mac). On GitHub Pages, allow a minute or two before you conclude anything is wrong.

More than one page. You can publish several pages from the same folder: index.html as a front page, then one file per experience, such as exchange.html and internship.html. Link between them with the file name alone — href="exchange.html" — and keep the capital letters identical, because these servers treat Exchange.html and exchange.html as two different files. A mismatched capital letter is the most common reason a link returns a 404.

Your own domain — optional, and not now. You can buy a domain for roughly HK$100 a year and point it at any of these hosts. Nothing above requires it, and a github.io or netlify.app address is completely normal on an application. Do this later, or never.

Taking it down. All three services let you delete the site. If you later decide the page should not be public, delete it — do not simply stop looking at it.

When something goes wrong

Chinese text has turned into garbage.

The file was saved in the wrong encoding. Open it in a plain text editor, choose Save As, and set the encoding to UTF-8. Check as well that <meta charset="utf-8"> is the first line inside <head>. This nearly always happens after the file has passed through Word, an old copy of Notepad, or a plain-text field on a phone.

The link gives a 404.

The file is not named exactly index.html — on GitHub, Index.html is not the same thing — or it is sitting inside a subfolder. If you uploaded a folder called eporfolio into a project called site, the address is site.netlify.app/eporfolio/.

GitHub Pages shows a README instead of my page.

Settings → Pages: check the branch and the folder. The file must be in the folder you selected, normally / (root).

I changed it, but the browser still shows the old version.

Cache. Hard-refresh: Ctrl+Shift+R, or ⌘⇧R on a Mac. On GitHub Pages, wait two minutes first.

The layout fell apart after I edited it.

You opened it in Word or Google Docs, which rewrote the file. Go back to your saved copy and edit in a plain text editor.

An image will not load.

There should be no images at all. The prompt forbids them and the page is designed to work offline. The AI added something it was told not to, so regenerate the page rather than trying to repair it.

The page contains numbers or awards I never wrote.

The AI invented them. Delete them, or re-run the prompt. A page with your name on it should never carry a claim you cannot evidence.

The AI's answer stopped halfway.

It hit its length limit. Reply “continue from the last heading”, or ask for the page in two parts.

Things not to do

• Do not put the file in Google Drive and share the link as though it were a web page. Drive will not display it — your reader gets a page telling them there is no preview, and a download button they will not press.
• Do not open the .html file in Word, WordPad or Google Docs. Ever.
• Do not paste the whole HTML into a chat message. It will be truncated and reformatted into nonsense. Send the file, or send the link.
• Do not paste the whole HTML into Google Sites' “Embed code” box and consider it published.
• Do not publish anything containing another person's name, face or personal details without their agreement.
• Do not publish a page you have not read from beginning to end yourself.