Figma to Website — nikhil sajjan

Introduction

Building with AI has become significantly easier these days. So when I started building my portfolio, my idea was to always build it in Figma first, then give it to Claude and get the static pages built. This process was fairly easy to do with MCP and everything running around, but the bigger task was to upload it to the website. I checked multiple platforms. I checked my own website hosting platform to see what works, and most of what was around was kind of a paid solution. So, me being a curious person and currently a broke international student, I went ahead and started looking for free alternatives. There were several alternatives that I found on the internet, but I went with GitHub, and the document mostly suggests that. But I've also included how I can use other platforms to do the same, so let's get building/clauding.

Overview

This guide documents how to host a static website (HTML, CSS, JS, images, GIFs) for free using GitHub Pages, and connect it to a custom domain purchased on Hostinger or any other platform. No paid hosting plan is needed — only the domain registration should work well. I mean, who would want to pay the extra 5 dollars for something that's available for free and that you can do on your own?

Stack used: Plain HTML + CSS + JS, hosted on GitHub Pages, domain managed via Hostinger DNS.

Who this is for: Anyone with a static site and a custom domain who wants free, version-controlled hosting without paying for a hosting plan.

Assumptions: I am going with the assumption that you already have a domain purchased, but even if not, it's quite simple and easy to buy one. There are many websites, like GoDaddy, that you can look into.

File structure

Your project folder must have index.html at its root. GitHub Pages looks for this file specifically — any other name won't be served as the homepage.

your-project/
├── index.html       ← homepage (required, must be named exactly this)
├── style.css        ← your stylesheet
├── script.js        ← your JavaScript
├── fonts/           ← font files
└── images/          ← images and GIFs

Keep all assets in subfolders and reference them with relative paths in your HTML, e.g. src="images/photo.jpg", not absolute paths. Absolute paths break when the domain changes.

Honestly, if you are vibe coding, any AI will do a good job of structuring your files, but, you know, just for reference, I'm adding this here.

Setting up Git and pushing to GitHub

Go to github.com and create a new repository. Do not initialise it with a README — leave it empty, then copy the GitHub URL you are on.

If it's your first time using Git on this machine, set your identity first, in the same folder your project is in.

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

Run these commands from inside your project folder (the one containing index.html):

git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/USERNAME/REPO.git   # copy and paste your repo link here
git push -u origin main

Once you set up the above, next time it's just running these three commands below, and your website will update in a few minutes.

git add .
git commit -m "describe what changed"   # (this is optional, honestly)
git push

Enabling GitHub Pages

Go to your repo on github.com
Click Settings → Pages in the left sidebar
Under Branch, select main and keep the folder as / (root)
Click Save

Your site will be live at https://USERNAME.github.io/REPO-NAME within 1–2 minutes.

Important: The repo must be set to Public. GitHub Pages is not available on private repos on the free plan. To change this: Settings → General → scroll to Danger Zone → Change visibility → Make public.

Making the repo public is the only way on GitHub that it becomes free, or else we need to pay for some subscription to GitHub.

Connecting a custom domain (Hostinger DNS + GitHub CNAME)

This connects your domain (e.g. yourname.com) directly to GitHub Pages — no redirect, clean URL, free SSL. This is a lengthy step, but it's worth it, trust me.

Step 1 — Add a CNAME file to your repo

From inside your project folder in the terminal:

echo "yourname.com" > CNAME
git add CNAME
git commit -m "add CNAME"
git push

This file tells GitHub Pages which domain to expect. The value in CNAME is your domain, not your GitHub URL.

Step 2 — Add DNS records in Hostinger

In hPanel, go to Domains → Manage → DNS / Nameservers and add these records:

Type	Name	Value
A	@	185.199.108.153
A	@	185.199.109.153
A	@	185.199.110.153
A	@	185.199.111.153
CNAME	www	USERNAME.github.io

Delete any existing A records pointing to Hostinger's servers before adding these. The 4 GitHub IPs are constant for everyone — they're GitHub's redundant servers.

If Hostinger warns about multiple A records with the same name, confirm anyway. This is expected and correct.

Step 3 — Set custom domain in GitHub Pages

Go to repo Settings → Pages, type your domain (e.g. yourname.com) in the Custom Domain box, and hit Save. GitHub will run a DNS check. This usually passes within 10–30 minutes of adding the DNS records.

You can track propagation at dnschecker.org.

Enabling HTTPS

Once GitHub's DNS check passes, a TLS certificate is provisioned automatically. This can take anywhere from a few minutes to 1 hour. This part generally takes longer than I thought, so I would say patience is the key.

When it's ready:

Go to repo Settings → Pages
The Enforce HTTPS checkbox will become clickable
Enable it

Until HTTPS is enforced, browsers will show a "connection not private" warning to visitors. The site is still loading — it just hasn't got SSL yet. Do not share the URL widely until this is done.

If the checkbox is still greyed out after 1 hour, try removing the custom domain and re-adding it — this triggers a fresh certificate request.

Updating the site after launch (Serviceability)

I think we did it, lesgooooooo! Now your portfolio is live, and your hiring managers are going to call you non-stop, hehehe.

But I think going through this process is worth it, because from now on you just need to make changes with Claude/Codex to your HTML files, and then you just write three lines of code and then, boom, your website will be live with all the changes you made.

These are the three magical commands you need to run every time you make a change.

git add .
git commit -m "describe what changed"   # (this is optional, honestly)
git push

Alternative hosting platforms

Netlify, Vercel and Cloudflare Pages, click to open

GitHub Pages works well for static sites, but here are other free options — Netlify, Vercel, and Cloudflare Pages — with full step-by-step setup below:

Platform	Free tier	Custom domain	Best for
Netlify	Yes	Yes (free SSL)	Auto-deploy from Git, form handling
Vercel	Yes	Yes (free SSL)	Same as Netlify, slightly faster CDN
Cloudflare Pages	Yes (unlimited bandwidth)	Yes (free SSL)	High traffic, global performance
Hostinger shared hosting	No (paid plan)	Yes	If you want cPanel/FTP control

All three free alternatives support connecting a custom domain with DNS records in the same way as GitHub Pages. The DNS setup on Hostinger's side is similar — you would just replace GitHub's IPs with the platform's values.

Netlify

Go to netlify.com and create a free account
Click Add new site → Import an existing project
Connect your GitHub account and select your repo
Leave build settings blank (no build command needed for plain HTML)
Click Deploy site — Netlify gives you a *.netlify.app URL within seconds

To connect your domain, go to Site settings → Domain management → Add custom domain, then add these records in Hostinger DNS (delete the existing A records first). Netlify provisions SSL automatically once DNS propagates.

Type	Name	Value
CNAME	@	your-site-name.netlify.app
CNAME	www	your-site-name.netlify.app

Vercel

Go to vercel.com and sign up with GitHub
Click Add New → Project and import your repo
Leave all settings as default and click Deploy
Vercel gives you a *.vercel.app URL immediately

To connect your domain, go to your project → Settings → Domains, enter your domain and click Add, then add these records in Hostinger DNS. SSL is provisioned automatically.

Type	Name	Value
A	@	76.76.21.21
CNAME	www	cname.vercel-dns.com

Cloudflare Pages

Go to pages.cloudflare.com and create a free account
Click Create a project → Connect to Git
Authorise GitHub and select your repo
Leave build settings blank, click Save and Deploy
Cloudflare gives you a *.pages.dev URL

To connect your domain, go to your Pages project → Custom domains → Set up a custom domain. Cloudflare will ask you to change Hostinger's nameservers to the ones it provides, which hands DNS management to Cloudflare entirely. SSL is provisioned automatically.