Step-by-step guide to build, customize, and deploy a modern bio link page using Astro and Cloudflare Pages — $0 monthly cost, fully owned.

Deploy a Bio Link Page with Astro & Cloudflare (Near-Zero Cost)

This guide shows you how to download, customize, and deploy a modern bio link page using a free static stack.

No SaaS tools.
No monthly fees.
You only pay for a domain (optional).

💰 Cost Breakdown (Why This Stack Works)

Before anything else, here’s the real cost:

  • Hosting: $0
  • Bandwidth: $0
  • CDN + SSL: $0
  • Monthly fees: $0
  • Domain: optional

You fully own the page. No lock-in.

🧱 Tech Stack Overview

  • Astro – Static site generator (fast & SEO-friendly)
  • Cloudflare Pages – Free global hosting
  • Tailwind CSS – Styling
  • JSON Content Collections – No CMS required
  • Lucide Icons – Clean icon set

📋 Prerequisites

Make sure you have:

Using NVM is highly recommended:

nvm install --lts
nvm use --lts

🛠 Step 1: Download the Project

Clone the repository and navigate into the project directory:

git clone https://github.com/autoolflux/bio-page-example-cyperpunk-style.git
cd bio-page-example-cyperpunk-style

📦 Step 2: Install Dependencies

Install the required packages using npm:

npm install

⚙️ Step 3: Run Locally

Start the development server to preview your changes:

npm run dev

Open your browser at: http://localhost:4321

You should now see your bio page running locally.

👤 Step 4: Configure Your Profile

Edit your personal information in the following file:

src/content/profile/me.json

Example Configuration:

{
  "name": "Your Name",
  "bio": "A short description of your business or personal brand",
  "avatar": "../../assets/avatar.png",
  "location": "City, Country",
  "verified": true,
  "phone": "+1234567890",
  "email": "hello@example.com"
}

📌 Note: Place your avatar image file inside the src/assets/ directory.

📇 Save Contact (VCard)

The Save Contact button automatically generates a .vcf file.

Ensure you have included your phone and email in the me.json file for this to work correctly.

🔗 Step 5: Manage Bio Links (Bento Grid)

Each link is managed as an individual JSON file located in:

src/content/links/

Link File Example:

{
  "id": "portfolio",
  "title": "My Portfolio",
  "url": "[https://your-site.com](https://your-site.com)",
  "icon": "Globe",
  "isFeatured": true,
  "layout": "large",
  "color": "#6366F1"
}

Layout Types

  • large – Featured/hero content (large grid span)
  • medium – Standard main links
  • small – Icon-only or quick action links

📋 Copy-to-Clipboard Links

For actions that should copy text (like an email or bank number) instead of opening a URL:

"url": "#copy:hello@example.com"

📱 Step 6: Social Links

Create your social media cards in:

src/content/socials/

Note: Social items always render as small cards.

🎨 Customization Tips

  • Icons: Browse lucide.dev/icons. Use the icon name directly in your JSON files.
  • Background & Gradients: Edit src/layouts/Layout.astro.
  • Global Styles: Modify colors and fonts in src/styles/global.css.

🚀 Step 7: Deploy to Cloudflare Pages

Deploy via Wrangler CLI

Install the Wrangler CLI and log in:

npm install -g wrangler
wrangler login

Build and deploy manually:

npm run build
npx wrangler pages deploy dist --project-name your-project-name

Replace your-project-name with your actual Cloudflare project name.

✅ Final Result

You now have:

  • A fast, modern bio link page.
  • Global hosting for free.
  • Full ownership of your data and code.
  • A professional presence for business or creators.