https://github.com/digitalmalayali/linkhub
A minimal and super-lightweight free web template to use as an alternative to Linktree or Link-in-bio.
https://github.com/digitalmalayali/linkhub
chota css html instagram js lightweight linkhub linkinbio linkinbio-alternative linklist links linkstack linktree linktree-alternative linktree-custom littlelink minimal personal-website template website-template
Last synced: 3 months ago
JSON representation
A minimal and super-lightweight free web template to use as an alternative to Linktree or Link-in-bio.
- Host: GitHub
- URL: https://github.com/digitalmalayali/linkhub
- Owner: digitalmalayali
- License: mit
- Created: 2023-08-05T21:27:42.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-30T14:31:06.000Z (over 1 year ago)
- Last Synced: 2025-04-29T04:43:19.475Z (about 1 year ago)
- Topics: chota, css, html, instagram, js, lightweight, linkhub, linkinbio, linkinbio-alternative, linklist, links, linkstack, linktree, linktree-alternative, linktree-custom, littlelink, minimal, personal-website, template, website-template
- Language: HTML
- Homepage: http://links.digitalmalayali.in
- Size: 302 KB
- Stars: 10
- Watchers: 0
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Linkhub
A super-simple free web template to store and share your links like Linktree or Link-in-bio.
[](https://github.com/digitalmalayali/linkhub-jekyll-theme/)
[](https://rubygems.org/gems/linkhub-jekyll-theme)
[](https://rubygems.org/gems/linkhub-jekyll-theme)
[](https://github.com/digitalmalayali/linkhub-wordpress-theme)
[](https://wordpress.org/themes/linkhub/)
[](https://wordpress.org/themes/linkhub/)
## Features
- 😊 No installation or fancy setup; just replace links/icons!
- 📸 Add links to Instagram posts similar to Later's link-in-bio!
- ⚡ Uses a modified version of the lightweight CSS framework [chota](https://github.com/jenil/chota); the entire size of the site is around 250kb with minimum assets!
- 🌙 Switch between dark and light modes; automatically choose the mode based on your system preference!
- 😍 Icons powered by [iconify](https://github.com/iconify/iconify); find tons of free icons for almost any purpose!
- 🔠 Categorize links; store your links under various categories!
## Screenshots
Dark Mode
Insta link-in-bio expanded
Light Mode
## Also available as
- [Jekyll Theme](https://github.com/digitalmalayali/linkhub-jekyll-theme)
- [Ruby Gem](https://rubygems.org/gems/linkhub-jekyll-theme)
- [WordPress Theme](https://github.com/digitalmalayali/linkhub-wordpress-theme)
## Usage
The first step is to click the **Use this template** button above the file list to create a new repository.
### Modify social media links
Go to [index.html](https://github.com/digitalmalayali/Linkhub/blob/main/index.html) file. Social media links are under,
```html
```
Just replace the existing links with yours and you're done!
```html
```
#### Change icons and icon colour
Go to [iconify icon sets](https://icon-sets.iconify.design/) and search for the icon you want. E.g., if you want to replace the existing Instagram icon with another from a different set, copy the unique icon name and paste it into the `data-icon` attribute. You can also change the icon colour right there to match your branding or specific needs.
```html
```
#### Use custom icons in buttons
Add your custom `svg` icon inside `
```html
Product Raid
```
#### Add/remove a social media icon along with the link
Just add/remove that entire `` tag!
```html
```
### Add/remove Insta link-in-bio
If you'd like to completely remove the Insta link-in-bio, remove the entire ``.
```html
Insta Link-in-Bio
```
Also, make sure to remove these CSS classes from `style.css` as well:
```css
section,
summary {
margin: .8em 0 .5em
}
.insta-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.insta-item {
aspect-ratio: 1;
margin: .2em;
overflow: hidden
}
.insta-img {
object-fit: cover;
object-position: center
}
```
Adding a new link-in-bio is super easy. Make sure to add it at the start.
```html
```
### Modifying link buttons
Link buttons are in the `` tag. You can replace the existing links and icons just like you did for social media links.
```html
Example
```
#### Add/remove a button
Add/remove the entire class named `row`.
```html
```
#### Add/remove a category
Add/remove the `
` tag.
```html
Blogs
```
#### Add/remove the NEW tag
Add/remove the ``. Also, make sure to use/remove `` instead of `