So, let's say you have a massive case of writer/designer/coder block. Or that you need to create a site in a hurry for a last-minute project. Or, like me, you are just lazy as hell.
Some people say that ChatGPT and OpenAI are going to kill jobs and replace humans. I, looking on the bright side, love to automate menial tasks and make things as simple as possible, and I think that it's better to make ChatGPT work for you and spend your time on what is really important.
Want an example? Here, I'll demonstrate how I used ChatGPT to create a site from scratch, from code to layout to content, in a few minutes, and while testing the tool for this purpose for the first time. You just need to know what to ask and how to ask.
"I am the H.A.L 9000. You may call me Hal"
First, let's start with some minimal content so our artificial intelligence can begin. Describe what your site will be about, giving the maximum possible details that you can. The more detailed your command is, the better:
I am a Tech Lead working as a freelancer/consultant specializing in WordPress, SEO, Analytics, and Web Development. I want to create a site showing my work with at least four pages. Please outline those pages for me.
(Note that I used "please" in my command. This is not mandatory, but I'm 63% certain that it will prevent me from being killed during the upcoming AI War, and I never play against the odds. I also say "thanks" to my Google Home, you never know.)
Cool, ChatGPT gave me a basic idea for a site with four pages, describing what each page should have! It's pretty basic, and it's possible to expand this, but let's keep it simple for now. What matters is: I didn't need to think about what each page should have and how to structure my new portfolio/site.
So, our next step is to start creating those pages. Ask ChatGPT to do it:
Thanks! Now, can you please create the code to generate those pages using GatsbyJS?
It's important to note that I decided on Node/GatsbyJS just because I'm more familiar with this framework. You can ask for any format you want and ChatGPT will deliver it for you. Want pure HTML? Ask for code in pure HTML. Want it in PHP? Ask for code in PHP. Do you want to create your portfolio using Python? Ask for code in Python. Do you want nudes? Ask for… actually, don't.
There are some limitations when using ChatGPT for code — it's common for the prompt to stop working in the middle of the code after some time. If it happens to you, click on "Regenerate response" and ChatGPT will restart.
If you have some knowledge of nodeJS, you'll notice something in the code: it mentions a "../components/layout" that doesn't exist! Also, the gatsby install doesn't have a specific configuration, even ChatGPT warns about this:
So, for the sake of laziness, let's ask ChatGPT to create those files for us, including the CSS so our site can be a little more presentable:
Can you also create the necessary layout.js and gatsby-config.js, as well as some CSS so my site seems more professional?
And here it is! Our site is almost ready!
But wait, there is more
This is a GatsbyJS install, so I also want ChatGPT to create the package.json for the project:
And I just noticed that the "Contact Me" CTA does nothing! Outrageous! I'm lazy but I won't deploy unfinished work. ChatGPT, do something about this!
Now, I need a code for the “Contact Me” CTA that generates a simple contact form compatible with the code that we did and with Netlify. This contact form needs to have the fields: Name, Email, Company, and Message
I won't give too many details on how to make the site run, as you can use a different solution than Node/GatsbyJS and this isn't the purpose of the document. But after a certain amount of copy & paste (ChatGPT still doesn't do this :\ ) here's the final result. You can also see it online and on my GitHub profile.
But this isn’t a portfolio!! I was misled by the title of the post!
Of course, this isn't the full code, nor is the job finished. Keep in mind that from the first question until the site was deployed it took me less than 30 minutes, from an idea to a minimal layout to code.
I can expand this indefinitely asking ChatGPT for more and more content. Do I want a better homepage? I can ask for content. Do I want better CSS? I need to ask for it and give more details (look and feel that I want, primary colors, if it will use some framework, etc.). Do I need help with adding some projects and images? I can ask ChatGPT how to do it.
The only real limitation is how much I know of what I need and if I can ask the IA for it. As a proof of concept, it's clear that the number of applications that I can use with OpenAI is limitless. Do I want a SAAS service that creates a complete site from zero using just a few questions, content included? It's doable, with some work and a lot of investing.
