-4.9 C
New York
Friday, December 5, 2025

How you can Code Your Personal Web site with AI


internet hosting platform on your personal web site, the place you’ll be able to showcase your portfolio and different helpful assets about your self. Earlier than making my change, I had been utilizing WordPress for about 1 yr, and I began fascinated with a number of issues that had been tough when utilizing WordPress:

  • Creating the web site – It was exhausting to realize the design I wished
  • Sluggish – Creating and updating in WordPress is sluggish as a result of it’s a drag-and-drop editor
  • Lack of flexibility – it’s important to use premade parts. Alternatively, you should use customized HTML code, however you then nonetheless have to repeat the code over, which is sluggish

I then considered how simple it’s to program up my very own web site utilizing an agentic coding instrument like Claude Code or Cursor.

Why am I spending plenty of time drag and dropping parts, and nonetheless not getting precisely the design I would like, once I can merely immediate Claude Code to do precisely that in simply 1 minute?

That’s once I determined to make the change from hosted WordPress to managing my very own web site, deployed in Vercel (free of charge). The primary level of this text is to point out you the way to do that and why you don’t actually need any programming expertise to do it.

This infographic highlights the primary contents of this text. I extremely advocate shifting from a drag-and-drop editor on your web site to a self-coded web site made utilizing coding brokers. This makes it means simpler and quicker to each create and replace your web site. Picture by Gemini.

You could find my web site, which I designed, on this article right here.

Why code your individual web site

The primary cause you must begin coding your individual web site, as a substitute of utilizing a drag-and-drop editor like WordPress or Webflow, is:

  • It’s tremendous simple to do – You actually don’t have to the touch any code
  • It’s means quicker to create and replace your web site
  • The designs are a lot better, for the reason that coding brokers are good at making high-quality designs
Speaking Page
This picture exhibits the Talking web page on my web site. You may see the navbar on the high, and the precise contents of the web page under. Picture by the writer.

As a result of it’s quicker, you may as well iterate in your web site designs extra rapidly, which is tremendous helpful whenever you attempt to make the very best web site attainable.

Fast iteration velocity is the important thing to fast progress

After all, there are some arguments the opposite means round, for instance, that WordPress has plenty of integrations that may be helpful. Nonetheless, for me, the professionals far outweigh the cons.

With the ability to replace my web site by merely inputting one immediate, similar to:

Make all of the buttons on the web site fade in on hover

This actually updates my complete web site in round 1 minute (together with Claude Code updating the code and deploying to Vercel). Doing this similar motion in WordPress would in all probability take me no less than half-hour.

Now think about it’s important to do that change a number of instances per week. At any time when including new content material to your web site, or whenever you notice you need to change one thing. Altering it instantly in code with coding brokers is solely way more environment friendly.

Claude to code your individual web site

Creating the web site

Hopefully, you’re satisfied why you must begin coding your individual web site (or let Claude code it for you), as a substitute of utilizing a drag-and-drop editor. Now, let’s transfer into how you are able to do it.

The primary secret right here is that you simply don’t actually have to do this a lot your self, contemplating how good the coding brokers are at creating web sites. I created the web site from my earlier WordPress-hosted web site.


I began off by prompting Claude Code with the next, the place eivindkjosbakken.com was my WordPress website:

Given my web site right here: eivindkjosbakken.com, copy this web site precisely, 
through the use of React. Create a GitHub repository and push the code there

Claude’s code then created a near-exact reproduction of my earlier web site, which I might now run domestically. I checked the designs and made positive all the things was okay, which it was for essentially the most half, aside from a number of issues, which I’ll cowl within the subsequent part.

Internet hosting the web site

I then moved to internet hosting the web site. I take advantage of Vercel because it affords free deployments of your web site, and it’s easy to make use of and might be totally managed from the terminal. Having it managed from the terminal is tremendous good, so Claude can care for the deployments and different points with Vercel.

Nonetheless, when first deploying, I needed to create a mission on vercel.com and join my codebase to that mission. You may ask any LLM on how to do that, they usually will provide you with an correct step-by-step information to connecting your code to Vercel. Vercel additionally affords you 100 free deploys per day, which ought to be greater than sufficient.

After connecting to Vercel, all the things was good to go, and I might entry my web site via the online.

Updating the web site

After copying my WordPress web site, I additionally found some updates I wished to make to my web site. I, for instance, wished:

Article highlighting
This picture highlights one of many design enhancements I made to my web site. Everytime you hover over an article on this web page, you’ll be able to see that the article card is highlighted. Picture by the writer.

These adjustments had been fast to make, and I merely needed to immediate Claude with an outline of my change (i.e., make the articles card highlighted on the over), and it made the change in lower than one minute. Making this modification with a drag-and-drop editor would seemingly take rather a lot longer.

Now, solely your creativeness can cease you from updating your web site, and you’ll, in actuality, make any change and rapidly iterate on designs by merely prompting your coding agent.

Challenges I needed to resolve

Claude largely one-shot the recreation of my previous WordPress web site into code, simply from the URL of my web site. Nonetheless, there have been some points I needed to resolve, as you’ll be able to see listed under:

  • My WordPress had the choice to ship emails to me
  • I needed to copy over some photos from the previous web site, for instance, for my articles (handbook processes)
  • Some points with the social hyperlinks – each discovering the proper ones, and ensuring they’re top quality
  • WordPress has a mailing checklist, and I needed to handle that one way or the other myself now
  • Shifting over the area from WordPress to NameCheap

For the emails, I used EmailJS to have the choice of sending emails from my web site. This service is free and easy to arrange after asking for a step-by-step information out of your coding agent.

For the picture copying, I merely downloaded the pictures domestically, put them into the code repository, and advised Claude’s code the place it might discover the pictures. Claude then copied the pictures into a particular picture folder, in order that they might be hosted on the web site.

With the social hyperlinks, I merely needed to immediate Claude a number of instances, with a screenshot of what the social hyperlinks seemed like (at one level, they seemed very grainy, for instance), and Claude would resolve the difficulty with three to 4 prompts and suggestions.

For the mailing checklist, I made a decision to maneuver to MailerLite, which affords embedded types you should use in your web site to have folks subscribe with their e-mail. You may merely give the embedded kind to your coding agent, which is able to embed it into your web site.

Shifting domains was essentially the most time-consuming process. I had bought my earlier area in WordPress, which made the method a bit trickier. Nonetheless, I made Gemini 3 present me a step-by-step tutorial, which labored nicely, and I transferred domains to NameCheap, the place I’ve full management over the area myself.

Conclusion

On this article, I’ve mentioned how one can transfer your web site from a drag-and-drop editor like WordPress or Webflow to your individual managed web site. This course of is comparatively easy utilizing Coding brokers and Vercel, which then supplies you with much more management over your individual web site. Moreover, it permits you to iterate extra rapidly in your web site and makes it easy to replace your web site.

I imagine we’re shifting away from drag-and-drop editors altogether, after we see how nicely at this time’s coding brokers work, and with the truth that you don’t actually need coding expertise anymore, to carry out easy programming like updating the design of a web site.

👉 Discover me on socials:

📚 Get my free Imaginative and prescient Language Fashions e book

💻 My webinar on Imaginative and prescient Language Fashions

📩 Subscribe to my e-newsletter

🧑‍💻 Get in contact

🔗 LinkedIn

🐦 X / Twitter

✍️ Medium

Related Articles

Latest Articles