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.
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.
All contents of these categories can be read out in the query with starts_with.
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
The thumbnails for the links can be uploaded directly to storyblok.
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.
