https://github.com/alisa-yar/linktree-alternative
Free Linktree Page Template
https://github.com/alisa-yar/linktree-alternative
business-card link link-in-bio link-page link-tree links links-page linktree linktree-alternative linktree-clone linktree-custom personal-page personal-profile personal-site personal-website social-links social-media static-site
Last synced: 4 months ago
JSON representation
Free Linktree Page Template
- Host: GitHub
- URL: https://github.com/alisa-yar/linktree-alternative
- Owner: alisa-yar
- License: mit
- Created: 2022-12-13T01:43:35.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-08T17:54:35.000Z (over 1 year ago)
- Last Synced: 2025-05-25T15:49:15.040Z (about 1 year ago)
- Topics: business-card, link, link-in-bio, link-page, link-tree, links, links-page, linktree, linktree-alternative, linktree-clone, linktree-custom, personal-page, personal-profile, personal-site, personal-website, social-links, social-media, static-site
- Language: HTML
- Homepage: https://demo.algofam.me
- Size: 7.45 MB
- Stars: 33
- Watchers: 2
- Forks: 21
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Linktree ✨
This is a free (and easy to use) alternative to linktree
---
## Demo
## Example by @ho0ber
https://links.sam.codes
He also build Lazylinks: A simple python package that makes it easy to write content and generate static HTML to be deployed and you can read more about it in his blog
---
## How to customize the template (which lines you should change)
### index.html file
1. line 7 - website title
2. line 10 - website icon image
3. line 14 - profile image
4. line 16 - user name
5. line 17 - description
6. lines 20-49 - your social media links
### style.css file
1. line 4 - text color
2. line 5 - font
3. line 16 - your backround image/color
#### If you want to change the username and description colors:
Let's say to 'red' for the example
- username - add 'color: red;' after line 40
- description - add 'color: red;' after line 44
- both - change line 11 from 'color: var(--textColor);' to 'color: red;'
---
## Where to host your website (for free)?
Netlify (easy to navigate): https://netlify.app
Github Pages (better for begginers): https://pages.github.com
Vercel: https://vercel.com/
Heroku: https://www.heroku.com
---
## Analytics
I personally recommend using Google Tag Manager and connect it to Microsoft Clarity
Google Tag Menger: https://tagmanager.google.com/
Microsoft Clarity: https://clarity.microsoft.com/
Netlify Analytics (9$ per month): https://docs.netlify.com/monitor-sites/analytics/
Google Analytics: https://analytics.google.com
---
## Social Media Icons
Here you can choose your wanted icons for each link:
https://fontawesome.com/search?o=r&m=free
### Before using:
* Make sure that you choose only from the "free" section.
* Copy the code for HTML/CSS.
### How to use (Example)
Let's say you want to use book icon instead of the Twitter icon
The line under your wanted link contains this line: "fab fa-twitter"
Then, after founding the icon that you want and its code,
paste the code in the same place where was your previous one
The final code shoud look like this: "fa-solid fa-book"
---
## Backround image
You can change backround to color instead of using an image.
### Backround Color
background-color: #7E65F5;
You can find your wanted color code here: https://www.color-hex.com
### Gradient Backround Color
background-image: linear-gradient (#E8E0FF, #7E65F5);
CSS Gradient Generator: https://www.css-gradient.com/
---
## Other Free Resources
Coolors (colors palettes): https://coolors.co
ColorsWall (colors palette): https://colorswall.com
CSS color picker from photos: https://imagecolorpicker.com/
CSS color keyword: https://www.w3.org/wiki/CSS/Properties/color/keywords#Basic_Colors
Google Fonts: https://fonts.google.com/
Favicon (icons): https://favicon.io/
BGJar (free svg backgrounds): https://bgjar.com
Box Icons (free icons): https://boxicons.com
