Cool Link in Bios (with SSGs)

Having a cool website for you linkinbio can be a good experience to get started with SSGs.

And they will provide a similar experience to linktree, linkbio,…

HUGO as Link in Bio

HUGO with one of my fav themes - Lynx

Astro as Link in Bio

Treelink and and astro-link-in-bio-theme are really cool imo!

1. https://github.com/nevthereal/linktree-template

2. https://astro.build/themes/details/ltree/

3. https://github.com/Boston343/landingpad

• https://landingpad.cosmicthemes.com/

GPL 3.0 A free and open source template to host your links and socials. Built with Astro, Tailwind CSS, and Keystatic CMS by Cosmic Themes.

Thanks to Boston343, I got to know about keystack CMS

KeyStack CMS - https://github.com/Thinkmill/keystatic

MIT | First class CMS experience, TypeScript API, Markdown & YAML/JSON based, no DB

4. https://github.com/trevortylerlee/treelink

• https://treelink.app/
• https://example.treelink.app/
• https://docs.treelink.app/guides/quick-start/

MIT | Free, open source Linktree alternative built with Astro & Tailwind CSS

git clone https://github.com/trevortylerlee/treelink

npm install
npm run dev

#rm -rf .git
npm run build

It worked and I Forked it! https://github.com/JAlcocerT/treelink

• https://pagespeed.web.dev/analysis/https-example-treelink-app/l6prjspv4k?form_factor=mobile

What I lived about this one?

It allow you to have a exposed static built site and also provides the capability to edit also online and export the /src/siteConfig.json

5. https://github.com/SofiDevO/allmylinks

6. https://github.com/MarcosKlender/AstroLinkHub

MIT | Open source links page, customizable via JSON. Made with Astro 4.

7. https://github.com/ctrimm/astro-link-in-bio-theme

• https://lib.corytrimm.com/
• https://astro.build/themes/details/link-in-bio-theme/

Link In Bio Theme for Astro

git clone https://github.com/ctrimm/astro-link-in-bio-theme

npm install
npm run dev #

#rm -rf .git
npm run build

LayoutSwitcher can be commented from layout.astro and in config.js you have everything you need to tweak the theme!

8. https://github.com/flamrdevs/astrolinkt

MIT | Link in Bio Template using Astro, React & TailwindCSS

9. https://github.com/apvarun/linkverse

10. https://github.com/saminnet/astro-simple-portfolio

It has a very cool moving background

MIT | Very simple portfolio built using Astro

11. https://github.com/vito8916/simple-portfolio

Really cool ig like portfolio, had to fork this one!

It looks amazing in phones

MIT | A simple but beautiful portfolio created with Astro

12. https://github.com/alamguardin/Astrolink

This is how they can look:

Link in Bio for Knitting

Astro treelink Customization

Content Creator Blog

For an instagramer who loves knitting

And like this:

LinkinBio

Links with astro-link-in-bio-theme

Links with HUGO LYNX

Collection of important Links

While performing like this

LinkInBio as Personal CV

While I was investigating those astro linkinbio theme, I found out also about some themes that can be actually be our personal CV, in a website, with links as well!

1. 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!

How to Deploy SSGs Link in bio

0. With Firebase or Cloudflare CLI or any other static file hosting:

npm run build

You just need to follow these commands:

npx wrangler pages project create #this will install the wrangler CLI package
#npx wrangler pages project list # See the projects you already have
#npx wrangler pages deployment list 

#npm run build #build the file manually

#https://developers.cloudflare.com/pages/configuration/build-configuration/#framework-presets
npx wrangler pages deploy dist # normally will be dist, but whatever <BUILD_OUTPUT_DIRECTORY>

##npx wrangler pages project delete your_project_name

We will upload the ./dist folder, as its the place where the static files are built.

You can use these 2 other methods as an alternative (leveraging automation), it also works with private repositories.

1. Github + Cloudflare Workers and Pages

2. Gitlab + Cloudflare WnP - Lets do this one step by step.

Go to the Cloudflare UI, and…