In this tutorial, I'm going to show you how-to create your own self-hosted LinkTree page using Bootstrap, as well as Jade and Less.

Jade

Use the following Jade code to generate a complete HTML web page for your own self-hosted LinkTree.

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    title Brandon Himpfen
    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css')
    link(rel="stylesheet", href="./style.css")
  body
    .tree
      .header
        img.profile-pic(src="https://pbs.twimg.com/profile_images/1361852374596395012/isM8He5__400x400.jpg")
      .links
        a.btn.btn-outline-primary.btn-lg.btn-block(href="") Visit Our Website
        a.btn.btn-outline-success.btn-lg.btn-block(href="") Shop Now and Save 40%
        a.btn.btn-outline-dark.btn-lg.btn-block(href="") Learn How-to Build a Website using WordPress
        a.btn.btn-outline-primary.btn-lg.btn-block(href="") Check Out Our Weekly Newsletter
        a.btn.btn-outline-primary.btn-lg.btn-block(href="") Subscribe to Our YouTube Channel!
      .footer
        | Copyright © Brandon Himpfen - All Rights Reserved.

Less

We've added a hosted version of Bootstrap in the Jade code above, so all we need is a bit of custom CSS that will be generated using Less.

@background-image: url(https://d1fdloi71mui9q.cloudfront.net/dmf6TpUKQUupYgrWnBRf_tEjp8b55w933r2vU);

body {
  margin: 4em 2em;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#000000;
  background-style:flat;
  background-image:@background-image;
}

.tree {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  max-width: 800px;
  
  .username {
    text-transform: uppercase;
    font-weight: 600;
    margin: 2em;
  }
  
  .links {
    a {
      margin: 0.75em auto;
    }
  }
  
  .footer {
    margin: 2rem;
  }
  
  .profile-pic {
    width: 150px;
    border-radius: 50%;
    text-align: center;
  }
}

a.btn {
  background-color: #fff;
}

Enjoy! You now have your own self-hosted LinkTree using Bootstrap, Jade and Less.