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 Sass.

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.

Sass

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 Sass.

body 
  margin: 4em 2em
  background-position:center
  background-size:cover
  background-repeat:no-repeat
  background-color:#000000
  background-style:flat
  background-image:url(https://d1fdloi71mui9q.cloudfront.net/dmf6TpUKQUupYgrWnBRf_tEjp8b55w933r2vU)

.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 Sass.