Build Your Own Link Hub With Storyblok, Astro and Edgio
Storyblok is the first headless CMS that works for developers & marketers alike.
This guide describes how to create and deploy your own Link Hub built with Storyblok & Astro to Edgio. Clone the repo link-hub-storyblok-astro-edgio-starter to get the entire setup.
Section titled Set up Storyblok space Set up Storyblok space
To set up a Storyblok space, log in to your account or create a new one, and click on New Space {1}.
Create a new Storyblok space by giving it a name.
Click on Create New {1} to get started with creating the Profiles folder.
Click on Folder {1} to get started with creating the Profiles folder.
Imagine Storyblok's folder as a collection of items, and each Storyblok entry being an item itself. We'll be creating two folders: Profiles and Profile. Each entry that lives inside Profiles represents an individual Author or a Post.
After typing in the Name, click on Add New as the content type and give it a personalized Name (here: Link Hub Profile Links) as we'll be giving it our own blueprint. Click save to create a Profiles folder.
Click on Create New to start creating your first Profile entry.
Click on Define {1} to start defining the Profile schema.
Add a Name field to the schema (type Text).
Add an About field to the schema (type Text).
Add an Image field to the schema (type Asset).
For all the Links {1} that’ll be visible to the user, let's create a Blocks {2} so that we can insert as many associative links as we want to
For all the Socials {1} that’ll be visible to the user, let's also use a Blocks {2} field so that we can insert as many associative socials as we want to.
Add OG field to the schema (type Asset).
Click on the Settings Icon (Edit Field) {1} to change how the Image field is set up
Click on Allow external URL {1} and select Images {2} to limit the Asset type to images and also, allow linking to external URLs
Start adding links to the Blocks {1} field and choose the Feature block.
Click on the Feature {1} block created above and let’s change what each link can contain.
Click on Settings Icon (Edit Field) {1} to access the schema of the Feature block
Add an Image field to the schema (type Asset).
Add a URL field to the schema as the (type URL).
Next, obtain the Preview {1} API key (further referred to as STORYBLOK
) shown in the tab Access Tokens of Settings. Obtain the token from the list as STORYBLOK
.
Section titled Set up Astro with Edgio Set up Astro with Edgio
To set up, just clone the app repo and follow this tutorial to learn everything that's in it. To fork the project, run:
After these steps, you should be able to start the local environment using the following command:
Section titled Implementing Data Fetching and Revalidation Implementing Data Fetching and Revalidation
In this section, we'll be diving deep into how the data fetching and revalidation for the user profiles is done. We make constant use of Stale While Revalidate on the Edge to achieve 100% cache hit rates, and @astro/storyblok to fetch and display data statically.
Section titled getUserInfo: Fetching the user profile getUserInfo: Fetching the user profile
The getUserInfo
function uses Storyblok's useStoryblokApi
hook to make an API request to the relevant user profile page, identified by a unique slug
. If the story is present, the function extracts the name
, image
, about
, links
, social media profiles
, and lastly SEO first open graph image
from the returned data. The function maps the links and social media profiles to arrays and returns all the extracted data in an object with a code of 1.
Furthermore, If the story is not present or there is an error, the function returns an object with a code of 0 so that then the user can be redirected to 404 automatically.
Section titled Implementing stale-while-revalidate on the edge for all the user profiles Implementing stale-while-revalidate on the edge for all the user profiles
The following code describes how to use the concept of Stale While Revalidate to achieve 100% cache hit rates. In the code (in routes.js
), the router.match
function is used to match all the user profiles (that start with /me/
). Inside the cache method, we prevent caching the page in browser and enable only edge caching to always serve users fast and with the latest content. The edge option is set to maxAgeSeconds: 1
to ensure that the data is cached for only a second. The staleWhileRevalidateSeconds
option is set to be a year to allow the data to be served directly from the cache while the cache is being refreshed.
Using Stale While Revalidate can help to improve the performance of the app by reducing the load on the server and providing faster responses to the user.
Section titled Creating dynamic user profiles on the fly Creating dynamic user profiles on the fly
Astro makes it super easy to set up dynamic routes. In the app, you'd find src/pages/me/[slug].astro
, which maps pages that start with /me/
. Examples include /me/user-1
and /me/some-new-user
.
Section titled Fetching user profiles Fetching user profiles
We fetch the data for the current user by making use of the slug
query parameter extracted out of Astro params, and call the getUserInfo
function (as described above) to obtain all the related user data. In case of not found or an error, we redirect the visitor to a 404:
Section titled Deploy from CLI Deploy from CLI
You can do a production build of your app and test it locally using:
Deploying requires an account on Edgio. Sign up here for free. Once you have an account, you can deploy to Edgio by running the following command in the root folder of your project:
Now we are done with the deployment! Yes, that was all. You should see something like this in the console:
Go ahead! Change content and publish it on Storyblok, and browse the /me/user-slug
route of your website to look for changes (yes, revalidation works just like that!).
Section titled Summary Summary
In this tutorial, we learned how to build our own Link Hub with Storyblok CMS in a Astro project and deploy it to Edgio.
Resource | Link |
---|---|
Github Example Repo | https://github.com/rishi-raj-jain/link-hub-storyblok-astro-edgio-starter |
Astro Documentation | https://docs.astro.build/en/guides/data-fetching |
Edgio Deploying Guide | https://docs.edg.io/guides/sites_frameworks/getting_started/astro |
Section titled Further resources Further resources
Resource | Link |
---|---|
Astro | https://astro.build/ |
Storyblok | https://www.storyblok.com/ |
Storyblok SDK for Astro | https://github.com/storyblok/storyblok-astro |
Storyblok SDK Live Demo | https://stackblitz.com/edit/astro-sdk-demo |
Storyblok in the Astro Docs | https://docs.astro.build/en/guides/cms/storyblok/ |
Building Future-Proof High-Performance Websites With Astro Islands And Headless CMS | https://www.smashingmagazine.com/2023/02/building-future-proof-high-performance-websites-astro-islands-headless-cms-storyblok/ |
Storyblok APIs | https://www.storyblok.com/docs/api |