A link-in-bio page is the single URL you put in your profile that leads to everything else — your Discord, your channels, your projects. It's the perfect first web project: pure HTML and CSS, no backend, no database, no build step. This guide gives you a complete page and puts it online on Falix using the static-site setup.
| At a glance | |
|---|---|
| You need | A server running the PHP Web Server application (only its nginx part is used — no PHP) |
| Build with | Plain HTML + CSS |
| Plan | Any — free runs while your session timer has time, premium runs 24/7 |
| Time | About fifteen minutes |
This build rides on the static website setup — deploy that first (it wires your SERVER_PORT into nginx automatically), then drop these files into public/.
Step 1 — Get the static setup running
Follow Host a static website to deploy the Static Website template. It hands you a public/ folder served by nginx on your public port. You'll replace its sample files with the two below.
Step 2 — The page
Put this in public/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yourname</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<main class="card">
<img class="avatar" src="/avatar.png" alt="avatar" onerror="this.style.display='none'">
<h1>@yourname</h1>
<p class="bio">Builder. Gamer. I host things on Falix.</p>
<nav class="links">
<a class="link" href="https://discord.gg/yourinvite">Discord</a>
<a class="link" href="https://github.com/yourname">GitHub</a>
<a class="link" href="https://youtube.com/@yourname">YouTube</a>
<a class="link" href="mailto:[email protected]">Email me</a>
</nav>
<footer>Hosted on Falix</footer>
</main>
</body>
</html>Step 3 — The style
Put this in public/style.css:
:root { --bg:#0b0b16; --card:#151527; --accent:#6c5ce7; --text:#eef; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center;
font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); padding: 1rem; }
.card { background: var(--card); padding: 2rem; border-radius: 18px; width: 100%;
max-width: 420px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
h1 { margin: .5rem 0 .25rem; }
.bio { opacity:.8; margin-top:0; }
.links { display: grid; gap: .75rem; margin: 1.5rem 0; }
.link { display:block; padding: .9rem; border-radius: 12px; text-decoration:none;
background: var(--accent); color:#fff; font-weight:600; transition: transform .1s; }
.link:hover { transform: translateY(-2px); }
footer { opacity:.5; font-size:.8rem; }Optionally drop a square public/avatar.png next to them for your picture — the onerror in the HTML hides the image cleanly if you don't.
Step 4 — See it live
Content in public/ is served live from disk — no restart needed for edits. Open your server's address (from the Network page) and there's your page. Change a link, save, refresh. That's the whole loop.
💡 Tip: If a change doesn't show, it's your browser's cache, not the server. Hard-refresh with Ctrl/Cmd+Shift+R.
Make it yours
Everything is in those two files:
| Want to change | Where |
|---|---|
| Your name / bio | The <h1> and .bio in index.html |
| The links | The <a class="link"> list — add or remove as many as you like |
| Colours | The --bg, --card, --accent variables at the top of style.css |
| Your picture | Replace public/avatar.png |
There's no framework to learn here — it's the fundamentals of the web. When you want to go deeper on HTML and CSS, Mozilla's official reference at developer.mozilla.org is the place.
Step 5 — A real address
The address:port URL works but isn't pretty to share. When you're ready for a proper domain with automatic HTTPS, follow Domains and HTTPS.
Troubleshooting
- 404 on the home page — the file must be exactly
public/index.html(lowercase). Check the name and that it's insidepublic/. - Styles don't apply — the
<link>points at/style.css, so the file must bepublic/style.css. Check the path and hard-refresh. - A change doesn't show — browser cache. Hard-refresh; static files serve live, so no restart is needed for content.
- The site won't load at all — that's reachability, not files. Work through I can't reach my app.