Link in Bio Page Builder

How to build your link in bio page

1. Under Profile, type your Name or brand and a Short bio. Line breaks in the bio are kept.
2. Optionally add a Profile photo: drop an image on the drop zone or click it to choose a file. The image is read by your browser and embedded in the page; it is never uploaded.
3. Under Links, fill in the Link text and the Address (URL) of each button. Click Add a link for more, use the ↑ and ↓ buttons to change the order and × to remove one.
4. Under Design, pick a Theme (Light, Dark, Ocean, Sunset, Forest) or set the four colors yourself, then choose the Button shape and the Font.
5. Check the Preview, then click Download index.html. Copy HTML copies the same code if you would rather paste it into an existing site.

Load example fills in a sample profile so you can see how the page looks, and Clear starts over.

What you get

The result is a single HTML file with everything inside it: the styles are inline in a <style> block, the photo is embedded as a data URI, and there is no JavaScript, no tracking script, no web font and no external request. That makes the page very fast (usually a few kilobytes plus the photo), private for your visitors, and easy to keep for years: there is no service that can shut down, change its pricing or add its own branding.

The page is responsive: the buttons fill the width of a phone and stay at a comfortable width on a desktop. It includes a lang attribute, a viewport tag, a title (your name) and a meta description (your bio), so it reads well in search results and link previews. Links to websites open with rel="noopener", and email addresses become mailto: links automatically.

The checks

The Checks list flags links whose address is not a valid web, mailto: or tel: address. Such links are left out rather than published broken, and anything like javascript: is always refused. It also warns when the text contrast of the buttons or the page is below 4.5:1, the WCAG level for normal text, and when the photo is heavy. A 300 × 300 pixel photo is plenty for a 104-pixel round avatar, even on high-density screens.

How to put the page online

The file needs a web address before you can paste it into your Instagram, TikTok or YouTube bio. Three common options:

• GitHub Pages (free): create a public repository, upload index.html, then in Settings → Pages choose to deploy from the main branch. The page appears at https://your-username.github.io/repository-name/.
• Netlify Drop (free): put index.html in a folder and drag that folder onto the Netlify Drop page. You get a random address at once; create a free account to keep the site and choose a nicer name or connect your own domain.
• Your own hosting: upload the file with your host’s file manager or FTP, for example into a links folder, to get https://your-domain.com/links/.

To update the page later, change the form, download the file again and replace the old one.