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

Haml

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

!!!
%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 Haml 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, Haml and Less.