linkytree — Astro Starter Template

SHA-256: 11507eb9887bacb27e562b34d287b930bad82c23e4ff06d3dd9d66403e86addf

2026-10-05T00:14:23.710Z

# 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.

![LinkyTree Preview](https://s3.us-east-1.amazonaws.com/gndx.dev/linkyTree.png)

[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/gndx/linkytree)

**Live at:** [linkytree.error427.com](https://linkytree.error427.com)

## Stack

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

## Requirements

- Node.js (recommended: LTS)
- npm

## Installation

```bash
npm install
```

## Commands

```bash
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:

```bash
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

```text
.
├── 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`:

```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):

   ```bash
   npm install -g wrangler
   ```

2. **Authenticate with Cloudflare**:

   ```bash
   wrangler auth login
   ```

3. **Build the project**:

   ```bash
   npm run build
   ```

4. **Deploy to Workers**:
   ```bash
   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.

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

## 📃 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](https://github.com/sponsors/gndx)