Linktree Clone with Blurry the Schema First Static Site Generator

Documentation of an experiment with Blurry CLI.

Goal

The goal for this project is to have a show case for a page made with Blurry (or blurry-cli) the schema first static site generator.

I (Kaj Kandler) am interested in Structured Data Markup and the Google Knowledge Graph. As I work with websites to present people and organizations in such a way that Google can make the connections in its kowledge Graph. The goal of all that is to trigger Google Knowledge Panels fo rbranded searches for a Person's Name or an Organization's name.

What is Blurry?

Blurry is a static site generator converting Markdown content into static HTML. Its signature feature is to add front matter which allows the definition of schema markup or structured data markup.

Using Blurry you can create content fairly quickly by writing markdown files and adding the appropriate schema markup. This easily leads to SEO optimized sites.

Under the hood, Blurry does use Python and Jinja2 for templating the pages. The front matter needs to be formatted in TOML.

What is a static site generator? Why would I use one?

Modern websites are often based on a dynamic Content Management system such as Wordpress. That means for every page requested by a user a program is run on a server and the parts of the content are pulled from a database and assembled to the whole page. Once the page is complete it is served by a web server.

In contrast a static website simply has all content pre-generated and the webserver served simply static files to the browser when requested. This is much faster, which is a benefit for users, especially for users on slow connections. This benefit of a fast websie also extends to search engine optimization because Google favors faster websites over slower ones.

Yet, static websites have obviously their limits. For example with a purely static website you can't server forms and connelct information. Still there are many use cases, where simplicity of content creation trumps the most sophisticated styling of your website. For example a small personal site or a site for a project. Also documentation about software or physical products do not need dynamic elements.

What is Structured Data (Schema) Markup?

Structured Data Markup is a formal way of providing machine readable information besides the text on the page.

It helps programs such as search engines to understand that "apple" is the fruit and not the electronics company. It can also provide information, who exacly is "Mr. Kandler" or "Kaj"

The most commonly used vocabulary for Structured Data Markup is schema.org. It defines various types of creative work (article, web page, web site, video, ...) as well as event product, person or organization and many attributes that connect these with each other. For example you can define the person that is the author of an article as well as the organization that published the article. Furthermore you can define that the article is part of a specific web page, which is part of a website.

What is a Link-In-bio page?

A link-in-bio page is a single web page which lists the most important ways to buy from you or to get in contact with you.

Social Media has become a very popular mnethod of communciation and publishing content. Many influencers use it to find their audience, from YouTube to Instagram or TikTok. However, to sell anything you market you want to draw people into your sales funnel in form of a webpage or landing page.

As many social media only allow a single link in your bio page and not links on the various postings you want a single page that allows your audience to reach you and your sales funnel(s).

As a matter of branding, you want this page to also connect your different social media profiles in order to help Google understand that it is a single person or brand creating all this content. You fruther want Google to lock you or your brand into its knowledge graph and show the appropriate knowledge panels.

Link-In-Bio Content: A list of links

For this project I create a short list of links to my personal website and my Social profiles. It is a link in bio page very similar to LinkTree. LinkTree is one of the leading tools to create a link-in-bio page with very littel effort. Yet it does not add schema markup to its pages which makes it hard for Google to be sure who all these connections belong to.

In short we create a list of links to:

The template

Blurry uses Jinja2 templates to add additional content to the markdow of each page.

The template adds the scaffolding for the markdown to go into the right place. It also is teh place to add navigation menues and other meta-data such as CSS styling and canonical URLs.

For the markdown to be published and the schema markup to be inserted as JSON-LD

The styling (CSS)

We spruce the page up with some CSS to make the entries look like buttons

The Schema Markup for the Link-In_Bio

At the top I added the relevant schema markup in the TOML format supported by Blurry CLI

The git repo to generate the static website

The GitHub Action to automatically publish

The good, the bad and the ugly of Blurry

The good

Blurry does a good job of adding the schema into the page. I needed to get used to the TOML notation and hwo to set up the various nested objects.

The bad

Blurry does not come with 'batteries included'. For example it lacks soem simple theme files to make a small website easy to create.

Basically all single site generators are not full fledged CMS systems with an admin UI and extensive customizations. It usually requires a developer to make things work and to set up some easy publishing to make the system practiocal for use.

The ugly

There are some bugs. For example the great support of images for responsive design is not working with svg files as images.

When I tried to mix global schema settings and page local scheam it did not go too well. I personally prefer the "@graph" approache, promoted by Yoast, to not repeat myself in schema. However, having a global graph and local parts to the graph does not (yet) work with Blurry.

But that can be expected for a young project like Blurry. John Franey, the maintainer of the project, has been quite responsive to reported issues. I think with more users this project could be thriving.

Overall a positive experience with Blurry

Overall I'd give Blurry a 4 out of 5 rating. It is usable for simple, mostly text based projects due to the limitations of markdown. You get always the same straight HTML and no divs to build styling variations into the text. if you don't expect to much variation of formatting it is a good choice. The easy addition of the schema is certainly helpful. I'll keep experimenting with it and mayby I get around to add some cool things like breadcrumb navigation.