Show HN: I made a free self-hosted link-in-bio site

A modern, customisable link-in-bio theme built with Astro and Tailwind CSS. Created by Josh Withers for personal branding and professional networking.

Inspired by Trevor Tyler Lee's Treelink app.

View demo at linkinbio.josh.show and my own site joshwithers.com.au

My link in bio Astro website is a clean, professional theme designed for creators, entrepreneurs, and professionals who want a centralised hub for their online presence. The theme focuses on simplicity, performance, and customisation.

I built it because I wanted a really fast and fun bio link that sends people to my social accounts, websites and blog posts.

You'd click a link in bio on Instagram and between the social media app's in-built browser being slow, internet being slow, and everything just being harder, the page would also be slow.

I built this to be fast, not just fast loading, but fast to get into and then equally as fast to get out of. There's no blog collections, no tracking, minimal scripting and CSS, and people smarter than me could probably make it faster.

Obviously the design is a bit esoteric. I was trying to make something different and weird and found inspiration in shopping recipets, takeaway menues, and the web of old.

• Responsive Design: Looks great on all devices with mobile-first approach
• Dark/Light Mode: Automatic theme switching with manual override options
• Icon Integration: Support for hundreds of social media and service icons via Iconify
• RSS Feed Integration: Display recent blog posts from external RSS feeds
• SEO Optimised: Built-in meta tags, Open Graph images, and structured data
• Performance Focused: Achieves perfect 100/100/100/100 web vitals scores usually, with a few edge cases getting close to 100 because of the mirroring effect causing a non-problem accessibility issue.
• Customisable Links: Support for both icon-based and custom text links

1. ✅ Replace profile picture in /src/assets/
2. ✅ Update name, bio, and url
3. ✅ customise the about section
4. ✅ Set your contact email
5. ✅ Update social media iconLinks
6. ✅ Add your projects to customLinks
7. ✅ Configure RSS feeds in recentPosts (or disable)
8. ✅ Update schema.org data for SEO
9. ✅ Remove or customise referralLinks
10. ✅ Test your changes locally

All commands are run from the root of the project:

This theme works with any static hosting provider:

• Netlify: Connect your Git repository for automatic deployments
• Vercel: Import your project for instant deployment
• GitHub Pages: Use the included GitHub Actions workflow
• Cloudflare Pages: Connect your repository for edge deployment

This theme is optimised for performance:

• Lighthouse Scores: 100/100/100/100 (Performance, Accessibility, Best Practices, SEO)
• Static Generation: Pre-built pages for fast loading
• Optimised Images: Automatic image optimisation with Astro
• Minimal JavaScript: Only essential JS for theme switching
• RSS Caching: Efficient RSS feed caching and generation

• Astro - Static site generator
• Tailwind CSS - Utility-first CSS framework
• Iconify - Icon system with thousands of icons
• TypeScript - Type-safe JavaScript
• RSS Integration - Built-in RSS feed parsing and generation.

This guide will help you customise the siteConfig.json file to personalise your link-in-bio website. The configuration file controls all the content and settings for your personal website.

Before customising the config, make sure you have:

• Profile Picture: Replace /src/assets/profile-picture.webp with your own image (keep the same filename)

The theme is configured through the src/siteConfig.json file. Here's what you can customise:

Fields to customise:

• name: Your full name as you want it displayed
• bio: A brief, engaging description of yourself (1-2 sentences, 110-160 characters.)
• url: Your website's primary URL

Customisation tips:

• Keep the title format consistent: "About [Your Name]"
• Write 2-3 sentences that capture your personality and work
• Use a conversational tone that matches your brand
• This is displayed towards the bottom of the page and can be a more in-depth bio.

Fields to customise:

• email: Your primary contact email
• ctaTitle: Call-to-action text for contact button (keep it energetic!)

To customise:

1. Replace the file at /src/assets/profile-picture.webp with your image
2. Keep the same filename and format (.webp recommended for performance)
3. Recommended size: 256x256px, square aspect ratio

To customise:

• Replace /public/barcode.png with your own image, or
• barcodesinc.com/generator is what I used to generate mine.

To customise:

• Set enabled to false if you don't want to show recent posts
• Adjust count for how many posts from across the feeds, in total, to display
• Replace the feeds array with your own RSS feed URLs
• Remove feeds you don't want to include

Available icons: Check the /src/icons/ folder for available icons, or use Simple Icons format (simple-icons:platform)

To customise:

• Replace URLs with your own social media profiles
• Add or remove platforms as needed
• For custom icons, add the SVG file to /src/icons/ and reference by filename

customisation tips:

• Use emojis to make links more visually appealing
• Order links by importance (most important first)
• Keep titles concise but descriptive

To customise:

• Add your referral links for services you recommend
• Include the discount/benefit in the title
• Remove this section entirely if you don't want referral links
• these links are published on the save.astro page at /save

• Update site URL in astro.config.mjs: in the root of the project update the site URL in astro.config.mjs - all other config happens in the src/siteConfig.json file

• Keep it authentic: Write in your own voice

• Test locally: Make sure your JSON is valid

• Optimise images: Use WebP format for better performance

• Update regularly: Keep your links and information current

• Automated RSS Updates: To keep your RSS feeds fresh while maintaining a static, fast website, you can set up automated rebuilds using Cloudflare Pages deploy hooks triggered by GitHub Actions. Here's how:

  1. Set up Cloudflare Pages Deploy Hook:

     • Go to your Cloudflare Pages dashboard
     • Navigate to your project settings
     • Find "Build & deployments" → "Deploy hooks"
     • Create a new deploy hook and copy the webhook URL

  2. Configure GitHub Secrets:

     • In your GitHub repository, go to Settings → Secrets and variables → Actions
     • Add a new repository secret named CF_PAGES_WEBHOOK_URL
     • Paste your Cloudflare deploy hook URL as the value

  3. Customise the Schedule:

     • Edit the cron schedule in /.github/workflows/scheduled-rss-build.yml
     • The current setup rebuilds 3 times daily (6 AM, 2 PM, 10 PM Hobart time)
     • Adjust the cron expressions to match your preferred update frequency

  This approach keeps your site static and lightning-fast while ensuring RSS content stays current without manual intervention.

  There's a high chance you're smarter than me and you can find a better way to do this. I'm considering building the webhook call into my other blogs publishing process, so this page only builds when I publish a post.

This project is licensed under CC0 1.0 - see the LICENSE file for details. Basically it means you can do what you want with this, just don't blame me for it being awesome.

Josh Withers
Wedding Celebrant & Amateur Developer

Built with ❤️ using Astro and modern web technologies