qrius.one
Published on

Building my tech blog in 2 Hours with Power of AI 🦾

Authors
  • avatar
    Name
    Prithvi Anand
    Twitter

TLDR;

  • A Next.js + Tailwind repo deployed on Vercel is a quick and efficient way of starting a custom blog 📝
  • GPT is good at writing code for React components, not all that great for writing articles as of now 😅

Introduction

For years, I harbored the dream of starting a tech blog. As a developer with a passion for design and engineering, I wanted to create a platform that was a reflection of my interests and expertise. However, one major roadblock that had prevented me from turning this dream into reality was the time and effort required to code and design a blog from scratch. That was until I discovered an innovative solution, harnessing the power of AI.

Development 🛠️

Next.js + Tailwind

To streamline the development process, I opted for a Tailwind and Next.js boilerplate that already had Tailwind CSS integrated. This decision allowed me to hit the ground running. I used the following command to clone the boilerplate:

npx degit 'timlrx/tailwind-nextjs-starter-blog'

For more detailed instructions, I also referred to the step-by-step documentation available at Starter Guide 📜

Why Next.js?

I took this decision because Next.js provides support for server-side generated content, which is excellent for SEO. It's a framework I was already familiar with, having worked with React and Tailwind earlier. Additionally, I planned to write my articles in .mdx files, decoupling the content from any specific HTML or JSX. This flexibility meant that I had the ability to migrate the content to other systems if needed. 👍

Building the React Components with AI

Next, I harnessed the power of GPT-3 to create a React component for my personal homepage, adhering to a specific design prompt. Here's a sample prompt I used:

Create a React component for a personal homepage.
The page should feature a profile image on the left, with a name and a brief
description on the right. The name should be in a large, bold font. The description
should have highlighted text within it. Below the description, there should be a
list of links to social media profiles and a resume. The profile image should have a
circular shape with a border and a slight rotation effect. The links should have icons
next to them, and they should change appearance on hover. Make sure the page is
responsive for both small and large screens.

GPT quickly gave me the code for a react component, all that was left for me to do was to copy/paste it to my codebase at the right place.

GPT building React components

The design was pretty basic initially but functional. With some imagination of how the page should look like, I made some more prompts and kept on asking GPT to improve the code accordingly. After 30-40 minutes of me chatting with AI, I had two pages, fully responsive on desktop & mobile, flexible with light mode and dark mode and ready for deployment.

Deployment 🚀

After crafting my blog, I chose Vercel for deployment. It is a great cloud tool that provides workflows, and infrastructure to deploy faster. Here are some reasons why Vercel I feel it is a good choice:

Ease of Use: It simplifies the deployment process with an intuitive interface. You can deploy your Next.js project with just a few clicks or CI/CD.

Serverless Functions: It supports serverless functions, which are ideal for dynamic applications like blogs. You can add serverless functions for contact forms, data fetching, and more.

Continuous Deployment: It offers continuous deployment, automatically building and deploying your site when you push changes to your repository.

Content 📝

As of August 2023, the content generated by GPT seems too generic, less engaging, and sometimes even inaccurate. I love to write, so until AI becomes powerful enough, I'll write my blogs manually. 😛