Vignesh Shetty
Vignesh Shetty

Vignesh Shetty

Create Linktree Clone

Create Linktree Clone

Using React, Styled-Components also with amazing dark mode toggle!

Vignesh Shetty's photo
Vignesh Shetty
·Jan 8, 2022·

4 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Introduction
  • Forking Github Repository
  • Updating Github Repository
  • Deploy - Cloudflare Pages

Nowadays web applications like Linktree are used by developers to showcase their social, project links. Today let's see how to create our custom Linktree by below easy 3 steps. Let's dive in...

In this guide, we will:

  • Forking a github repository.
  • Modifying content and pushing code.
  • Auto deploy to Cloudflare pages.

What you will need:

Introduction

Do first, understand later. That is the approach here. If you are new to some of these technologies, don’t worry about it. Just follow along, and dive into topics afterwards.

Forking Github Repository

Linktree Template this is a link to my Linktree Clone repository which was developed using React, Styled-Components. We can even use Next JS instead of React for better Search Engine Optimizing and better search indexing. LinkFree this is a link to the Linktree Clone which was developed using Next JS.

Linktree Clone - Live Link

Linkfree Clone - Live Link

Group 21.png

If you already have a github directly login or create a new github account then head over to the Linktree Clone repository link then clone as shown in the above image.

Updating Github Repository

Once you have cloned the repository to your github account then press dot or create new codespaces as shown in the below image.

Group 21.png

This will open the current repository in a web view visual studio code. Now find the src/data/data.js file. That file will almost like this

Group 23.png

const socialLinks = [
  "https://github.com/vigneshshettyin",
  "https://linkedin.com/in/vigneshshettyin",
  "https://twitter.com/vigneshshettyin",
  "https://instagram.com/vigneshshettyin",
  "https://facebook.com/vigneshshettyin",
];
const profileData = {
  userName: "vigneshshettyin",
  photoLink: "https://github.com/vigneshshettyin.png",
  desc: "Tech Geek | Mentor @ DeltaSJEC",
};

