How I Built My Personal Website in Just 2 Days Using AI, Vercel, PlanetScale, and Next.js

2023-04-22

​

Hey folks! You won't believe what I managed to accomplish in just two days. I created my very own personal website using some pretty amazing tools like AI, Vercel, PlanetScale, and Next.js. I can't wait to share with you how these incredible technologies helped me build a fast, responsive, and easy-to-maintain website in such a short time.

In this article, I'll walk you through the whole process, showing you how I utilized these cutting-edge tools and frameworks to bring my website to life. We'll dive into how Vercel made deployment a breeze, how PlanetScale made database management smooth, and how Next.js took care of performance and optimizations. Oh, and let's not forget how AI played a crucial role in making this all possible!

Here's a sneak peek of what we'll cover:

  • Deploying with Vercel
  • Managing databases using PlanetScale
  • Building with Next.js for performance and optimization
  • Leveraging AI for rapid development
// Sample code snippet using Next.js
import Head from 'next/head';
 
const Home = () => (
  <>
    <Head>
      <title>My Personal Website</title>
    </Head>
    <main>
      <h1>Welcome to My Personal Website!</h1>
      {/* ... */}
    </main>
  </>
);
 
export default Home;

So, grab a cup of coffee and get ready for a fun and informative journey. Let's get started!

Vercel

I decided to go with Vercel and the template from leerob.io for my personal website for a few reasons. First, Vercel offers an amazing free plan that even supports custom domain names, which was a real game-changer for me.

Vercel's user-friendly interface made deploying my app a piece of cake. Just a few clicks and I was good to go! It also didn't hurt that they have a gallery of one-click templates to choose from, which saved me a ton of time when looking for the perfect starting point for my site.

The leerob.io template turned out to be the ideal choice for me. It came with a built-in blog, a clean and minimalistic design, and awesome integrations with GitHub and Twitter. And the cherry on top? It even had blog post view statistics right out of the box!

All in all, these factors made Vercel and the leerob.io template a winning combination for quickly creating and launching a fantastic-looking website with all the features I need.

PlanetScale

Moving on to the database part, I went with PlanetScale to power up my personal website. PlanetScale is a fantastic, scalable, and serverless relational database built on top of MySQL. This choice saved me from the hassle of managing my own database infrastructure. What's more, it was a breeze to set up and integrate with the leerob.io template.

Here's a brief overview of the simple steps I took to configure the template to work with PlanetScale:

  1. I signed up for a PlanetScale account and quickly created a new database.
  2. Then, I made a new database branch and deployed it right away.
  3. I set up a new connection in PlanetScale's intuitive dashboard and copied the connection string.
  4. Finally, I added the connection string to my project's environment variables, making sure to use the variable name DATABASE_URL.

With the connection string in place, I turned to CloudBeaver to connect to my PlanetScale database. In CloudBeaver's SQL Editor, I crafted a table named views to store information about my blog post views. The table featured a slug column as the PRIMARY KEY and a count column with a default value of 0. Here's the MySQL query I used to bring the views table to life:

CREATE TABLE `views` (
	`slug` varchar(256) NOT NULL,
	`count` int NOT NULL DEFAULT '0',
	PRIMARY KEY (`slug`)
)

Running locally

Now let's talk about how I got my personal website up and running on my local machine. It was super easy to set up everything using leerob.io's template. I needed to install dependencies, run the setup, and then fire up the development server. Here's a quick rundown of the commands I used:

pnpm i
pnpm build
pnpm setup
pnpm dev

Running pnpm setup made sure to clear out Lee's blog posts and personal details from the template. Once the setup was complete, I went ahead and updated the .env file by setting the IS_TEMPLATE environment variable to false. This allowed me to make the template my own.

With the setup done and the environment variable set, I was ready to launch the development server using pnpm dev. And just like that, my website was live at http://localhost:3000!

Conclusion

And that's it, folks! I managed to create my own personal website in just two days using some amazing tools like AI, Vercel, PlanetScale, and Next.js. It's incredible how technology has advanced, making it so much easier for us to share our experiences and connect with others. I'm excited to see where this journey takes me, and I hope you'll join me along the way! Feel free to explore my website, read my articles, and reach out if you'd like to collaborate or chat. Cheers to our exciting adventures ahead! 🚀