Prologue of blahaj.bio#

I own a lot of domain names - probably more than I should admit - and pronouns.site is one of the ones I recently decided to actually put to good use. The domain name itself was too perfect to pass up: Pronouns.site ends with .site as the TLD, so creating a pronouns information website felt like the most natural fit. It’s a simple concept, but I hadn’t tackled a project quite like this before, so I thought it would be a fun challenge to dive into.

The goal was straightforward: create a simple, clean bio creation website that anyone could use to build their own personal bio page. But I had a specific audience in mind - primarily people in the LGBTQ+ community. This demographic tends to be more interested in creating personalized bio pages for social media profiles, Discord servers, and other online spaces where self-expression matters. Plus, they’re the ones most likely to recognize and appreciate Blähaj, the adorable shark plushie from IKEA that has somehow become an unofficial mascot for trans and queer communities.

Going into this project, I had never worked extensively with GitHub Actions for automation. The learning curve was definitely steeper than I expected, but that’s what made it interesting. With some persistence and help from a few developer friends, I managed to create a workflow that would become the heart of the entire project.

The Technical Foundation: Why Astro?#

When I started building the website, I wanted to keep things simple while still delivering a modern, fast experience. I decided to use Astro, a static site generator I’d been seeing in other projects and wanted to try hands-on. Astro caught my attention because of its focus on performance and simplicity - it generates static HTML by default and only loads JavaScript when absolutely necessary.

What really sold me on Astro was its component-based structure. You can create components and pages that are reusable with minimal setup, and it plays nicely with multiple frameworks if you need them. For a project like blahaj.bio, where the core functionality is relatively straightforward, Astro’s “islands architecture” meant I could build a lightning-fast site without unnecessary complexity.

The framework also handles content collections beautifully, which was perfect for my vision of treating each bio as a structured piece of content - similar to how blog posts work, but for personal profiles instead.d

Designing the User Experience#

Before diving into the GitHub Actions workflow, I needed to nail down exactly how users would interact with the site. I drew inspiration from how GitHub Pages works with Jekyll - users write content in Markdown files with frontmatter containing metadata, and the site generator handles the rest.

For blahaj.bio, I designed a bio format that would include:

• Username: The unique identifier that becomes part of their URL
• Display Name: How they want to be presented on their bio page
• Pronouns: Essential for inclusive representation
• Bio Content: A free-form section where users can write about themselves, their interests, links, etc.
• Links: A section for social media or other relevant URLs

1
---
2
username: ""
3
display_name: ""
4
pronouns: ""
5
bio: |
6

7
links: |
8

9
---

The beauty of this approach is that users don’t need to know HTML, CSS, or any web development. They just fill out a structured format, and the site handles all the styling and presentation automatically. And that all the user has to do is create a GitHub issue and choose create bio as the template then fill out the fourm. And once they submit, their bio is live within minutes. (whenever github actions run & sucessfully builds the site)

The GitHub Actions Magic#

Here’s where things got really interesting. I wanted to create a workflow that would be as frictionless as possible for users. The solution I settled on was to leverage GitHub Issues as the interface for bio creation.

Building the Site Architecture#

The Astro site itself is structured to handle dynamic bio pages efficiently. Here’s how I organized it:

1
src/
2
├── content/
3
│   ├── config.ts          # Content collection definitions
4
│   └── bios/              # Individual bio files
5
│       ├── username1.md
6
│       ├── username2.md
7
│       └── ...
8
├── components/
9
│   ├── BioCard.astro      # Individual bio display
10
│   ├── BioGrid.astro      # Grid of bio previews
11
│   └── Layout.astro       # Base page layout
12
├── pages/
13
│   ├── index.astro        # Homepage with bio grid
14
│   ├── [username].astro   # Dynamic bio pages
15
│   └── about.astro        # Project information
16
└── styles/
17
    └── global.css         # Blahaj-themed styling

Community Response and Iteration#

Since launching blahaj.bio, the response from the community has been really encouraging. I’ve seen people create bios for everything from personal introductions to project showcases to creative portfolios.

The Technical Stack in Detail#

For anyone interested in the technical implementation:

Frontend: Astro with TypeScript for type safety Styling: Vanilla CSS with CSS custom properties for theming Content: Markdown with YAML frontmatter, processed by Astro’s content collections Automation: GitHub Actions with running on every issue with the bio-creation label that is marked open to rebuild the website Hosting: GitHub Pages with custom domain Monitoring: GitHub’s built-in insights and Actions logs

The entire project is open source, so anyone can contribute improvements or fork it for their own use cases.

Reflections on the Project#

Building blahaj.bio taught me a lot about creating frictionless user experiences and the power of automation. It’s one thing to build a tool for developers who understand Git workflows; it’s another to create something that anyone can use regardless of their technical background.

Most importantly, it’s been a joy to see people use the platform to express themselves. There’s something special about providing a simple tool that enables creativity and self-expression, even in small ways. Although the look of the site is still very simple and needs more updates to make it more visually appealing, the core functionality is solid and serves its purpose well.

Getting Started#

If you want to try it out, just head over to the blahaj.bio GitHub repository, create a new issue with the bio template, and you’ll have your own bio page within minutes. It’s free, it’s simple, and it’s made with love for the community.

And if you’re a developer interested in contributing or creating something similar, all the code is available to explore, fork, and improve upon. Sometimes the best projects are the ones that solve simple problems in delightful ways.

🦈💙