Links and Landings for Artists

Tl;DR

Artists, artists…

Thats what social media has made us believe we are

All while we place the head of a pig in the public, while we actually sell dogs.

+++ Having a look to the latest: https://astro.build/themes/4/?search=&price%5B%5D=free

Intro

If you are not a data professional, but a creative professional, like a music creator…

Creating Music with AI Post

DIY music? or with 11labs we can create music

You will need to let the world know about your work/brand and where to find it.

That might be the thought of someone still trying to sell to the B2C world.

As of today, im not sure if selling to 9-5 ,grey’ people is the best niche though

But hey, you got those likes and you are famous, keep reading :)

mindmap
    id))Your Online Brand((

SaaS around Links

People are building SaaS around links:

• Taplink
• bento.me
• https://getallmylinks.com/
• https://subscribepage.io/listy#
• https://linke.ro/

• https://linktr.ee/lynnic

• https://www.youtube.com/@lynnic/featured

• https://indiepa.ge/charlieclark

• https://github.com/charlieclark

• https://www.liinks.co/?ref=indiepage_leaderboard

Which is validated to have done 1M+ https://indiepa.ge/leaderboard as of the time of writing

• https://www.liinks.co/i/plans
• https://www.youtube.com/watch?v=uqah6bDkSxs
• https://blog.liinks.co/link-in-bio-monetization-strategies-unlocking-new-revenue-streams-for-creators

OSS Links Web Profiles

I made couple of posts about ssg themes for links:

LinkinBio with Astro

Links with astro-link-in-bio-theme - FinanceInMotion FYI

Links with HUGO LYNX Theme

Collection of important Links on Github Pages

A Theme that brings TinyCMS support and that i tried is: https://github.com/DBozhinovski/astro-theme-ltree

An Astro theme that replicates Linktree and Linkinbio rolled in one. Optional TinaCMS on top.

And recently I found about:

• https://github.com/francosuarez-dev/artistree
  • Which I could not avoid to fork: https://github.com/JAlcocerT/artistree

#and added my fav tool of the year
Add a Makefile with bare metal install, dev and container-dev with also help

MIT | Link in Bio Page for Artists 🎶

git clone https://github.com/JAlcocerT/artistree
cd artistree
make help
#make install & make dev
#make container-dev

Which can be an interesting compaion for LittleLink, which allow to builds links websites wo/code:

FORKED - Artistree Theme

Astro Kindof LinkTree for Artists

LinkStack and LittleLink

Two Selfhosted Link Alternatives

What Links to show?

Because…

You have something more to show that social media apps…right?

Here you have some ideas with projects that I have been publishing about before.

Also, you can plug Web Analytics or Link Analytics to your links.

Waiting List for Products

There are several ways to build one of these

Even with Reflex

Reflex forms for waiting list / newsletters

I first built a Waiting2Landing: Two Astro Themes working together

First the waiting list theme captures leads via formbricks, then, changing to an agency landing page:

Astros WaitingToLanding

POST of Waiting2Landing with 2 Astro Themes

Waiting to Landing Repo

Two Astro Themes + Formbricks to capture emails

That should allow you to build DIY websites for your brand, as I have been doing

The Waiting2Landing v2 PB Post

I tinkered here more with CSR and linkhub than actually building the waiting2landing v2 with PB instead of formbricks as per v1

Simple Waiting List Repo

NextJS + CapJS = Working Waiting list to CSV with no external APIs

I created this in the middle of the last real estate updates post:

It’s a clear example that, if you know what you are doing (at least vibe coding with the right fwk & instructions), you can get a: Cool UI/UX for Web, Admin Panel, with no external APIs, and a working waiting list to CSV for you to process later on.

Other people are doing their’s too: https://github.com/berat/waitlist-landing-page

Landing Page for your SaaS

After the waiting list and checking the PMF, comes building time.

For which you should have a cool Landing Page.

It does not have to be the Lando Norris Page, neither the genkinfy.

You could make it look impressive (yet not so much responsive)

But the aster you go from Idea to WaitingList/Landing depending on your popularity and to deployment into VPS, the higher changes to get Stripe notifications.

It detects the framework, the web analytics, the ads…

A landing as companion for a link website does not have to be a multi-page one though:

I migrated my brand to that data centered landing (and more) theme on this post

You can also capture emails (unverified), but adding a CapJS check at least:

Whatever landing you are building, make sure to consider: Is there any way: formbricks / cal / email to bring interaction / web analytics?

Because some landing + video look fantastic, just that they are not so performant: https://github.com/midudev/landing-tesla

Ejemplo de landing de Tesla con HTML, CSS, JavaScript, Astro y Tailwind

With very interesting video sections!

Haaad to fork this anyways: https://github.com/JAlcocerT/landing-tesla

See ./public/video.webm to see the video in action!

If you are confortable with animations on your landing, consider also:

• https://github.com/iann-mathaiya/nikola-tesla

MIT | Which you guessed - I forked: https://github.com/JAlcocerT/nikola-tesla

#make help 

If you like videos on your site, you can always embed them from youtube.

Or consider peertube or vidstack

• https://jalcocert.github.io/JAlcocerT/selling-with-a-landing-website/

SaaS like…a t3chat?

• https://jalcocert.github.io/JAlcocerT/t3-like-chat/#a-t3-chat-like-interface

Vibe Coded Landing Pages

This time, I wanted something quick with NextJS, and to try from the UI/X side shadcn/ui and from the backend the authJS instead of the last MUI + better auth x server.

So taking the last learnings from here, I prepared:

Create a Landing Page based on NextJS with a cool and modern UI

There will be a login button that directs to `/login` from which via better-auth and a sqlite with a unique username and password provided as per .env that is the one who can access the `/admin`

Include a `dockerfile` and `docker-compose.yml` that will control the title, description, open-graph image, favicon location and other global website variables via environment variables.

Create also a makefile with the following commands:

* `make help` - Show available commands
* `make install` - Prepare the dependencies for local development
* `make dev` - Run development server
* `make container` - Build and Run in Docker container

# git init
# git branch -m main
# git config user.name
# git config --global user.name "JAlcocerT"
# git config --global user.name
# git add .
# git commit -m "Initial commit: Starting simple make podcast platform"

#sudo apt install gh
gh auth login
#gh repo create make-podcast --private --source=. --remote=origin --push
    
git init && git add . && git commit -m "Initial commit: simple landing website" && gh repo create make-landing --private --source=. --remote=origin --push

Vibe coded it today, placed into this previous post during my too optimistic period of 1 post a day earlier this year.

NEW - Make landing

Landing Page x TailWind x VanillaJS x email to SQLITE

NEW - Make landing

Modern Landing Page x NextJS x AuthJS x Waiting List to SQLITE x …

For sth very quick and simple VanillaJS is enough, but if you really want to put a service behind, like users editing their own content etc…

git clone https://github.com/JAlcocerT/make-landing
cd make-landing
make help
#make install && make dev

This is how easy is to go today beyond WP and Elementor!

And is not a bad niche at all, as I havent seen any Selfhostable SaaS for this kind of service with hosted version for money

Creating a Landing with Antigravity

Proper BiP BRD + Astro + FastAPI chatbot

git clone https://github.com/JAlcocerT/selfhosted-landing.git && cd selfhosted-landing
make help

#export PUBLIC_UMAMI_SCRIPT_URL= & export PUBLIC_UMAMI_WEBSITE_ID=
#make docker-build && make docker-up

#docker run -d -p 8044:80 --name selfhosted-landing selfhosted-landing:latest
#docker network ls | grep cloudflared_tunnel
docker network connect cloudflared_tunnel selfhosted-landing #connect
##docker inspect selfhosted-landing --format '{{json .NetworkSettings.Networks}}' | jq

    networks:
      - cloudflared_tunnel #to expose it to the internet

networks:
  cloudflared_tunnel:
    external: true # Mark the 'tunnel' network as external     

Finish your CF Tunnels setup via UI: selfhosted-landing-prod:80

And you will get a companion of the existing https://diy.jalcocertech.com/api/book.

Yeeea: its here: https://consulting.jalcocertech.com/

SelfHosted Landing Repo

Making a modern Astro SSR Landing Page

Astro SSR as Landing Page

Making SSG look cool with shortcodes and components

Status Pages

If you have few SaaS within your offer: you will want to prove the uptime status of your services

See also https://betterstack.com/status-page

eBooks Pages

Some People sell information via ebooks, why dont you do that?

In case you didnt know, creating an ebook as a code is not that hard:

If you tinker with obfuscation, you can also publish a web/ook and allow to download the PDF as per certain conditions:

Sell your eBook Repo

Source Code. Astro SSG ebook Theme (x) Stripe (x) N8N

DIY Website eBook

JAlcocerTech DIY Series | Ebook x Website x Obfuscation

Additionally to the base theme: https://github.com/candidosales/landing-page-book-astro-tailwind

That I was tinkering with on this post

There are other cool ones like:

• https://github.com/understanding-astro/understanding-astro-book

The book content about astro is free available, but no license and no way to download the full pdf out of the box

You need to provide your contact details to get it for free :)

Obfuscated web/book pages

It all started here while testing how to create AI driven ebooks on this repo: initially with RMD.

Creating and Publishing PDF eBooks

Download the ebook or read it via webpage when conditions are met

Obfuscate web and ebook Repo

ebooks creation as a code + fastapi obfuscation + modern web page

Now I have my ,webook’ published: https://diy.jalcocertech.com thanks to that repo!

Will soon be something more than one ebook :)

