Your self hosted Linktree, with analytics

That's right! We are going to build our own self hosted Linktree. Read on to find out how!

Introduction

Our project is going to be built using NodeJS, MongoDB and HTML+CSS+JS. We are also going to be using Express JS to write the server code.

Prerequisites

A laptop/PC with a internet connection

Node JS. If you don't have Node JS, download and install it from here

Your favourite code editor. I use VS Code

Optional: If you are using Windows, I highly recommend you to use Windows Terminal. You can download it from MS Store

Let's get started!

Part 1: Creating the express server

Step 1:

Open a new folder, then open terminal in that folder and run npm init in the terminal and follow the on screen steps to configure your project (you can simply hit enter to set the default values). This will create a package.json file in your folder

Step 2:

Run npm install express --save in your terminal to install Express.js. We are going to need Express.js to serve our page.

Step 3:

Open the current folder in your code editor. If you are using VS Code, you can simply type code . in your terminal and it'll automatically open up VS Code in the current folder.

Now, we shall write the server.js file

Step 4:

Create a new file named server.js in the current folder. Open it and add the two lines below:

var express = require("express");
var app = express();

The above two lines of code will create and initialize a new Express application

Step 5:

We need to configure our Express app to serve static contents. The below line will configure Express to serve static contents from the public directory

app.use(express.static('public'));

Step 6:

Next, we configure our directories for all static files.

app.use('/assets', express.static(__dirname + '/public/assets')); //To serve static assets

The above lines of code configure our Express app to redirect /assets to /public/assets

We do the same for the rest of the directories which we will need in our app

app.use('/api', express.static(__dirname + '/api'));

The API directory stores our serverless function for analytics

Step 7:

We are almost done with writing the server part of the code. We only need one statement now to run our server

var server = app.listen(3000, function () {
    var port = server.address().port;
})

The above line of code will start our server and make it listen on port 3000. If you are wondering why we used port 3000, it doesn't really matter. We can use any port as Vercel is going to manage the deployment for us

Now, let's move on to creating the webpage i.e. the Linktree page

Part 2: Creating the webpage

Create a folder called public in the root directory of the project. Then create the below directory structure

├───public │ └───assets │ ├───css │ └───images

Step 1:

Create a file called index.html in the public folder. Open it in VS Code, type in html:5 and hit Tab

Voila! Our file just got starter code automagically

Set the title of your page as you wish. In my case, I have kept it as my name.

Step 2:

In the head tag, add the below code. I’ll explain what each part does below

<script src="api/log.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

The first line, which loads api/log.js is a call made whenever the website is opened. It keeps tracks of the visitors data

<script src="api/log.js" type="text/javascript"></script>

In the and line, we import our custom CSS and the Font Awesome icons

<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

Step 3:

Now we get to the most important part, creating the links!

Inside the body tag, we create a div and add our image and one line description

<div id="profile">
<img id="userPhoto" src="assets/images/Photo.jpg" alt="Profile picture of Sanyog Jain">
	<div id="userName">
		<h1>Sanyog Jain</h1>
		<p>Student at Vidyalankar Institute of Technology</p>
	</div>
</div>

Step 4:

Let’s create the links now!

Create another div below to accommodate our links

<div id="links">
<a class="link" href="

Just replace the href value with your links

Now, coming to the most important part. Suppose you want to add your custom icon and link. How would you do that?

Spoiler alert: It’s very simple

First, find your favourite icon from Font Awesome

Next, add the below code inside the div

<a class="link" href="link" target="_blank"><i class="font awesome class here"></i>
Link name here</a>

You have to change 3 things above:

href : This is where you have to paste in your target URL

class : This is where you paste the icon class of the Font Awesome icon you want

Link name here : Simply replace this placeholder text with whatever title you want to give to your link

And that’s it!

Now we move on to styling the page

Step 5:

Create a file called style.css in public/assets/css

Then, paste CSS from this link

Step 6:

Let’s have a look at what we have gotten working so far! Spin up your terminal in your project folder and run npm run start and if all goes well you can navigate to localhost:3000 to view your project output! The images will be missing, but we will soon fix that.

Step 7:

Let’s create our favicon. To do it, pick a good photo of yourself and head over to a favicon generator. I have used this one, and for the sake of uniformity I recommend you to use the same as well.

Make sure that your photo is properly cropped before uploading it!

Once you are done with generating the favicon, you’ll get a zip file. Extract it’s contents to public/assets/images

You’ll also get a set of link tags written below after conversion. Copy and paste those into the head tag of your index.html

After you have copied the link tags, append assets/images at the start to the href property in each link. For example, change /favicon-32x32.png to assets/images/favicon-32x32.png

As one last step, place a background image called bg.jpg and your original photo in the same directory. Rename it as Photo.jpg

Step 8:

Now head over to your browser and refresh the page. You should see an output something similar to what I have shown below

Congratulations, you just built your self hosted Linktree!

Now only deployment and analytics remain. I’ll be covering that soon in the second part of this tutorial. Until then, feel free to experiment!

As always, comments are appreciated! If you want to get in touch with me, then you can contact me using my socials below.

Happy hacking!