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: about 1 month 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 (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-30T14:31:06.000Z (about 2 months ago)
• Last Synced: 2024-10-30T15:19:01.544Z (about 2 months 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: 8
• Watchers: 0
• Forks: 4
• 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.

[![Static Badge](https://img.shields.io/badge/jekyll-theme-CC0000?logo=jekyll&logoColor=%23CC0000)](https://github.com/digitalmalayali/linkhub-jekyll-theme/)

[![Gem (including prereleases)](https://img.shields.io/gem/v/linkhub-jekyll-theme?logo=ruby&logoColor=%23E9573F)](https://rubygems.org/gems/linkhub-jekyll-theme)

[![Gem](https://img.shields.io/gem/dt/linkhub-jekyll-theme?logo=ruby&logoColor=%23E9573F)](https://rubygems.org/gems/linkhub-jekyll-theme)

[![Static Badge](https://img.shields.io/badge/wordpress-theme-red?logo=wordpress&labelColor=21759B)](https://github.com/digitalmalayali/linkhub-wordpress-theme)

[![WordPress Theme Version](https://img.shields.io/wordpress/theme/v/linkhub?logo=wordpress&labelColor=%2321759B)](https://wordpress.org/themes/linkhub/)

[![WordPress Theme Downloads](https://img.shields.io/wordpress/theme/dt/linkhub?logo=wordpress&labelColor=%2321759B&color=green)](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 ``. You can use [SVGOMG](https://jakearchibald.github.io/svgomg/) to optimize SVG.

```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 



  


    

      Example

    

  



```


#### 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 `
`.


```html



  


      24/7

        Radio New

      

  



```