🔗 LittleLink-Server

This project is based on the great work from littlelink It takes the same simple approach to a link page and hosts it within a NodeJS server with React Server Side Rendering, containerized for you to use. Now, customizing LittleLink with littlelink-server is as easy as passing in some environment variables. If you need help configuring this, please see this video that explains everything and a live example at technotim.live.

🚀 Getting Started

📍 Supported Links & Buttons

Check the config file for all supported buttons!

📈 Analytics Support

Google Analytics

See Getting Started with Analytics. After getting your GA Tracking Id, use your tracking Id as environment variable like GA_TRACKING_ID=G-XXXXXXXXXX (See the example below)

All buttons clicked will be tracked automatically if GA_TRACKING_ID exists.

Sample event for YouTube button.

  window.gtag('event', 'youtube-button');

Umami

See Adding a website & Collecting data page to add and generate your tracking code.

Generated tracking code should look like:

<script async defer data-website-id="00000000-1111-2222-3333-444444444444" src="https://your-umami-app.com/umami.js"></script>

Use data-website-id as environment variable UMAMI_WEBSITE_ID and src as UMAMI_APP_URL.

Sample event for YouTube button.

  window.umami('youtube-button');

🩺 Health Check

A health check endpoint exists on /healthcheck. If healthy, it will return with a 200 and the following response:

{
  "status": "ok"
}

To skip express from logging these calls, add the environment variable:

SKIP_HEALTH_CHECK_LOGS=true

🐳 Docker

This container image is published on both GitHub Container Registry and DockerHub choose whichever one works for you. They will both be updated during CI.

docker-compose.yml

---
version: "3.0"
services:
  littlelink-server:
    image: ghcr.io/techno-tim/littlelink-server:latest
    # dockerhub is also supported timothystewart6/littlelink-server
    # image: timothystewart6/littlelink-server:latest
    container_name: littlelink-server
    environment:
      - META_TITLE=Techno Tim
      - META_DESCRIPTION=Techno Tim Link page
      - META_AUTHOR=Techno Tim
      - LANG=en
      - META_INDEX_STATUS=all
      - GA_TRACKING_ID=G-XXXXXXXXXX
      - THEME=Dark
      - FAVICON_URL=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_200x200.jpg
      - AVATAR_URL=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_200x200.jpg
      - AVATAR_2X_URL=https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_400x400.jpg
      - AVATAR_ALT=Techno Tim Profile Pic
      - NAME=TechnoTim
      - BIO=Hey! Just a place where you can connect with me!
      - FOOTER=Thanks for stopping by!
      - GITHUB=https://github.com/timothystewart6
      - TWITTER=https://twitter.com/TechnoTimLive
      - INSTAGRAM=https://www.instagram.com/techno.tim
      - YOUTUBE=https://www.youtube.com/channel/UCOk-gHyjcWZNj3Br4oxwh0A
      - TWITCH=https://www.twitch.tv/technotim/
      - DISCORD=https://discord.gg/DJKexrJ
      - TIKTOK=https://www.tiktok.com/@technotim
      - KIT=https://kit.co/TechnoTim
      - FACEBOOK=https://facebook.com
      - FACEBOOK_MESSENGER=https://facebook.com
      - LINKED_IN=https://linkedin.com
      - PRODUCT_HUNT=https://www.producthunt.com/
      - SNAPCHAT=https://www.snapchat.com/
      - SPOTIFY=https://www.spotify.com/
      - REDDIT=https://www.reddit.com/
      - MEDIUM=https://medium.com
      - PINTEREST=https://www.pinterest.com/
      - EMAIL=you@example.com
      - EMAIL_TEXT=Email Me!
      - EMAIL_ALT=you@example.com
      - EMAIL_ALT_TEXT=Email me!
      - SOUND_CLOUD=https://soundcloud.com
      - FIGMA=https://figma.com
      - TELEGRAM=https://telegram.org/
      - TUMBLR=https://www.tumblr.com/
      - STEAM=https://steamcommunity.com/
      - VIMEO=https://vimeo.com/
      - WORDPRESS=https://wordpress.com/
      - GOODREADS=https://www.goodreads.com/
      - SKOOB=https://www.skoob.com.br/
      - LETTERBOXD=https://letterboxd.com/
      - MASTODON=https://mastodon.social/
      - MICRO_BLOG=https://micro.blog/
      - WHATSAPP=https://www.whatsapp.com/
      - STRAVA=https://www.strava.com/
      - BUYMEACOFFEE=https://www.buymeacoffee.com/
      - GITLAB=https://www.gitlab.com/
      - PATREON=https://www.patreon.com/technotim
      - DEVTO=https://dev.to/
      - UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
      - UMAMI_APP_URL=https://your-umami-app.com
      # use ENV variable names for order, listed buttons will be boosted to the top
      - BUTTON_ORDER=YOUTUBE,TWITCH,TWITTER,GITHUB,INSTAGRAM,DISCORD,FACEBOOK,TIKTOK,KIT,PATREON 
      - PAYPAL=https://www.paypal.me/user
      - SLACK=https://slack.com/
      # you can render an unlimited amount of custom buttons by adding 
      # the CUSTOM_BUTTON_* variables and by using a comma as a separator.
      - CUSTOM_BUTTON_TEXT=Visit My Site,Visit My OTHER Site
      - CUSTOM_BUTTON_URL=https://technotim.live,https://www.youtube.com/channel/UCOk-gHyjcWZNj3Br4oxwh0A
      - CUSTOM_BUTTON_COLOR=#ED2756,#0085FF
      - CUSTOM_BUTTON_TEXT_COLOR=#ffffff,#ffffff
      - CUSTOM_BUTTON_ALT_TEXT=Visit my site!,Visit my OTHER Site!
      - CUSTOM_BUTTON_NAME=HOMEPAGE,HOMEPAGE2
      - STACKOVERFLOW=https://stackoverflow.com/
    ports:
      - 8080:3000
    restart: unless-stopped
    security_opt:
      - no-new-privileges:true

