Deno Links - Lightweight self-hosted Link in Bio (Deploy for free in less than a minute!)#

A minimal, fast, and easy-to-customize link-in-bio page built with Deno. All content and styling controlled by a single config.json file.

Live Demo: https://deno-links-demo.brooke.deno.net/

Features#

• Zero dependencies - Just Deno runtime
• No build step - TypeScript works natively
• Single config file - All content and styling in config.json
• Fast - Lightweight, styled with Tailwind CDN
• Easy to customize - Edit config and refresh

Prerequisites (for local testing / development)#

Install Deno

# macOS/Linux
curl -fsSL https://deno.land/x/install/install.sh | sh

# Windows
irm https://deno.land/install.ps1 | iex

Quick Start#

1. Clone or download this repository

2. Modify the config to suit your needs
config.json

3. Add your images to static/images/
  
  - banner.png (recommended: 800x320px)
  - profile.png (recommended: 200x200px)
  - logos/ (folder for link icons: 24 logos included)

4. Edit config.json with your info

5. Start the development server 

`deno task dev`

Visit http://localhost:8001

--

Configuration#

Edit config.json to update your site. All changes take effect on page refresh (with deno task dev).

Site Settings#

{
  "site": {
    "title": "Your Name - Follow Me !",
    "description": "Your description",
  }
}

Theme Colors#

{
  "theme": {
    "gradientFrom": "rgb(254, 205, 211)",
    "gradientVia": "rgb(252, 231, 243)",
    "gradientTo": "rgb(147, 197, 253)",
    "defaultCardBgColor": "rgb(249, 168, 212)",
    "defaultCardBorder": "rgb(249, 168, 212)",
    "textColor": "white"
  }
}

The defaultCardBgColor and defaultCardBorder are used for all link cards unless overridden per-link.

Images#

Place your images in static/images/ and reference them:

{
  "images": {
    "banner": "/images/banner.png",
    "profile": "/images/profile.png",
    "background": "/images/nnnoise.svg"
  }
}

Sections#

The config uses a sections array to organize your links. Each section can have an optional title and contains an array of links.

Section properties:

• title (optional): Section header text
• links: Array of link objects

Link properties:

• title: Link title text
• description: Link description text
• href: URL to link to
• image (optional): Path to icon image, or null for placeholder with letter filler
• featured (optional): Set to true to add shimmer animation
• cardBgColor (optional): Override background color for this specific link
• cardBorder (optional): Override border color for this specific link

Project Structure#

deno-links/
├── config.json          # Your personal config (create from example)
├── server.ts            # HTTP server (~130 lines)
├── template.ts          # HTML generator (~284 lines)
├── deno.json            # Deno tasks and config
├── static/
│   └── images/          # Your images
│       └── logos/       # Link icons/logos
└── README.md

Deployment#

Deno Deploy (Free)#

1. Push to GitHub
2. Visit https://console.deno.com
3. Create new project from GitHub repo
4. Set Entrypoint to server.ts
5. Done! Auto-deploys on push

Customization Tips#

1. Change colors: Edit theme object in config.json
2. Add sections: Add more objects to sections array
3. Add links: Add items to any section's links array
4. Per-link colors: Add cardBgColor and cardBorder to individual links
5. Change layout: Edit template.ts
6. Add new features: Edit server.ts and template.ts

License#

MIT