Journals

If instead of photo centered, you are a text focused kind of person.

Something like ebooks that we talked, or a pure type centered link would be for you.

For you to focus on just-journal kind of thing.

• https://github.com/radishzzz/astro-theme-retypeset

MIT | Revive the beauty of typography

For sure this can inspire you to build web/ooks kind of things and enables multilanguage :)

https://github.com/JAlcocerT/astro-theme-typography https://jalcocert.github.io/JAlcocerT/nextjs-toast-ui-editor/

Calendars

Something that looks really professional is to provide your availability.

As you are a cool creator, you will have a lot of demand:

Tech Consulting

Let’s discuss your tech needs

If you ever had doubts how easy is to get cal embeded:

You can also bring your MailerLite subscription link:

Photo Galleries

I dont need to tell you why you need a photo centered link to your own photo gallery: Im just here to tell you that you can

0. https://github.com/iamnyasha/minimma - Check this one if you are modelling :)

MIT | Interesting and simple Photo Centered Astro Theme

Could not avoid to fork - https://github.com/JAlcocerT/minimma as it reminded me to one Ghost Theme I used

But Ive been playing around quite a lot to get proper ig like galleries for real estate and for bloggers to have a cool place to publish.

Real Esate Photo Gallery

Applied the Astro photo Gallery component for the real estate landing

