How to Make an Academic Personal Website in 20 Minutes
The free template from the video — one index.html to start from, no build step, yours to edit.
The complete personal website built in the tutorial: hero, research areas, publications, teaching and contact, with a dark mode that follows the visitor’s system setting. Plain HTML and CSS — no framework, no npm, nothing to install. Open index.html in a browser, edit it in any text editor, then follow the video to put it online with a Hostinger domain, a GitHub repository and a Vercel deploy.
What's inside
- index.html — the whole page, ready to open in a browser and edit in any text editor
- style.css and a placeholder portrait — the complete site, hero to contact, in three files
- Dark and light themes that follow the visitor’s system setting and remember a manual choice
- A setup guide covering the six strings to replace, plus three free ways to publish
Files
How to use it with the video
- 1Download the zip and unpack it anywhere. Double-click index.html — it opens in your browser, no server needed.
- 2Open index.html in any text editor and find-and-replace the six placeholder strings listed at the top of the file.
- 3Drop your photo into the folder and point the image src at it, or delete the portrait block if you would rather not use one.
- 4Replace the placeholder numbers in the stats band with your real figures, and delete any section you do not need.
- 5Push the folder to a GitHub repository, import it into Vercel, and point your Hostinger domain at it — the video walks through each step. README.md also covers GitHub Pages and Netlify if you would rather skip the domain.
Usage
Free for personal, academic and commercial use. You may adapt these files for your own papers, slides and presentations. Please do not resell them or redistribute them as your own resource pack — link back to this page instead.
Useful links
Looking for files from another video?
New packs go up as videos are published. Tell me which video you need files from and I'll add it.