If you want to add a link to a post on Instagram, you will quickly notice that this is not possible. You can only add a single link in the so-called “bio”. But what if you want to create multiple links to your products in the store or to blog articles?

Services like Linktree or Liiink.me offer the possibility to create a small page where you can put some buttons. In the free version, these services are unfortunately all limited. So the look of this page can be customized only limited and also the number of buttons is limited.

As a web developer I didn’t want to use an external service for this and so I built such a link tree clone myself. Here is the final result: links.andreas-stricker.at

Tech stack:

VueJS and Vite

In this project I tried Vite for the first time. The development server starts many times faster than vue-cli.

Bildschirmfoto 2021 02 09 um 21.54.46


THE ADVANTAGES OF VITE

💡 Instant Server Start
⚡️ Lightning Fast HMR
🛠️ Rich Features

📦 Optimized Build
🔩 Universal Plugins
🔑 Fully Typed APIs

What is a Headless CMS?

Traditional content management systems like WordPress or Typo3 usually consist of a backend (to manage the content) and a frontend (to display the created content to the user).

A headless CMS provides the pure backend with interfaces to load the content into a custom developed frontend. In my case, I created the frontend with VueJS and used storyblok as the headless CMS to create the individual button content on their user interface.

CONTENT STRUCTURE IN STORYBLOK

Since I want my links divided into three categories, I created a separate folder for each “category” in my new space in storyblock.

Bildschirmfoto 2021 02 09 um 21.58.08

All contents of these categories can be read out in the query with starts_with.

Bildschirmfoto 2021 02 09 um 22.52.58

For the button content I created my own Content-Type “Button” (Content-Types are comparable with Custom-Post-Types of WordPress) .

The schema for the “Button” content type is built with the following fields:

  • Title – slug: title
  • Description – slug: description
  • Image – slug: image
  • Link – slug: link
Bildschirmfoto 2021 02 09 um 21.56.59 edited

The thumbnails for the links can be uploaded directly to storyblok.

Bildschirmfoto 2021 02 09 um 21.57.43

READING CONTENT FROM STORYBLOK WITH GRAPHQL

To read the previously created content in VueJS, I followed this guide and adjusted the queries a bit to read the items from the folders.

OWNLINKS on Github

The project can be cloned on Github and used with own content and styles. The credits must be preserved for this.

Write A Comment