const themeData = {
  light: {
    backgroundColor: "white",
    onHoverBackgroundColor: "#dfe6e9",
    cardBackgroundColor: "#ffffff",
    onHoverTextColor: "#636e72",
    footerColor: "black",
    footerSocialLinkColor: "white",
    headerFontColor: "#black",
    CardtextColor: "#2d3436",
  },
  dark: {
    backgroundColor: "#000000",
    onHoverBackgroundColor: "#02040a",
    cardBackgroundColor: "#222222",
    onHoverTextColor: "white",
    footerColor: "white",
    footerSocialLinkColor: "white",
    headerFontColor: "white",
    CardtextColor: "white",
  },
};
const linkData = [
  {
    id: 1,
    link: "https://go.vigneshcodes.in/meetly",
    name: "Meetly - Conferencing App",
    image:
      "https://play-lh.googleusercontent.com/QYc9QNf0_c-M7rhF4eo8daWbIRg_ukwzabR3Xj9TX_6zxG-AbzhKF5NS3CAd2X79fm0=s360-rw",
  },
  {
    id: 2,
    link: "https://go.vigneshcodes.in/certify",
    name: "Certify - Certification App",
    image:
      "https://play-lh.googleusercontent.com/QYc9QNf0_c-M7rhF4eo8daWbIRg_ukwzabR3Xj9TX_6zxG-AbzhKF5NS3CAd2X79fm0=s360-rw",
  },
  {
    id: 3,
    link: "https://eatmyurl.ml",
    name: "EatMyUrl - Free URL Shortener",
    image:
      "https://play-lh.googleusercontent.com/QYc9QNf0_c-M7rhF4eo8daWbIRg_ukwzabR3Xj9TX_6zxG-AbzhKF5NS3CAd2X79fm0=s360-rw",
  },
  {
    id: 4,
    link: "https://go.vigneshcodes.in/bulkmailer",
    name: "BulkMailer - Free Bulk Mailer App",
    image:
      "https://play-lh.googleusercontent.com/QYc9QNf0_c-M7rhF4eo8daWbIRg_ukwzabR3Xj9TX_6zxG-AbzhKF5NS3CAd2X79fm0=s360-rw",
  },
  {
    id: 5,
    link: "https://tesla.vigneshcodes.in",
    name: "Tesla UI Clone Using ReactJS",
    image:
      "https://play-lh.googleusercontent.com/QYc9QNf0_c-M7rhF4eo8daWbIRg_ukwzabR3Xj9TX_6zxG-AbzhKF5NS3CAd2X79fm0=s360-rw",
  },
  {
    id: 6,
    link: "https://webscraper.vigneshin.ml/",
    name: "Free S.E.O Scrapper / API",
    image:
      "https://play-lh.googleusercontent.com/QYc9QNf0_c-M7rhF4eo8daWbIRg_ukwzabR3Xj9TX_6zxG-AbzhKF5NS3CAd2X79fm0=s360-rw",
  },
  {
    id: 7,
    link: "https://react-blog.vigneshcodes.in",
    name: "Free Blogging Application",
    image:
      "https://play-lh.googleusercontent.com/QYc9QNf0_c-M7rhF4eo8daWbIRg_ukwzabR3Xj9TX_6zxG-AbzhKF5NS3CAd2X79fm0=s360-rw",
  },
  {
    id: 8,
    link: "https://blog.vigneshin.ml",
    name: "Free Blogging Application",
    image:
      "https://play-lh.googleusercontent.com/QYc9QNf0_c-M7rhF4eo8daWbIRg_ukwzabR3Xj9TX_6zxG-AbzhKF5NS3CAd2X79fm0=s360-rw",
  },
  {
    id: 9,
    link: "https://react-opensource.vigneshcodes.in/",
    name: "Open-Source React",
    image:
      "https://play-lh.googleusercontent.com/QYc9QNf0_c-M7rhF4eo8daWbIRg_ukwzabR3Xj9TX_6zxG-AbzhKF5NS3CAd2X79fm0=s360-rw",
  },
  {
    id: 10,
    link: "https://linktree.vigneshcodes.in",
    name: "Display Links Uniquely ",
    image:
      "https://play-lh.googleusercontent.com/QYc9QNf0_c-M7rhF4eo8daWbIRg_ukwzabR3Xj9TX_6zxG-AbzhKF5NS3CAd2X79fm0=s360-rw",
  },
  {
    id: 11,
    link: "https://blog.vigneshcodes.in/quick-guide-to-deploy-using-docker",
    name: "Quick Guide To Deploy Using Docker",
    image:
      "https://play-lh.googleusercontent.com/QYc9QNf0_c-M7rhF4eo8daWbIRg_ukwzabR3Xj9TX_6zxG-AbzhKF5NS3CAd2X79fm0=s360-rw",
  },
];

export { socialLinks, profileData, linkData, themeData };

Now, update the content as per your requirements. Once the data is updated the next step is to push the updated code to the current repository. Go to the source control section on the sidebar or press [Ctrl + Shift + G]

Group 24.png

In Step - 1 we are writing a commit message. Step - 2 we are pushing the updated content to the current github repository. Now, if we check the Linktree Clone github repository our data will be updated. The next step is to host the site using Cloudflare Pages.

Deploy - Cloudflare Pages

Head over to Cloudflare Pages Website. Log in if you have already created a Cloudflare account or else sign up.

Group 25.png

Click on create a project then there will be a pop-up to connect to GitHub or GitLab. Choose GitHub as we have already pushed the code to GitHub.

Group 26.png

Screenshot 2022-01-08 111432.png

Once GitHub is connected to Cloudflare then change the setting as given in the above image. Now, our Linktree Clone repository is linked to the Cloudflare Pages project.

Group 27.png

Group 28.png

Update the Build command & Build output directory accordingly as given in the above image then click on the save and deploy button which will start the deployment process. If Framework preset is selected as none by default change it to Create React App. The deployment process may take around 4-5 minutes.

Hurray!! Now our Linktree Clone is auto deployed using Cloudflare Pages. If required you can link a custom domain by updating the CNAME record. Cloudflare Pages Docs

Screenshot 2022-01-08 112823.png

Cheers,
Vignesh

 
Share this