Raccoon Links

Raccoon Links is an open-source Astro-based link-in-bio template that displays all your contact and social links on a single page, with data managed through editable JSON or MDX files.

What is Raccoon Links?

Raccoon Links is a link-in-bio web template built with the Astro static site generator. It takes your social, contact, and portfolio links — stored as structured data in the src/data directory — and generates a single HTML page to display them. The project is authored by SofiDev, released under the MIT License, and currently marked at version 2.0.0 via its version badge.

Key Features

• Astro framework — Uses standard Astro CLI commands: npm run dev for development, npm run build for production builds, npm run preview to preview the build, and npm run astro for additional Astro CLI commands.
• Data-driven links — Customize link titles, URLs, and icons by editing JSON or MDX files in the src/data directory, without touching the page structure.
• Iconify integration — Includes the Iconify CDN script (iconify-icon 2.1.0) in the head, so any Iconify icon can be used by specifying its identifier, such as logos:react.
• Profile and banner images — The sample data includes fields for a profile picture and a banner image, with paths under /img.
• Pre-filled example data — The default JSON shows fields for name, email, GitHub, LinkedIn, blog, portfolio, and a downloadable CV.
• MIT license — Free to use, modify, and redistribute; the LICENSE file is included in the repository.
• Version badge — Clearly labels the project as version 2.0.0.

Who is it for?

• Developers looking for a quick starter to build a personalized link-in-bio page with Astro and a data-driven workflow.
• Creators and freelancers who want to present their portfolio, blog, and CV in one place, with their own profile picture and banner.
• Anyone wanting a self-hosted alternative to commercial link-in-bio services, with full control over the design and content data.

What can you do with Raccoon Links?

• Personal branding: Showcase your GitHub, LinkedIn, blog, portfolio, and CV links on a single page, with your own profile picture and banner image.
• Customization: Edit the JSON or MDX files in src/data to add your own link titles, URLs, and icon identifiers, then rebuild to see changes.
• Icon choice: Add any icon from Iconify's sets (including logos) by pasting an identifier like logos:react into the data file.

How does Raccoon Links work?

Clone the repository, run npm install, and start the dev server. To customize, edit the JSON or MDX files in src/data with your link information — the example shows fields for name, email, GitHub, LinkedIn, blog, portfolio, CV, profile picture, and banner image. When you rebuild or run the app, changes are reflected automatically. Icons are loaded through the Iconify CDN script included in the head, so you only need to specify the icon identifier in the data.

FAQ

Is Raccoon Links free to use?

Yes. The project is released under the MIT License, so you can use, modify, and distribute it freely, including for commercial purposes.

What framework does Raccoon Links use?

Raccoon Links is built with Astro, a static site generator. It uses standard Astro CLI scripts for development, building, and previewing.

How do I add my own links?

Open the files in src/data — they can be JSON or MDX — and edit the link title, URL, and icon field. Rebuild or restart the dev server to see your changes.

How do I add icons?

Include the Iconify CDN script (iconify-icon 2.1.0) in the head, then specify the icon identifier in the data file, such as logos:react for a React logo. Any icon from the Iconify sets can be used.

Who created Raccoon Links?

The author is SofiDev, with contributions from ElStron and Rickytodev, as listed in the project's contributors table.