Photo Gallery Blog

Made with HUGO and Photo centered

1. https://github.com/obviyus/musee

GPL3.0 | Fast, responsive , self-hosted image gallery. Ships minimal JS to the client.

#npm install
npm install astro-purgecss@latest

npm run dev
#npm run build

2. https://github.com/AREA44/astro-multiverse

CC3.0 | One-page gallery design with a fully functional lightbox, designed by HTML5 UP

3. https://github.com/crnacura/PlayersClub

Players Club is a free Astro template for showcasing music artists—an experimental proof of concept

4. https://github.com/evadecker/astro-photo-grid

Last time I wrote about Photo Galleries was here.

And this was also cool: https://astro.build/themes/details/photography-portfolio-template/

I have added few shortcodes/components: like whatsap bouble

Just SSG

Source Code for SSG Components

Also, thanks to have tinkered with Nuxt (Vue) recently, got to know a very cool one: https://github.com/antfu/vue-starport

Photo Galleries Post

Source Code for SSG Components

PB x R2 x HUGo

Source Code for SSG Components

5. If liked the Nuxt post, you might also consider:

• https://github.com/Flosciante/nuxt-image-gallery

MIT | This starter lets you get started with NuxtHub Blob in seconds.

• https://github.com/cesswhite/hato-minimal-template

