LinkyTree

A link-in-bio page built with Astro and TailwindCSS. It renders your profile, social links, and link cards from a single data file. Originally created by GNDX

Live at: binarybrains-club.github.io/linkytree/

Stack

• Astro 5
• TailwindCSS 4 (via Vite plugin)
• TypeScript (strict config)

Requirements

• Deno (recommended: 2.X)

Installation

deno install

Commands

deno task setup
deno task dev
deno task build
deno task preview

• deno task setup: interactive CLI to fill basic src/data/site.ts fields (name, handle, bio, social links)
• deno task dev: starts the dev server at http://localhost:4321
• deno task build: generates the static site in dist/
• deno task preview: previews the production build

Configuration / Content

The single source of truth for your site content is:

src/data/site.ts

If you want a quick start, run:

deno task setup

The setup assistant will ask for your name, handle, bio, and then prompt for social links in a fixed order. You can press Enter to skip any social platform and it will not be written into site.ts.

Here you can edit:

• site.seo: title, description, canonical URL, OG image, Twitter cards
• site.profile: avatar, name, handle, and bio
• site.featuredLink: top featured link
• site.socialLinks: list of social networks (with embedded iconSvg)
• site.linkCards: main link cards (title, subtitle, emojis, and href)

Note: robots.txt, sitemap.xml, and humans.txt use site.seo.url to build the origin. If you change the domain, update that field.

Routes

• /: main page (rendered in src/pages/index.astro)
• /robots.txt: generated by src/pages/robots.txt.ts
• /sitemap.xml: generated by src/pages/sitemap.xml.ts
• /humans.txt: generated by src/pages/humans.txt.ts

All these routes are marked with export const prerender = true;.

Project Structure

.
├── public/
├── src/
│   ├── assets/        # images and favicon
│   ├── components/    # Astro components
│   ├── data/          # site data (site.ts)
│   ├── layouts/       # base layout with meta tags
│   ├── pages/         # routes (index + endpoints)
│   └── styles/        # global styles (Tailwind)
├── astro.config.mjs
└── package.json

Styles

Global styles are located in src/styles/global.css:

• CSS variables for colors (--background, --foreground, etc.)
• Utility/component classes (.link-card, .social-icon, blobs/background)

Deploy

Other Static Providers

The build output is static (dist/ folder), so you can also deploy to any static hosting provider (Netlify, Vercel, Cloudflare Pages, GitHub Pages, etc.).

💻 Contributing

Contributions to this project are welcome. If you find a bug or have a suggestion for improvement, please open an issue or submit a pull request.

📃 License

This project is licensed under the MIT License. See the LICENSE file for details.

☕ Support (Original Creator)

If this project helped you learn something new, or if you're feeling particularly generous, you can buy me a coffee. It's greatly appreciated! 😊 GitHub Sponsors