A Website in under an Hour: My new Zero-Cost Stack

Last week I set out to tackle a project that I’ve been putting off for a long time - updating my personal portfolio website.

It’s one of those jobs that should be fun, but it often feels boring.

Over the years I’ve built over a thousand websites (not all of them for myself, while I do have far more domains then I need it’s not quite that many).

I actually love building websites. But I don’t love maintaining them.

This time I decided to explore a new approach, to simplify things. Not only for now, but for the future.

To move off Wordpress, which I’ve used forever, to a flat HTML site.

The main reason is I want something that’s easier to manage. Where I don’t have to worry about it getting hacked, or keeping plugins up-to-date. That’s really lightweight, quick and easy to use.

And that eventually I can connect it up with Notion to help make blogging and documenting things a breeze.

Disclaimer: This guide is designed for people who have been too busy/lazy to build themselves a simple portfolio or blog site. If you are looking to build a professional or business website, then this is not the post for you. You can still use this stack, but if you’re not familiar with how to design great websites, then it is absolutely worth going and speaking to a web agency to help them design something specific to your needs.

Here’s my latest Zero-Cost stack that I’m testing out. It’s perfect for simple one pagers, portfolio sites and landing pages.

1. Astro - A simple lightweight framework used by over a million websites including CloudFlare, OpenAI, Google and Microsoft, to The Guardian and NBC News.

2. Vercel - Has a generous free hosting tier (100GB/mth) that automatically pulls from GitHub and handles SSL

3. Umami - Free simple analytics. Great lightweight and free alternative to tools like Google Analytics

4. Cloudflare - Free DNS

5. GitHub - Repo management

6. Supabase - Scalable databases (this project doesn’t need a DB, but if you are building something that does, then this is a great place to start with a generous free tier as well)

I haven’t used Astro before but their website looked great, it came with a tonne of social proof. Part of the reason I decided on going with Astro is because eventually I’d like to play around with connecting Notion to my website, and they have a loader that is going to make that really easy.

They also have connectors for a bunch of other platforms. If you have a Wordpress site and aren’t ready to part ways with it, you can even use Astro to convert it into a static HTML website, reducing the risk of it being hacked, speeding up your site and reducing server load.

But for this walk through, I’m keeping things simple and we’re just going for clean and easy HTML/CSS with maybe a little bit of JS.

With Vercel, you can connect it to a GitHub repo to make updating your site super quick and easy. And don’t stress if you don’t know how to code. All of these tools are beginner friendly and you can do all of this without writing a single line of code.

For v1, I just wanted to see what I could get setup as quickly as possible. While I’d love to spend some time designing something great, for now I just needed something quick and easy.

I was curious to see how ChatGPT would handle the task, since they’ve been praising how great it is at front-end dev now.

I asked it to help me setup a simple astro site that’s just a clean bio and links hub. There were a few minor things it didn’t get quite right the first time, but overall the instructions and code was clean and easy to work with.

I still find in general Claude seems to be doing a better job at coding based tasks, but if ChatGPT is your tool of choice, GPT-5 did a reasonable job here.

Alternatively there are also a bunch of free & paid Astro themes you could choose from over at https://astro.build/themes/

I was pretty happy with the design ChatGPT came up with based on my prompts. I wanted something clean and simple, that I can build on later.

It personalised the content based on what it knows about me, filling out things like my bio, and projects based on chats we’d had elsewhere which was kind of nice, and made it easier to get started customising it.

It’s only been a few days but I’m feeling pretty happy with this stack. I’ve already pushed up a bunch of quick small changes. It’s perfect for what I need right now - something really simple and quick to update.

I’m actually finding it waaaayyy quicker to update via VS Code and committing to GitHub than when I used to have to login to Wordpress.

If you’ve got no idea how to get started, here is a step by step guide to create your own personal website in under an hour.

For this walk-thru, you don’t need to write any code. It can be an easy entrance into vibe coding if you’re curious and want to try it out.

If you define what you want really well in the first prompt, you can do this in as little as 1 or 2 prompts. And if you don’t quite get it right the first time, you can ask it to make changes.

Seven steps to building your own website in under an hour - without spending a cent*

(*) Unless you need to buy a domain. That will cost you. But it’s like $10-20/yr. You can register domains with Cloudflare, Vercel or your domain provider of choice.

1. Have a chat with your preferred AI Assistant - ChatGPT, Claude, Gemini to plan out the project. In my experience, Claude generates the best code, but I tried ChatGPT-5 here and it worked well.

   Prompt: Create me a website for <usecase>. I want to use Astro, Vercel, Umami, and GitHub.
   <describe the type of look you like, be as detailed as you possibly can. Include desired colours, font style, even include example websites if you can to help it understand the kind of look you are after. Depending on which platform you are using you can also upload a design you have created and it will generate the code for you.>
   <Detail what pages or content you want eg about, portfolio etc>
   <Explain if you need any special features. This could be animation styles, or if you need a database or something more technical.>

2. Install Astro

   1. Open up terminal

   2. Type: npm create astro@latest

   3. Follow the prompts
      Note: If you don’t have Npm already installed then you will need to add it first.

3. Download the files and copy them to your git repo

   Prompt: Create a zip folder containing all the code and files using the project tree structure defined.

Note: ChatGPT struggles sometimes creating all the files so you may need to check that it actually does it, and ask again if it misses some.

4. Review all the config and pages - personalise to suit your own needs.
   You don’t need to write any code here, unless you need to upload pictures. However you will need to look at the code and figure out which bits need editing. Update the content to be your own words removing any placeholder text.

5. Add analytics (optional)

   1. Create an account on umami

   2. Add new project

   3. Copy the script line to the head (usually found in src/components/layout.astro)

6. Build and Test it locally

   1. In terminal:

      1. cd your-project-folder

      2. npm install

      3. npm run dev

      4. Copy and paste the local URL to a browser and see your website in all its glory.

7. Deploy - push to git, add project in vercel and sync.

   1. If you aren’t familiar with GitHub already, then start here, otherwise jump back over to terminal and push to git. If you’re not comfortable with command line interfaces, they also have a very user-friendly desktop app.

   2. Create account in vercel

   3. Follow the prompts to add a new project and connect git

   4. Update DNS so that your domain name is pointing at the Vercel server

And that’s it! In less than hour you’ll have your very own personal website that can grow with you. Updating is easy. Simply update the code locally through VS Code or your preferred editor, commit to Git and Vercel will instantly load the latest version.

If you’re after creating a more detailed (or nicer looking) website, then you will likely need to do a lot more prompting than this. But that would also be the time where it makes more sense for you to go and speak to a web developer who can help design and build you something really unique and perfect for your market.

If you just want a simple one pager place you can call your internet home, and all of this feels a bit too much, there are tonnes of alternate options out there you can try as well. My favourite is https://carrd.co

But I hope this inspires you to finally get around to updating or setting up your own little personal site. And remember it doesn’t need to be perfect the first time. Just like you, your little website can grow and evolve as you do. But it feels nice to have a little corner of the internet that you can call your own.

If you build something I’d love to see it! Send me a message, or add a comment below.