There are many web builder platforms that are easy to use nowadays. Some of them even allow users to create beautiful websites without having to write any code. Let's mention an old platform that claims to support 40% of websites in the world: WordPress. There are also no-code-required options like Webflow, or the popular Framer.
However, I don't want to use them. Like a chef, I want to craft my own dish with care and love.
I am quite idealistic in selecting the ingredients I will put into my website. Although, of course, I use ingredients that are available without having to grow or create from scratch.
For instance, the CSS framework I use is Tailwind. I could use my own custom CSS, but for what purpose? While Tailwind is already available with all its flexibility. Also, the static framework I use is Gatsby. Okay, I understand there are other options like NextJS or even Jekyll. But for me, Gatsby feels right for now.
Alright, let's dissect each ingredient I use.
Figma
Everything starts with this tool. From gathering mood boards to final UI design, I do it all using Figma.
Gatsby JS
This is the starter I use. I chose it because it's simple, easy, and has a wide range of available plugins.
Tailwind
This seasoning is a truly delightful flavor enhancer. It makes creating UI so much easier. It's incredibly user-friendly and highly flexible, following its master's preferences. The last time I played with a CSS framework was Twitter Bootstrap, and that was quite a while ago. Until I finally found Tailwind, which made me fall in love.
VS Code
After the design is done, it's time to write code. Since I decided to use Tailwind from the start, I've added the IntelliSense extension to this text editor to make it easier to call the classes provided by Tailwind.
GitHub
This is where everything is stored. The code I write is saved with all its versions and branches. From this platform, the website can be deployed to Gatsby Cloud, Netlify, or Vercel.
Netlify
Previously, I used the native Gatsby Cloud service. However, because Netlify offers more features and is very user-friendly, I switched to Netlify. There's also Vercel, which is equally easy to use and offers free analytics. But for my current needs, I think Netlify is the best fit. Besides, Gatsby was recently acquired by Netlify, so it feels like home.
Oh, and a while ago, Gatsby Cloud was shut down, and people were forced to migrate to Netlify, which is good for me.
Ghost
Since its first version, I've fallen in love with this platform. I use Ghost as a back office for writing content. What I display on this website (Journal) is the API that I hook up to Netlify. So when there's a change in Ghost, Netlify automatically rebuilds the app.
Initially, I was quite idealistic about using markdown only, without connecting to any CMS. But after a few times of posting content, it felt inefficient to have to open VS Code again and again.
Fly.io
I use this platform to host Ghost. Why not use DigitalOcean or Ghost Pro? The answer is that Fly.io is free. At least if usage doesn't exceed $5 per month.
These are some of the ingredients I use to build my personal website.
Is it enough?
Am I satisfied?
Certainly not.
There's still plenty of room for exploration, and I'll likely add some specific ingredients to the mix.
I believe a personal website is a never-ending development. Because it's highly personal, both in terms of design and development, when I come across other websites that are cooler, they can influence me to update my own site.
As a Product Designer, I find playing with JS and CSS to be a form of relaxation. When what we design in Figma is implemented precisely with additional interactions, it's truly satisfying!