This website is a real usecase of Linkub to share all my links on a simple page. Visit »
- 🖼️ Simple layout - Easly show and share all of your links
- 🔍 SEO friendly - Auto generating tags for better referencing
- 📱 Responsive - Already compatible with all screen sizes
- ⚙️ Configurable - Change name, description and links with ease
git clone https://github.com/Minarox/Linkub
cd LinkubIt is highly recommended to launch the project in the devcontainer to have a pre-configured development environment with dependencies.
There are two important places to quickly customize the project: src/assets/svg and src/pages/index.astro.
-
src/assets
This folder contains the logo and background image used on the page, in SVG format.
-
src/pages/index.astro
This file contains the main configuration to modify for customizing the title, SEO elements, and links displayed on the page:
const settings = { lang: ["en", "en-US", "English"], // Website title title: "Linkub", // SEO description = "All links in one place.", keywords = "Linkhub, Link, Social, Media, Hub, Landing, Page, Web", creator = "Mathis Serrieres Maniecki", xCreator = "Minarox_", themeColor = "#0C1136" } // Links const links = [ { name: "GitHub", url: "https://github.com" }, { name: "Email", url: "mailto:[email protected]", // More details in Q&A icon: "envelope", pack: "mdi" } ... ]
Ensure that the URL specified in the Astro configuration (astro.config.mts) matches the expected URL and generate the website from source files: pnpm build.
Congratulation, you have now a landing page with all of your links.
The final website is located inside build/ and is ready to deploy online!
| Color | Hex | Description |
|---|---|---|
| Text color |  #FFFFFFFF |
Titles and subtitles |
| Background color |  #040E29FF |
Global background |
This project use pnpm as package manager. You can also use npm but you have to edit commands from documentation to make it work properly.
| Command | Action |
|---|---|
pnpm install |
Installs dependencies |
pnpm dev |
Starts local dev server at localhost:4321 |
pnpm check |
Scan source files for warnings and errors |
pnpm test |
Run unit tests |
pnpm coverage |
Preview code coverage from unit tests at localhost:4173 |
pnpm build |
Build your production site to ./dist/ |
pnpm preview |
Preview your build locally at localhost:4321 |
pnpm deploy |
Build and deploy project to Cloudflare Workers |
I needed a simple, lightweight, and easily customizable template to deploy for several side projects.
The list of links is constructed by following an array of objects:
name: string;
url: string;
icon?: string;
pack?: string;The name and url associated with the link are required.
The icons used come from the @iconify-json/fa6-brands icon pack, using the link name by default to select the displayed icon.
If the default behavior does not suit you, you can force a different icon only from the @iconify-json/fa6-brands icon pack by specifying the icon field.
If you want to use another icon pack from iconify, you must use icon and pack together.
Also, remember to install the library with pnpm install @iconify-json/... in the project and restart any instance of Astro previously running.
By default, the project includes a workflow to automate the deployment of the website on GitHub Pages from the main branch, but you need to change the Astro configuration (astro.config.mts) to match the expected URL.
If you want to deploy the website elsewhere, you need to build the project with the command pnpm build and deploy the files from build/ to any web hosting platform that supports static websites.
Please refer directly to the documentation of the relevant platforms.