LinkTree using Jade, Sass and Bootstrap

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

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 &copy; Brandon Himpfen - All Rights Reserved.

Sass

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 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, Jade and Sass.