返回工具列表
HTML Link-in-Bio Builder
ContentGenerate a blazing fast static HTML alternative to Linktree.
ttb run link-in-bio-generator
Profile Info
Your Links
2/5 maxStyling Output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jane Doe | Links</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #09090b;
color: #ffffff;
display: flex;
justify-content: center;
min-height: 100vh;
padding: 40px 20px;
}
.container {
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #ffffff22;
}
.header { text-align: center; }
.name { font-size: 20px; font-weight: bold; margin-bottom: 8px; }
.bio { font-size: 14px; opacity: 0.8; }
.links { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.link-btn {
display: block;
width: 100%;
padding: 16px;
background-color: #18181b;
color: #ffffff;
text-align: center;
text-decoration: none;
border-radius: 12px;
font-weight: 500;
transition: transform 0.2s, opacity 0.2s;
border: 1px solid #ffffff11;
}
.link-btn:hover { transform: scale(1.02); opacity: 0.9; }
</style>
</head>
<body>
<div class="container">
<img loading="lazy" src="https://github.com/shadcn.png" alt="Avatar" class="avatar">
<div class="header">
<div class="name">Jane Doe</div>
<div class="bio">Content Creator | Tech Enthusiast</div>
</div>
<div class="links">
<a href="https://example.com" class="link-btn" target="_blank">My Portfolio</a>
<a href="https://twitter.com" class="link-btn" target="_blank">Twitter</a>
</div>
</div>
</body>
</html>分享此工具：
如何使用 HTML Link-in-Bio Builder
Fill out your profile information (Name, Bio, and Avatar URL). Then, add up to 5 links utilizing standard URLs and custom titles. Use the styling section to pick beautiful background and button colors. The tool dynamically generates purely static, blazing-fast HTML. Click the "Copy Code" button to grab your complete web page.
1
Enter your parameters
Configure the inputs for the Link In Bio Generator according to your specific needs.
2
View real-time results
The utility instantly processes your request and displays the calculated outputs directly in your browser.
3
Copy or Download
Click the copy icon next to the final output to instantly grab the result, or export it if applicable.
常见问题
Where do I put the generated HTML?+
You can paste this code directly into an index.html file and host it completely for free on services like Vercel, Netlify, or GitHub Pages. You now own your own Linktree alternative without any monthly fees!
Why use this instead of Linktree?+
By hosting your own link-in-bio, you retain 100% control over your SEO, branding, and analytics. Plus, static HTML loads instantly, which greatly reduces drop-off rates from impatient followers clicking your profile link.