Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/digitalmalayali/linkhub-jekyll-theme
A minimal and super-lightweight free Jekyll theme to create a link-in-bio website like Linktree.
https://github.com/digitalmalayali/linkhub-jekyll-theme
chota github-pages iconify jekyll jekyll-linkinbio jekyll-linktree jekyll-theme jekyll-themes lightweight link-in-bio linkhub linkinbio linkinbio-alternative linkstack linktree linktree-alternative littlelink minimal ruby-gem single-page-website
Last synced: 3 months ago
JSON representation
A minimal and super-lightweight free Jekyll theme to create a link-in-bio website like Linktree.
- Host: GitHub
- URL: https://github.com/digitalmalayali/linkhub-jekyll-theme
- Owner: digitalmalayali
- License: mit
- Created: 2023-10-03T10:08:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-22T21:48:16.000Z (8 months ago)
- Last Synced: 2024-05-22T21:50:24.743Z (8 months ago)
- Topics: chota, github-pages, iconify, jekyll, jekyll-linkinbio, jekyll-linktree, jekyll-theme, jekyll-themes, lightweight, link-in-bio, linkhub, linkinbio, linkinbio-alternative, linkstack, linktree, linktree-alternative, littlelink, minimal, ruby-gem, single-page-website
- Language: HTML
- Homepage: https://digitalmalayali.github.io/linkhub-jekyll-theme/
- Size: 48.8 KB
- Stars: 21
- Watchers: 0
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: funding.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
# Linkhub
[](https://jekyllrb.com)
[](https://rubygems.org/gems/linkhub-jekyll-theme)
[](https://rubygems.org/gems/linkhub-jekyll-theme)
[](https://github.com/digitalmalayali/linkhub)
[](https://github.com/digitalmalayali/linkhub-wordpress-theme)
[](https://liberapay.com/zcraber)
A minimal and super-lightweight, free Jekyll theme to create a single-page, link-in-bio website like Linktree or Later.
[](https://digitalmalayali.github.io/linkhub-jekyll-theme/)
[**Live Demo ◉**](https://digitalmalayali.github.io/linkhub-jekyll-theme/)
## Contents
- [Linkhub](#linkhub)
- [Contents](#contents)
- [Features](#features)
- [Installation](#installation)
- [Use GitHub Template (Fastest Way)](#use-github-template-fastest-way)
- [Install as GitHub Remote Theme](#install-as-github-remote-theme)
- [Install as Ruby Gem](#install-as-ruby-gem)
- [Configuration](#configuration)
- [Adding Site Info](#adding-site-info)
- [`_config.yml`](#_configyml)
- [Adding Icons](#adding-icons)
- [Adding Social Media Links](#adding-social-media-links)
- [`social.yml`](#socialyml)
- [Adding Instagram/TikTok/YouTube Link-in-bio](#adding-instagramtiktokyoutube-link-in-bio)
- [`bio.yml`](#bioyml)
- [Remove Instagram/TikTok/YouTube Link-in-bio](#remove-instagramtiktokyoutube-link-in-bio)
- [Adding Links](#adding-links)
- [`links.yml`](#linksyml)
- [Adding Custom Icons](#adding-custom-icons)
- [Setting Button Width](#setting-button-width)
- [Setting Icon Position](#setting-icon-position)
- [Remove Dark/Light Mode Switch](#remove-darklight-mode-switch)
- [Contributing](#contributing)
- [Powered by Linkhub](#powered-by-linkhub)
- [Development](#development)
- [License](#license)
## Features
- 😊 Based on the original [Linkhub](https://github.com/digitalmalayali/Linkhub) template!
- 📸 Add links to Instagram, TikTok, YouTube or any posts/reels/shorts similar to Later's link-in-bio! Demo images are powered by [Lorem Picsum](https://github.com/DMarby/picsum-photos).
- ⚡ Uses a modified version of the lightweight CSS framework [chota](https://github.com/jenil/chota); the entire size of the site is around [362kb](https://radar.cloudflare.com/scan/52adb775-26b7-4130-9297-e74d332c507f)!
- 🌙 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!
- 🔍 SEO friendly; uses all the necessary Open Graph and Twitter Card tags for metadata!
## Installation
There are multiple ways to install and set up Linkhub. Let's explore each of them.
### Use GitHub Template (Fastest Way)
If you need the quickest way to set this up or if you're a complete beginner to Jekyll, using the GitHub template is the easiest option. You can also fork the repo.
1. Visit [Linkhub](https://github.com/digitalmalayali/linkhub-jekyll-theme) theme repository.
2. Click the **Use this template** button.
3. Select **Create a new repository**.
4. Give it a name and click **Create repository**.
5. Edit the `_config.yml` and `_data` files for customization. Check the [Configuration](#configuration) guide for details.
6. Go to **Settings** > **Pages**. Under **Build and deployment**, select **GitHub Actions** as the source.
7. If you have a [custom domain](https://docs.github.com/articles/using-a-custom-domain-with-github-pages/), you can enter it. Otherwise, you can view the published website at `https://.github.io/linkhub-jekyll-theme` once the building is complete!
### Install as GitHub Remote Theme
Go to your site's `_config.yml` and replace `theme:` with `remote_theme: digitalmalayali/linkhub-jekyll-theme`.
### Install as Ruby Gem
Add this line to your Jekyll site's `Gemfile`:
```ruby
gem "linkhub-jekyll-theme"
```
And add this line to your Jekyll site's `_config.yml`:
```yaml
theme: linkhub-jekyll-theme
```
And then execute:
$ bundle
Or install it yourself as:
$ gem install linkhub-jekyll-theme
## Configuration
Linkhub is super-easy to customize! There is only one `layout` and that is [default.html](_layouts/default.html). Also, there are no `_posts`.
### Adding Site Info
Edit the [_config.yml](_config.yml) file to specify your website's name, page title, description, Google Analytics, and whether to show or hide the verified badge. This information will also be used for meta tags. For the logo, make sure to use an image with a 1:1 aspect ratio.
#### `_config.yml`
```yml
# Jekyll
theme: linkhub-jekyll-theme
# Site Configuration
name: Linkhub # Name of your website
tagline: Links # Set your preferred page title
description: A free, open-source Jekyll link-in-bio theme. # Also used as a meta description
favicon:
path: https://i.ibb.co/SBRmBmt/favicon.png # Path / URL to the favicon of your website (e.g., 'assets/images/favicon.png')
type: png # File format of image. Change according to your image. Supported types: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
logo: https://picsum.photos/200 # Path / URL to the logo (e.g., 'assets/images/logo.png')
url: https://link.example.com # URL of your website
locale: en_GB # The value specifies the locale in which these tags are marked up. It follows the format `language_TERRITORY`.
ga4: # Google Analytics 4 measurement ID, for e.g. G-XXXXXXX (optional). Remove it if it’s not needed.
twitter:
username: UserName # Used for SEO
image:
path: assets/images/example.jpg # Used for SEO (og:image, twitter:image)
type: jpeg # File format of image.
height: 100 # Pixels
width: 100
alt: logo
# Verified Badge Configuration
badge:
enable: true # Set to 'true' or 'false' to enable / disable the badge
icon: ri:verified-badge-fill # Enter the icon name for the badge from Iconify Design (https://icon-sets.iconify.design/)
color: '#dfb221' # Define the color of the badge
# Defaults
defaults:
-
scope:
path: ""
values:
layout: "default"
# Exclude
exclude: [README.md, Gemfile.lock, .jekyll-cache/, .github/, CHANGELOG.md, Gemfile, LICENSE.txt, funding.yml, linkhub-jekyll-theme.gemspec]
```
### Adding Icons
Icons are powered by the free and open-source icon framework [Iconify](https://github.com/iconify), offering a selection of over 150,000 icons. Visit the [Iconify icon sets website](https://icon-sets.iconify.design/) to search for your preferred icon. Once you find your desired icon, copy its name and use it in the respective fields.
You can use custom icons for [Links](#adding-links).
### Adding Social Media Links
Edit the [social.yml](_data/social.yml) file in the [_data](_data) folder to add your social media profiles, along with your preferred icons and colors.
#### `social.yml`
```yml
- name: facebook
url: https://www.facebook.com/example
icon: ri:facebook-fill
color: '#1877F2'
- name: instagram
url: https://www.instagram.com/example
icon: ri:instagram-fill
color: '#E4405F'
```
### Adding Instagram/TikTok/YouTube Link-in-bio
Like Later's link-in-bio feature, you can include external links to your Instagram, TikTok, and other posts by adding the name of social media, the link and image URL/path to [bio.yml](_data/bio.yml) in the [_data](_data) folder. You can either upload thumbnails of your Instagram, TikTok and YouTube posts to an image hosting service or create an `images` folder in [assets](assets) and place them there. By default, the images will be displayed with a 1:1 aspect ratio in a 3-column grid. You can use the `ratio` variable for vertical images with a 9:16 aspect ratio. Make sure to add the link you'd like to appear first to the top.
#### `bio.yml`
```yml
- name: Instagram
items:
- url: https://www.example.com
image: https://picsum.photos/700/400.webp # You can use paths to images in the assets folder, e.g., assets/images/insta.jpg.
- url: https://www.example.com
image: https://picsum.photos/200.webp
- name: YouTube
ratio: vertical # For vertical 9:16 aspect ratio. Ideal for video thumbnails, such as those used on Instagram Reels, YouTube Shorts and TikTok. To use the default 1:1 aspect ratio (square), remove this variable.
items:
- url: https://www.example.com
image: https://picsum.photos/720/1280.webp
```
### Remove Instagram/TikTok/YouTube Link-in-bio
If you'd like to remove Instagram/TikTok/YouTube link-in-bio altogether, remove or comment out the following line in [default.html](_layouts/default.html) layout:
```liquid
{% include bio.html %}
```
### Adding Links
Edit the [links.yml](_data/links.yml) file in the [_data](_data) folder to add link categories, links, icons, and tags. Refer to the provided examples and the [demo](https://digitalmalayali.github.io/linkhub-jekyll-theme/) for a better understanding. `tag` and `icon` variables are optional.
#### `links.yml`
```yml
fixed-button-width: false # Set to true/false
icon-position: left # Set to left/right
buttons:
- category: Blogs
items:
- title: Example
url: https://www.example.com
icon: tdesign:activity # Icons are optional
tag: Tag
- title: Example 2
url: https://www.example.org
custom-icon: .st0{fill:#000} # Paste the SVG markup for custom icon
- category: Products
items:
- title: Example 3
url: https://www.example.com
- category: Works
items:
- title: Example 4
url: https://www.example.org
icon: ion:flower-sharp
tag: New
```
#### Adding Custom Icons
As shown in the example above, you can use the `custom-icon` variable to insert custom SVG icons. Be sure to paste the entire SVG markup. You can use [SVGOMG](https://jakearchibald.github.io/svgomg/) to optimize the SVG.
#### Setting Button Width
You can set the width of buttons to `fixed` using the variable `fixed-button-width: true`. This will set the width of all buttons to a fixed 50%. You can change this value in [links.html](https://github.com/digitalmalayali/linkhub-jekyll-theme/blob/main/_includes/links.html#L12).
#### Setting Icon Position
With version [0.1.6](https://github.com/digitalmalayali/linkhub-jekyll-theme/releases/tag/v0.1.6), it's now possible to set the position of icons to left or right using `icon-position: left`. Please note that setting the icon position will set it for all buttons. You can't do it for individual buttons. And tags will switch to the opposite position.
### Remove Dark/Light Mode Switch
To remove the dark/light mode switch, edit the [default.html](_layouts/default.html) layout file and remove or comment out the following line:
```liquid
{% include theme-switch.html %}
```
Please note that this will not remove the functionality that detects and sets the dark/light mode based on the user's system preference.
## Contributing
[Bug reports](https://github.com/digitalmalayali/linkhub-jekyll-theme) and [pull requests](https://github.com/digitalmalayali/linkhub-jekyll-theme/pulls) are welcome. If you like this theme, please give it a star! And if you've used this theme on your website, feel free to add it below.
## Powered by Linkhub
A list of websites that use the Linkhub theme. Please feel free to add your site.
- [links.digitalmalayali.in](https://links.digitalmalayali.in/)
- [links.josephvm.in](https://links.josephvm.in/)
## Development
To set up your environment to develop this theme, run `bundle install`.
Your theme is set up just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
When your theme is released, only the files in [_layouts](_layouts), [_includes](_includes), [_data](_data) and [assets](assets) tracked with Git will be bundled.
To add a custom directory to your theme-gem, please edit the regexp in [linkhub-jekyll-theme.gemspec](linkhub-jekyll-theme.gemspec) accordingly.
## License
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).