Tips and Tutorials

How to Make a Free LinkTree Site with LinkFree (A LinkTree Alternative)

BTL

Jul 28, 2023 • 5 min read

What is LinkFree?

LinkTree is one of the most popular landing page creation services. With a LinkTree page, users can add their links to the page so instead of sharing numerous links, they can simply share the link to their LinkTree page. Although making a LinkTree website is free and easy, there are some restrictions that users need to pay to remove. However, what if you wanted to make a website that is similar to LinkTree, but without restrictions?

This is where a project like LinkFree comes in. LinkFree is a project by Michael Barney that is a free alternative to LinkTree and other landing page platforms. It is highly customizable as you can edit the design and links freely. Most importantly, it is free to use.

This article will teach you how to make a free landing page using LinkFree, a LinkTree alternative. You will learn how to download the files, edit them and publish your website onto GitHub pages.

How to Make a LinkFree Site

The steps for making a LinkFree site are as follows:

Download the project files.
Edit the files.
Publish the files to host your website.

The instructions may vary depending on the template you choose but this tutorial will cover the concepts that are shared among all templates. Templates will be discussed below.

Prerequisites

Before you start, you will need to have the following:

Git and a GitHub account
A text editor
Some basic coding knowledge

Download the Project Files

You will need to download the project files onto your computer, which you can find by clicking here to access the GitHub repository. Fork the repository and then clone it to your computer by typing git clone https://github.com/MichaelBarney/LinkFree in your terminal. You will now have all of the contents including a folder of templates. Browse the templates and pick one that you like. After that, I would also recommend deleting the other templates since you will not need them.

Edit the Files

Now it is time to edit the files and design your LinkFree website. Templates will usually have an index.html file and a style.css file. Some templates may also have an index.js file and other files. This section will cover the files these templates have in common.

Editing index.html

The index.html file is where you will design the layout and your links. The head section defines your website’s properties such as the page title and metatags. You do not need to change anything in this section aside from the page title and the favicon file (if you have one).

Next, you have the body section where you can replace your photo, your display name and manage your links. For your links, they will be contained in your links div. To add a link, just add a line in the form of <a href="url">link text</a> as seen below.

Editing style.css

The style.css file will contain the design of your LinkFree template. For the most part, the parts of your website that you will be editing the website for are the background, the styling of the buttons, and your profile information.

Editing index.js

JavaScript can add some more functionality to your website, depending on how interactive you want your LinkFree website to be. However, if you do not need that additional functionality, you can remove the index.js file.

When you are all done, you may preview it and see what it looks like. You can continue to tweak the template until you are satisfied and then push the changes to your repository. See this page on how to push changes to your GitHub repository through the terminal or this page if you are using GitHub Desktop if you do not know how to do so.

Upload the Files and Host Your Site

Finally, for anyone to access your site, you will need to upload your files somewhere. You can use any host, but I would recommend GitHub Pages since it is free and simple. To publish your site, head over to the settings page of your repository and click on the “Pages” tab. Then for the source, select your main branch and hit save.

It will take a while for your site to build, but when it is ready, you will be provided with a link to your site, which you can share with other people.

If you are planning on using another service to host your LinkFree site, consult their documentation and guides on how to host your site there.

Adding Additional Features to Add to Your LinkFree Site

Up to this point, you have a LinkFree site with a template and links, but you might want to add additional features. This section will discuss a few suggestions, but it will not provide in-depth guides for any of them. Consult other resources for more information.

Web Analytics: Web analytics services provide data on how users use your website. You can obtain statistics such as page views, sessions, and more, which is useful for knowing how often people visit your website and how often they interact with the elements on it. Popular analytics tools include Google Analytics, Google Tag Manager, and Hotjar.
Embedded Media: If you have any new media content that you want to promote, consider embedding it onto your website. Visitors can play the embedded content directly on the page. Popular media platforms will have features to allow you to create embeddable content.
Social Media Icons: Instead of creating links for your social media accounts as buttons, you can place them as icons on your page. That reduces clutter and makes your social media profiles easier to access. For social media icons, sites like FontAwesome have a great set of free icons that you can use.

An example of a LinkTree profile with social media icons is below the links. You can replicate this with your LinkFree page.

Contribute a Template to LinkFree

If you created a template that you think is worth sharing with other people, Michael Barney is always looking for people to contribute to the project. It is a great beginner project to contribute to if you do not have much experience and are looking to build your portfolio. Read the instructions on the repository’s page to learn how to make a contribution.

Conclusion

In the end, you now have your own website that is similar to LinkTree, except you managed to build one for free and you have complete control over it. When you need to update links, you can open those files and make the necessary changes freely. If you ever need additional features, you can research what tools are available and implement them on your website. When you are all set, publish the changes and share the website with your audience!