My personal Linktree with Astro.js and Vercel

1 hour of work and I have my own link tree website with Astro.js and Vercel on my own subdomain.

Check out the final result: links.shramko.dev

Why Astro.js?

I wrote about Astro.js, and I was impressed by its performance and ease of use. IMHO, Astro one of the most promising and fast-growing static site generators out there.

Setting Up the Project

I started by creating a new Astro project:

pnpm create astro@latest

You can read small article about why I use pnpm 🤘.

Data for the Link Tree

First of all I created a data file with my links. I used a simple JSON structure:

{
  "name": "Serhii Shramko",
  "profession": "Senior Software Engineer at MacPaw",
  "links": [
    {
      "url": "https://shramko.dev/",
      "icon": "url",
      "title": "Personal Portfolio",
      "description": "All my latest news and blog posts"
    },
    {
      "url": "https://github.com/Shramkoweb",
      "icon": "github",
      "title": "Github Profile",
      "description": "My Github"
    }
  ]
}

This approach allows me to easily add, remove, or update links without changing the HTML structure.

Layout and File Structure

Astro.js allow use simple file structure. And for this project I don't need complex structure. I created an index page:

---
import Layout from '../layouts/Layout.astro';
import Profile from '../components/Profile.astro';
import List from '../components/List.astro';
// Simple component that renders the main layout, the profile, and the list of links.
---

<Layout title="Link tree | Serhii Shramko">
    <main class="container" id="container">
        <Profile />
        <List />
    </main>
</Layout>

---
import Instagram from "./icons/instagram.astro";
import Linkedin from "./icons/linkedin.astro";
import Url from "./icons/url.astro";
import Youtube from "./icons/youtube.astro";
import Pdf from "./icons/pdf.astro";
import Github from "./icons/github.astro";

interface Props {
    icon: string;
    title: string;
    description: string;
    url: string;
}

const { icon, title, description, url } = Astro.props;
---

<a href={url} class="link" target="_blank">
    <span class="link__icon">
        {icon === 'instagram' && <Instagram />}
        {icon === 'linkedin' && <Linkedin />}
        {icon === 'url' && <Url />}
        {icon === 'youtube' && <Youtube />}
        {icon === 'github' && <Github />}
        {icon === 'pdf' && <Pdf />}
    </span>

    <div class="link__content">
        <h2 class="link__title">{title}</h2>
        <p class="link__description">{description}</p>
    </div>
</a>

Astro.js allows you to create components from svg code. I created a separate component for each icon:

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 20 20"></svg>

Analytics

Almost done. Just add Vercel Analytics to the project.

pnpm add @astrojs/vercel
pnpm add @vercel/analytics

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

// https://astro.build/config
export default defineConfig({
    output: 'server',
    adapter: vercel({
        webAnalytics: { enabled: true }
    }),
});

Deploying to Vercel

Vercel makes deploying Astro projects a breeze. Here's how I did it:

1. I pushed my project to a GitHub repository.
2. I connected my Vercel account to my GitHub account.
3. In the Vercel dashboard, I clicked "New Project" and selected my link tree repository.
4. Vercel automatically detected that it was an Astro project and suggested the correct build settings.
5. I clicked "Deploy" and waited for the magic to happen!

Custom Domain with Vercel Subdomains

To use my custom domain with Vercel, I followed these steps:

1. In the Vercel project settings, I navigated to the "Domains" section.
2. I added my custom domain: links.shramko.dev.
3. Done! Vercel automatically set up the necessary DNS records for me.

Conclusion

Building a link tree with Astro.js and deploying it on Vercel was a smooth and enjoyable process. I spent no more than an hour and got a fast, efficient, and visually appealing website that and try new technologies.

Sounds great, right? 🌲