Building a Website Code-Free in the 2024 tooling landscape

I made a website without using code. I’m not a technical person. Here are the tools I used, how I did it, what I wish were possible, and what features already work really well.

To me personal sites are a mixture of a CV, a dating profile and my own library of highlights.

I really like the concept of connecting and displaying my digital identity, past experiences, social accounts, performance of my previous projects, my favorite preferences and more. All in one spot. My internet home.

Ideally, with displaying so much voluntary information about myself, this home would have individual permissions to access parts of it based on who my visitor is. Until that is not possible, let’s settle with a little bit less invasive approach.

The baby: https://rekais.online/

Here are the steps to the process:

I recommend you follow this logic, but do you obviously.

Find websites that inspire

Here is a list of my current favorites that I fell for:

Find emotional support network

Might just be a me thing but I work better if I have people to talk about it with. This is a public thanks to all my friends and family who listened to me talking about this as a thing I NEED TO do but been putting off.

Notion page for all my content and copy

I’ve already had this list going because i have frequent public appearances and I don’t want to forget any of them. Collect here a bio, relevant links to videos and writing and some accomplishments. Here is mine, duplicate the format at your own risk: https://citrine-tea-1b5.notion.site/Reka-eth-d277c011d86544bab9e0f13cddcfd6bf?pvs=4

Buying a domain

I bought mine on Porkbun.com. They have good pricing, it’s easy, they offer other services like email hosting and many many more i might need later. + the brand is a pig CMON.

Figma for creating a layout and color scheme

Here is what mine looked like at first:

Process here was trying to mix the small favorite parts of the sites in step 1, and the copy and content of step 2. this tool is also helpful in picking color palettes https://coolors.co/generate

Researching tools

This was fairly easy, my friend Vijay(@vijaymichalik) helped and we knocked it out in 20 mins. Here is a shortlist of all the results we found focusing on web3 involvement and pricing for a custom domain personal site.

Picking a tool and learning the basics

I chose Framer.com because of the custom domain pricing, Figma integrations, and level of creative freedom with least knowledge about the tool. They have plenty templates and tutorials, i picked their template “Freedo” as it seemed to already have the most assets I wanted.

There are kinks in it especially with mobile, so you have to re-edit a few things for that display but after a few rounds over it it’s easy.

Connect the domain with your site

At first it looks like a foreign language with numbers and jargon but there are tutorials that feed the “how to” to you step-by-step so don’t worry.

Celebrate your grand success

Open it on all devices to take in all the beauty, send it to your friends and your mom.

Now the learnings…

What is goodie already and what is where we should be developing our tooling and hopefully general data infrastructures towards.

I wish:

  • I could connect, display and automatically update more of my personal data:

    • What Google knows about me

    • Personality tests results

    • Spotify playlists or top listens from that day

    • Best performing social

    • Friends, network

    • Books and articles I’ve read

    • Badges of past experiences

    • Proof of professional non-technical experience (no Github)

    • Fun facts about my interests

    • A music video i have spent the most time watching

  • A way to create different visitor views for people with different paths or identities coming to the site

  • Interactive games that show more of my personality

    • two truths and one lie

    • take a test to see if we are compatible professionally / romantically

    • guess the celebrity crush

  • I could have different contact information displayed based on who the visitor is

  • There was less platform jargon

  • A tool for going from drawing potatoes and blobs into actual buttons and shapes. Less deep language about learning every new tool’s own native termage terms. And better, I guess, AI prompts for giving you, for putting in more of your color palette, what you already made in these three. So you know the copy, you know the color scheme, and you know kind of what layout you want. There has to be something that lets you essentially upload it, and it gives you better AI generated versions that you can edit more freely. I wish there was something that was as easy as using it on my phone.

What works:

  • Truly no code is needed

    • I could even hide eastereggs!
  • There were many site builders to choose from with lots of pricing options

  • Creative freedom is not limited anymore if you get deep enough in knowing about the tool, which only takes a couple hours of video tutorials

  • So many guides on connecting a domain with the hosting tool that you used to create the site

Hope this was helpful.

xx, Reka

Subscribe to reka.eth
Receive the latest updates directly to your inbox.
Mint this entry as an NFT to add it to your collection.
Verification
This entry has been permanently stored onchain and signed by its creator.