# 🚀 LittleLink Deployment Guide This repository contains a personalized instance of [LittleLink](https://littlelink.io/), a lightweight, self-hosted alternative to Linktree. This setup uses **GitHub** for version control and **Vercel** for automated hosting. ## 🛠 Prerequisites Before you begin, ensure you have the following accounts and software: - **GitHub Account:** To store your website's code. - **Vercel Account:** To host the site (Sign up using your GitHub account for easy syncing). - **GitHub Desktop:** For managing file changes without using the command line. - **VS Code:** (Or your preferred text editor) To edit the website content. --- ## 🏁 Getting Started (The Initial Setup) 1. **Deploy to Vercel:** * Go to [LittleLink.io](https://littlelink.io/) and click the **"Deploy to Vercel"** button. - Follow the prompts to create a new repository name (e.g., `my-links`). - Vercel will automatically "fork" the code into your GitHub and give you a live URL. 2. **Clone to Local Machine:** - Open **GitHub Desktop**. - Select `File > Clone Repository` and choose your new LittleLink repo. - Pick a folder on your computer where the files will live. --- ## 🎨 How to Customize Your Page The magic happens in two main files: `index.html` and `css/brands.css`. ### 1. Update Profile Information Open `index.html` in VS Code to edit: - **Title:** Change the `<title>` tag for browser tabs. - **Bio:** Update the `<h1>` (Name) and `<p>` (Bio) sections. - **Avatar:** Replace `avatar.png` in the `/images` folder with your own photo. ### 2. Manage Your Links Links are structured as "Buttons" in the HTML: - **To Edit:** Change the `href="URL"` to your social profile. - **To Remove:** Delete the entire `<a>` tag for that specific button. - **To Add:** Copy an existing button block and update the link and icon reference. ### 3. Change Appearance (Dark Mode) In `index.html`, find the CSS link for `skeleton-light.css` and change it to `skeleton-dark.css` for an instant dark theme. --- ## 🔄 Publishing Your Changes Once you are happy with your local edits: 1. **Commit:** Open **GitHub Desktop**. You will see a list of your changed files. Enter a summary (e.g., "Updated bio and added Twitter link") and click **Commit to main**. 2. **Push:** Click **Push Origin**. This sends your local changes back to GitHub. 3. **Live Update:** Vercel will detect the "Push" automatically. In about 30 seconds, your live website will update itself. --- ## 🌐 Custom Domains If you own a domain (e.g., via HostGator or Namecheap): 1. Go to your **Vercel Dashboard**. 2. Select your project > **Settings** > **Domains**. 3. Enter your domain and follow the DNS instructions provided by Vercel. --- > **Note:** This project is a fork of the original [LittleLink](https://www.google.com/search?q=https://github.com/seth-cottle/littlelink) by Seth Cottle.