LinkHub User Guide

Learn how to create, customize, and publish your link page.

Step 1: Launching the Admin Panel

The first step is to access the panel where all the magic happens. If you are running the project locally, start the server with the npm run dev command and go to http://localhost:3000/admin.

You will be presented with the editing interface. We recommend starting by loading the data/links.json file to familiarize yourself with the structure.

[Placeholder for admin home screen image]

Step 2: Editing Your Page

The admin panel has several tabs for you to customize your page:

  • Info: Set your name, bio, profile picture, and SEO meta tags (title, description).
  • Links: Add, edit, rearrange, or remove the links that will appear on your page.
  • Social: Configure the icons for your social media profiles.
  • Styles: Unleash your creativity! Change colors, fonts, borders, and the background.
  • Pages: Edit the content of the "Privacy" and "Terms" pages.
[Placeholder for a GIF/video showing the editing process]

Step 3: Saving Your Changes

After making your edits, it is crucial to save them. Use the "Save" or "Save and Export" button. This will create or update a JSON file in the /data folder in the project root. You can name it whatever you like, for example, my-profile.json.

This file is the "brain" of your page, containing all the information you have configured.

Step 4: Preparing Files for Hosting

This is the most important part. Your final page is composed of a set of static files. You need to prepare them for publication.

  1. Make a copy of the link-page folder: Find this folder in the project root. Copy it to a safe location on your computer. It is this copy that you will publish.
  2. Move and rename your JSON file:
    • Go to the /data folder where you saved your file (e.g., my-profile.json).
    • Copy this file into the data folder that exists in your copy of the link-page.
    • Inside link-page/data, **rename the file you just copied to links.json**.

The final result should look like this:

[Placeholder for final folder structure image]

Why is this necessary? The static page (link-page/index.html) is programmed to look for and read a file called links.json inside its own data folder to display its content.

Step 5: Publishing Your Page

With the link-page folder prepared, you are ready to publish it!

You can host this folder on any static website hosting service, such as:

  • Netlify
  • Vercel
  • GitHub Pages
  • Cloudflare Pages
  • Traditional shared hosting

Just upload the contents of your copied link-page folder to the chosen service, and your link page will be online for the world to see!