Docker command

docker run -d \
  --name=littlelink-server \
  -p 8080:3000 \
  -e META_TITLE='Techno Tim' \
  -e META_DESCRIPTION='Techno Tim Link page' \
  -e META_AUTHOR='Techno Tim' \
  -e LANG=en \
  -e META_INDEX_STATUS='noindex' \
  -e GA_TRACKING_ID='G-XXXXXXXXXX' \
  -e THEME='Dark' \
  -e FAVICON_URL='https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_200x200.jpg' \
  -e AVATAR_URL='https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_200x200.jpg' \
  -e AVATAR_2X_URL='https://pbs.twimg.com/profile_images/1286144221217316864/qIAsKOpB_400x400.jpg' \
  -e AVATAR_ALT='Techno Tim Profile Pic' \
  -e NAME='TechnoTim' \
  -e BIO='Hey! Just a place where you can connect with me!' \
  -e GITHUB='https://github.com/timothystewart6' \
  -e TWITTER='https://twitter.com/TechnoTimLive' \
  -e INSTAGRAM='https://www.instagram.com/techno.tim' \
  -e YOUTUBE='https://www.youtube.com/channel/UCOk-gHyjcWZNj3Br4oxwh0A' \
  -e TWITCH='https://www.twitch.tv/technotim' \
  -e DISCORD='https://discord.gg/DJKexrJ' \
  -e TIKTOK='https://www.tiktok.com/@technotim' \
  -e KIT='https://kit.co/TechnoTim' \
  -e EMAIL='someone@example.com' \
  -e EMAIL_TEXT='Email me!' \
  -e FOOTER=Thanks for stopping by! \
  --restart unless-stopped \
  ghcr.io/techno-tim/littlelink-server:latest

☸ Kubernetes

Unofficial helm chart provided by k8s-at-home

helm repo add k8s-at-home https://k8s-at-home.com/charts/
helm repo update
helm install littlelink-server \
  --set env.TZ="America/New York" \
  --set env.META_TITLE="TechnoTim"
    k8s-at-home/littlelink-server

Or use a values.yaml files

helm install littlelink-server k8s-at-home/littlelink-server -f values.yaml

👇 What is LittleLink?

LittleLink is a lightweight DIY alternative to services like Linktree and many.link. LittleLink was built using Skeleton, a dead simple, responsive boilerplate—we just stripped out some additional code you wouldn't need and added in branded styles for popular services. 😊

LittleLink has more than 20 company button styles you can use and we'll be throwing more in soon. You'll also find a light and dark theme ready to go. Not a fan of the colors? Update skeleton-light.css or skeleton-dark.css to the HEX values of your choosing.

Using Skeleton let us build something that loads quickly & doesn't have any of the unnecessary bloat you would get from using a large framework for a page that requires nothing more than simplicity. LittleLink scored a 99/100 in performance when tested with Google Lighthouse.

8.8 KiB Raw Blame History