Write a one-page site in plain HTML and CSS with about, projects, skills and contact sections, push it to GitHub and publish with GitHub Pages or Cloudflare Pages. Add a custom domain if you own one, run Lighthouse and fix the top issue. Total cost is zero unless you buy a domain.
Tools you need
The 10 steps
Decide the content first
Write, in a text file: a two-line intro, three projects (name, one line, link, what you did), skills grouped by type, and how to contact you. Copy is harder than code; do it first.
Create the files
Make a folder with index.html, style.css and an images folder. Use semantic sections: header, section id="projects", section id="skills", footer.
Write the HTML
One h1 with your name and role, then sections with h2 headings. Each project is an article with a title, one line, a live link and a repository link. Add alt text to every image.
Style it
Pick one font from Google Fonts and two colours. Use a max-width container (about 760px), generous spacing and a single column on mobile with @media (max-width: 700px). Resist adding animations.
Optimise images
Export screenshots as WebP or compressed PNG under 200 KB and set width and height attributes so the page does not jump while loading.
Push to GitHub
Create a repository named <username>.github.io for GitHub Pages, or any name for Cloudflare Pages. Commit and push.
Publish
GitHub Pages: in repository Settings, open Pages and choose the main branch. Cloudflare Pages: connect the repository, leave the build command empty and set the output directory to /. Your site is live in a minute.
Add a custom domain (optional)
Buy a domain, then add it in Pages settings and create the DNS records the host shows you. HTTPS is issued automatically.
Measure and fix
Run PageSpeed Insights on the live URL. Fix the top issue (usually image size or render-blocking fonts) and re-run until performance is above 90.
Make it findable
Add a title, a meta description, Open Graph tags and a robots.txt. Submit the URL in Google Search Console. Put the link on LinkedIn, GitHub and your resume.
Make it yours
- Add a blog with a static site generator such as Astro or Eleventy.
- Add a projects page that pulls your pinned repositories from the GitHub API.
- Add a downloadable PDF resume generated from the same content.
Troubleshooting
| Problem | Fix |
|---|---|
| 404 on GitHub Pages | The repository name or branch is wrong, or index.html is not at the root. |
| Fonts load slowly | Load one font family with two weights and add display=swap. |
| Images look blurry on phones | Export at 2x the display size and compress; set width and height. |
Frequently asked questions
Which is better for a portfolio, GitHub Pages or Cloudflare Pages?
Both are free and fine for a static site. GitHub Pages is simplest; Cloudflare Pages adds faster global delivery and easy redirects.
Do I need a framework for a portfolio?
No. Plain HTML and CSS loads faster and is easier to maintain. Use a framework only if you want a blog or dynamic content.
Should I put my portfolio link on my resume?
Yes, at the top with GitHub and LinkedIn. Make sure every project link on the site works.
Learn this with mentors
Programmes for students and freshers with admissions open: live classes, mentors and project work.
