OpenLinkTree

An open-source, self-hosted Linktree alternative. Edit one file, deploy anywhere. No accounts, no tracking, no monthly fee.

OpenLinkTree is a beautiful "links-in-bio" page built with Astro. Customize your profile, links, and widgets in a single TypeScript config file — then deploy a static site to Cloudflare Pages, Vercel, Netlify, or GitHub Pages.

🇧🇷 Versão em português abaixo

---

✨ Features

• ⚡ Static site — fast, free to host, works without a database.
• 🎨 Animated WebGL aurora background with a CSS gradient fallback.
• 🧩 Widget system — start with links and coupons; add your own.
• 🪄 One config file — src/config/site.config.ts is everything you edit.
• ♿ Accessible — semantic HTML, focus styles, prefers-reduced-motion aware.
• 📱 Mobile-first responsive layout.
• 🌍 i18n-friendly — set your language with one field.
• 🆓 MIT licensed — fork it, sell it, do whatever.

---

🚀 Quick start

# 1. Use this template (or clone)
git clone https://github.com/YOUR_USERNAME/openlinktree.git my-links
cd my-links

# 2. Install
pnpm install        # or: npm install / yarn / bun install

# 3. Run locally at http://localhost:4321
pnpm dev

Then open src/config/site.config.ts and start editing.

---

✏️ How to customize

Everything you need is in one file: src/config/site.config.ts.

1. Profile

profile: {
  name: "Ada Lovelace",
  handle: "@ada",
  bio: "Mathematician · First programmer · Tea enthusiast",
  avatar: "/images/avatar.jpg",  // drop your file in public/images/
}

2. SEO

seo: {
  title: "Ada Lovelace — Links",
  description: "Curated links from Ada Lovelace.",
  lang: "en",                    // or "pt-BR", "es", "fr"...
  ogImage: "/images/og.png",     // 1200x630 recommended
}

3. Theme

Tweak colors and font. The three aurora colors drive the animated background.

theme: {
  bg: "#FAF5EE",
  text: "#1A120D",
  textMuted: "rgba(26,18,13,0.6)",
  accent: "#8B5E3C",
  accentStrong: "#6B4226",
  accentLight: "#E8D5C0",
  cardSurface: "rgba(255, 255, 255, 0.72)",
  radius: "16px",
  maxWidth: "480px",
  fontFamily: "DM Sans",
  fontUrl: "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap",
  aurora: { color1: "#FAF5EE", color2: "#F0E2D0", color3: "#E8D5C0" },
}

💡 Tip: to use a different Google Font, copy the embed link from fonts.google.com, update fontFamily and fontUrl.

4. Widgets

A widget is a block under the hero. Add as many as you want, in any order.

links widget

{
  type: "links",
  items: [
    {
      label: "My website",
      href: "https://ada.dev",
      description: "ada.dev",
      icon: "globe",
      highlight: true,            // solid accent treatment, draws the eye
    },
    { label: "Email", href: "mailto:hi@ada.dev", icon: "mail" },
    { label: "GitHub", href: "https://github.com/ada", icon: "github" },
  ],
}

Built-in icons: instagram, twitter, x, github, linkedin, youtube, tiktok, twitch, spotify, discord, whatsapp, telegram, mail, phone, globe, link, store, kit, heart, star. Need another? Add an SVG case in src/icons/Icon.astro.

coupons widget

Discount cards with a one-click "copy code" button.

{
  type: "coupons",
  title: "Featured discounts",
  items: [
    {
      brand: "Acme Co.",
      description: "Healthy snacks delivered.",
      code: "ADA10",
      discount: "10% off",
      href: "https://acme.example",
      logo: "/images/acme-logo.png",   // optional
      brandBg: "#1552CC",              // optional — colored card
      brandAccent: "#0A2F7A",
      brandText: "#FFFFFF",
    },
  ],
}

5. Adding a new widget type

1. Add a case to the Widget union in src/types/site.ts.
2. Build a component in src/components/ (look at LinkCard.astro as a reference).
3. Render it inside the widgets.map(...) block in src/pages/index.astro.

That's it. The config types and the page stay strict-typed.

---

🌐 Deploy

