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.

Live at: linkytree.error427.com

Stack

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

Requirements

• Node.js (recommended: LTS)
• npm

Installation

npm install

Commands

npm run setup
npm run dev
npm run build
npm run preview

• npm run setup: interactive CLI to fill basic src/data/site.ts fields (name, handle, bio, social links)
• npm run dev: starts the dev server at http://localhost:4321
• npm run build: generates the static site in dist/
• npm run 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:

npm run 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

Cloudflare Workers

This project is configured to deploy to Cloudflare Workers using the wrangler.jsonc file. The deployment is static, which means the site is completely generated at build time and doesn't require a runtime server.

Why is it static?

• Performance: The site is served as static files from Cloudflare's CDN
• Cost: No server or runtime costs
• Scalability: The CDN automatically handles traffic without needing to scale servers
• Security: Smaller attack surface with no server-side processes

Name Configuration

To change the deployment name, edit the name field in wrangler.jsonc:

{
  "name": "your-name-here",
  // ... other configurations
}

Static Files and .assetsignore

The public/.assetsignore file controls which files are excluded from static assets:

# dist/.assetsignore
_worker.js
_routes.json

These files are excluded because they are internal Workers configuration files that don't need to be served as static assets.

Deployment Instructions

1. Install Wrangler CLI (if you don't have it):

   npm install -g wrangler

2. Authenticate with Cloudflare:

   wrangler auth login

3. Build the project:

   npm run build

4. Deploy to Workers:

   wrangler deploy

The site will be available at https://your-name.workers.dev or your custom domain if you configured one.

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

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