Podcasts

By this time, you have a lot of audience: you are an artist!

So having one of the links pointing to your podcast platform is very simple.

Tech for Podcasts

Creating a serverless Astro Podcast that can be selfhosted with containers

Astropod Repo

Forked and Tweaked Astro Podcast Theme that works on CF Pages

This is how to use the astropod project step by step:

To these themes you can also add formbricks and or calendar for more interactivity:

You can also use Gatsby SSG for Podcasting!

See how to bring audio via Hugo components as seen here

Courses

Like…Skool for artists?

Tech Talks

If you have a podcast, chances are that you are doing public speaking out there.

You can add QRs in the end of those thanks to a SliDev VUE Components like this one

PPT References

Who could have guess that you can do cool ppts as code:

Sample Tech Talk

Using SliDev to create PPTs

SliDev Editor Repo

NextJS ToastUI and SliDev ppts, with historical tech talks…

And have them referenced into a repo to keep the history

While sharing the ppt as one of the links :)

Last Video Uploaded

Chances are also that you are recording the sessions and uploading them to youtube.

Get the last youtube video of your channel like: just take the ChannelID

1. Go to youtube studio and you will get the YT channelID
2. Then, use it into your link kindofwebsite via

curl -s "https://www.youtube.com/feeds/videos.xml?channel_id=UCPPMA8ZEusAe5dVH6PbjZFA"
#curl -s "https://www.youtube.com/feeds/videos.xml?channel_id=UCPPMA8ZEusAe5dVH6PbjZFA" | grep -oP '(?<=<title>).*?(?=</title>)' | head -5

Your CV

Oh I wrote tech talks instead of just motivational speaches: because you are an artist.

In case you are not, you could also plug as one of the links your updated CV:

If you have been having a long experience, you should keep track of that

Just remember that one thing are beautiful CVs and other machine readable cvs

If you are looking to impress with a new curriculum, why not doing it as a web CV?

1. https://github.com/KonradSzwarc/devscard

MIT | A fully customizable template to create your online (and paper) resume without writing a single line of code.

2. https://github.com/mmouzo/astro-cv-esquelete

MIT | A free, easy-to-use CV template with a clean design. Just fill in your details and you’re ready to go!

3. https://blog.jread.com/posts/code-your-cv-with-latex/

Conclusions

This is also been a kind of…recap of websites too.

Botom line is simple: Start!

flowchart TD
    %% --- Styles Definition ---
    classDef action fill:#E3F2FD,stroke:#1565C0,stroke-width:2px,color:#0D47A1;
    classDef win fill:#E8F5E9,stroke:#2E7D32,stroke-width:2px,color:#1B5E20;
    classDef fail fill:#FFEBEE,stroke:#C62828,stroke-width:2px,color:#B71C1C;
    classDef learn fill:#FFF9C4,stroke:#FBC02D,stroke-width:3px,color:#F57F17;

    %% --- The Action Phase ---
    Start((Start)) --> Do
    Do(DO
Build & Execute):::action --> Ship(SHIP
Release to Real Users):::action
    
    %% --- The Moment of Truth ---
    Ship --> Outcome{Outcome?}

    %% --- Path A: WIN ---
    Outcome -- "WIN" --> WinAction(Validate & Double Down):::win
    
    %% --- Path B: FAIL ---
    Outcome -- "FAIL" --> FailAction(Post-Mortem & Analyze):::fail

    %% --- The Convergence: LEARNING ---
    WinAction --> Learn(LEARN
Consolidate Insights):::learn
    FailAction --> Learn

    %% --- The Loop Back ---
    Learn -- "Apply to next cycle" --> Do

