Building My Blog: AI Coding, Git & Vercel
Welcome back! If you're reading this, you are looking at my newly developed personal blog. But this isn't just a standard HTML website—it's a testament to the speed and power of modern AI-assisted development and automated CI/CD pipelines.
Today, I want to pull back the curtain and share exactly how this website was built, designed, and deployed.
The Power of AI Coding
I've always been interested in optimizing workflows, and recently, my focus has shifted heavily into AI coding and development. Instead of writing every line of CSS by hand, I utilized the Antigravity framework—an advanced AI coding assistant—to pair-program the entire structure of this site.
By providing clear, deterministic prompts, the AI was able to:
- Generate elegant, semantic HTML5 structures.
- Implement a modern CSS design system utilizing CSS variables and the sleek 'Outfit' font family.
- Create complex micro-animations, like the scrolling progress bar you see at the top of this screen and the smooth fade-ups on page load.
Version Control: GitHub
Code is only as good as its history. To ensure I could track every change, rollback mistakes, and maintain a professional workflow, I initialized a Git repository and pushed everything to GitHub.
One interesting challenge we faced was managing tracked files. Initially, my raw Markdown draft files
were being pushed to the public repo. Using Git CLI, I utilized git rm --cached *.md and
updated the .gitignore file to keep the raw content strictly on my local machine while
sharing the polished HTML worldwide.
Continuous Deployment: Vercel
The final piece of the puzzle was hosting. I connected my public GitHub repository directly to Vercel. Vercel acts as a continuous deployment (CD) pipeline.
Now, whenever I write a new blog post (like this one!) or tweak a CSS file on my local machine, I simply
run git commit and git push. Vercel instantly detects the change on the
main branch and updates the live website within seconds. Zero manual uploading required.
What's Next?
This blog is my sandbox for testing new AI development techniques, UI designs, and infrastructure tools. Stay tuned for more posts as I dive deeper into automated development!
Comments