This is a static site. After pnpm build you get a dist/ folder you can host anywhere. Common options:

Cloudflare Pages (recommended — free, fast)

1. Push the repo to GitHub.
2. Cloudflare Pages → Create project → connect your repo.
3. Build settings:
   • Framework preset: Astro
   • Build command: pnpm build (or npm run build)
   • Build output directory: dist
4. (Optional) Add a custom domain like links.yourdomain.com.

Vercel / Netlify

Both auto-detect Astro. Just import the repo. No config required.

GitHub Pages

Use @astrojs/upgrade and set site in astro.config.mjs to your repo URL.

⚠️ Don't forget to update site in astro.config.mjs to your final URL. It's used for SEO meta tags and the canonical link.

---

📂 Project structure

openlinktree/
├── public/
│   ├── images/          ← your photos / brand logos go here
│   └── favicon.svg
├── src/
│   ├── components/
│   │   ├── Hero.astro
│   │   ├── LinkCard.astro
│   │   ├── CouponCard.astro
│   │   └── AuroraBackground.astro
│   ├── config/
│   │   └── site.config.ts  ← 👈 edit this
│   ├── icons/
│   │   └── Icon.astro
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   └── types/
│       └── site.ts
├── astro.config.mjs
├── package.json
└── README.md

---

🛠️ Commands

Command	Action
pnpm install	Install dependencies
pnpm dev	Run dev server at localhost:4321
pnpm build	Build the production site to ./dist/
pnpm preview	Preview the build locally before deploy

---

🤝 Contributing

PRs welcome — new widgets, more icons, better themes, accessibility fixes. Keep it minimal and editable; the goal is for any user to read one config file and ship.

---

📜 License

MIT — free for personal and commercial use.

---

🇧🇷 Português

Uma alternativa open source e self-hosted ao Linktree. Edite um arquivo só, faça deploy em qualquer lugar. Sem conta, sem tracking, sem mensalidade.

OpenLinkTree é uma página de "links na bio" linda construída com Astro. Personalize seu perfil, links e widgets em um único arquivo TypeScript — e publique como site estático no Cloudflare Pages, Vercel, Netlify ou GitHub Pages.

🚀 Começando

git clone https://github.com/SEU_USUARIO/openlinktree.git meus-links
cd meus-links
pnpm install
pnpm dev          # abre em http://localhost:4321

Abra src/config/site.config.ts e comece a editar.

✏️ O que editar

Tudo está em um único arquivo: src/config/site.config.ts.

1. profile — nome, @, bio e avatar (coloque a imagem em public/images/).
2. seo — título, descrição, idioma e imagem OG.
3. theme — cores, fonte e as 3 cores do fundo animado (aurora).
4. widgets — array de blocos. Hoje tem links e coupons (cupons de desconto com "copiar código"). Adicione quantos quiser, na ordem que quiser.
5. footer — texto do rodapé. Use {year} para o ano atual.

Exemplo mínimo (links)

{
  type: "links",
  items: [
    { label: "Meu site", href: "https://exemplo.com", icon: "globe", highlight: true },
    { label: "Email", href: "mailto:oi@exemplo.com", icon: "mail" },
    { label: "Instagram", href: "https://instagram.com/voce", icon: "instagram" },
  ],
}

Exemplo de cupom

{
  type: "coupons",
  title: "Cupons exclusivos",
  items: [
    {
      brand: "Marca",
      description: "Snacks saudáveis",
      code: "VOCE10",
      discount: "10% off",
      href: "https://marca.com.br",
      brandBg: "#1552CC",
      brandAccent: "#0A2F7A",
      brandText: "#FFFFFF",
    },
  ],
}

🌐 Publicando (Cloudflare Pages)

1. Faça push do repo no GitHub.
2. No Cloudflare Pages, Create project → conecte o repositório.
3. Configurações:
   • Framework preset: Astro
   • Build command: pnpm build
   • Output directory: dist
4. (Opcional) Adicione um domínio próprio como links.seudominio.com.

Atualize site em astro.config.mjs para a URL final — é usado nas meta tags de SEO.

📜 Licença

MIT — uso pessoal e comercial liberados.