Examples of Portfolio Links websites?

• https://peladonerd.com/
• https://jalcocert.github.io/Portfolio - Deployed statically via GH Pages completely free!

More competitors on the Saas Link Website domain:

• Taplink
• bento.me A comercial bento link website, owned by linktree
• https://getallmylinks.com/
• https://subscribepage.io/listy#

I have been kind of trapped within SSGs to create cool websites as per a vibe coded version of what other real web devs have put together first.

But for simple link/bento/landing pages…just goahead and vibe code it from scratch via NextJS ‘with a modern UI’.

Then, you wont probably need session recording for such sites.

But you will want to validate the web performance: Now adding the lighthouse-CI as discovered here!

#sudo apt-get install dnsutils -y #dns resolution
nslookup github.com 
dig google.com

curl -s -o /dev/null -w "dns_lookup: %{time_namelookup}s connect: %{time_connect}s appconnect: %{time_appconnect}s pretransfer: %{time_pretransfer}s starttransfer: %{time_starttransfer}s ---------- total: %{time_total}s http_code: %{http_code}" https://blog.jalcocertech.com

# docker run --rm -it -u $(id -u):$(id -g) ghcr.io/linkchecker/linkchecker:latest --verbose https://https://www.psikolognevinkeskin.com/

podman run --rm -it ghcr.io/linkchecker/linkchecker:latest --verbose https://www.psikolognevinkeskin.com/ > linkchecker_psyc.txt

Btw, the pages speed insights, can be done via API: see this .md

You will want to know how your Website performs:

• https://radar.cloudflare.com/scan/d92c5e34-6baf-42ad-bea1-e5c7e74a88bf/summary

• https://builtwith.com/theinstituteofskills.com/
• https://www.similarweb.com/website/theinstituteofskills.com/#traffic

And maybe let others place ads and get paid

Vibe Coding is…old?

People seem to be moving from vibe coding to…sth new: spec driven development they call it.

And these are some tools:

• https://github.com/Fission-AI/OpenSpec

MIT | Spec-driven development for AI coding assistants.

• https://github.com/github/spec-kit

MIT | 💫 Toolkit to help you get started with Spec-Driven Development

• https://github.com/kirodotdev/Kiro

Kiro is an agentic IDE that works alongside you from prototype to production.

About Web Development

Not sure how much better spec driven dev is.

But for sure that as of today you dont need to now TS, neither JavaScript nor CSS to create and publish a good looking and simple static website.

I recently tried NuxtJS here.

And its quite clear that you better go with most popular fwks to build your own.

In case you need to, here are some useful components to provide inspiration to your agents:

Just SSG

Source Code for SSG Components

FAQ

What we say vs what we do

• Stated Preference (What they say): Based on hypothetical questions. It captures what users claim they would choose.
• Revealed Preference (What they do): Based on actual behavior. It captures true preferences through real-world actions and choices.

La preferencia anunciada o preferencia declarada es un método para conocer las preferencias de los usuarios basado en lo que ellos dicen que elegirían en situaciones hipotéticas o que no han experimentado en la realidad.

Es muy utilizada en economía para anticipar cómo los consumidores podrían reaccionar ante nuevas opciones que aún no existen en el mercado.

Por ejemplo, se puede preguntar a una persona qué opciones preferiría en un producto nuevo o servicio que no ha probado.[1]

Por otro lado, la preferencia revelada se basa en observar el comportamiento real de consumo del usuario, es decir, en las decisiones y elecciones efectivas que hace en la vida cotidiana.

La teoría de la preferencia revelada sostiene que las preferencias de los consumidores se pueden deducir de sus hábitos de compra reales, ya que el hecho de elegir un bien sobre otro revela cuál prefieren realmente bajo las restricciones de su presupuesto.

Esto implica que las preferencias se infieren a partir de las elecciones efectivas, no de declaraciones hipotéticas.[2]